• Registered: 2012-12-13
  • Posts: 5

Topic: Making Thumbs partly transparent

Hi,

i tried to figure out how to edit the css but I can't find the correct line. I want to be the thumbnails a little bit darker and just the one where the mouse hoovers should look normal. Because I use a dark background I thought I could simply asign an amount of "opacity" to the thumbs and set it different for the hoover effect.

But I can't find the line in the css where I have to put the opacity value?

  • Registered: 2012-12-13
  • Posts: 5

Re: Making Thumbs partly transparent

I reduced the problem. Now it works in Firefox and Chrome :-)

I changed the css like this:

.jb-idx-thb-list .jb-idx-thumb {
    opacity: 0.4;
    float: left;
    background-color: #000;
    position: relative;
}
.jb-idx-thb-list .jb-idx-thumb:hover {
    opacity: 1;
}

But it's not working in IE 9.0. Any suggestions?

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Making Thumbs partly transparent

Your code works fine in IE9 on my computer. (IE9 supports the CSS 'opacity' property.)
You could try using the following code:

opacity: 0.4;
filter: alpha(opacity=40);

... where the 'opacity' property will be used by modern browsers and the 'filter' property will be used by versions of Internet Explorer prior to IE9.
Also, after making any changes, try clearing your browser's cache before reloading your gallery.

4 Reply by richie2609 (edited by richie2609 2012-12-14 10:46:42)

  • Registered: 2012-12-13
  • Posts: 5

Re: Making Thumbs partly transparent

My fault. It is IE8 not IE9. Filter does not work. I also have another problem: I can't get rid of the frame around the thumbs in IE8

By the way this a link to the Test Gallery:
http://www.photographicjourney.de/Galer … index.html

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Making Thumbs partly transparent

It is IE8 not IE9. Filter does not work.

Rather than using CSS directly, you could try using the available configuration options to give the appearance of dim unselected thumbnails.
Try setting the thumbFrameColor to black with an opacity of 0.5 and make the thumbFrameWidth for unselected thumbnails cover the entire thumbnail image (by choosing a large value).

I can't get rid of the frame around the thumbs in IE8

Set:

thumbFrameWidth="0"
thumbHoverFrameWidth="0"
thumbSelectedFrameWidth="0"

... in your gallery's XML file.
If using JuiceboxBuilder-Pro to create or edit your gallery, these configuration options can be found in the 'Customize -> Thumbnails' section.

  • Registered: 2012-12-13
  • Posts: 5

Re: Making Thumbs partly transparent

Thanks.
Here are the galleries: http://www.photographicjourney.de/bilder-2/

Juicebox is really great.

  • Registered: 2012-05-02
  • Posts: 161

Re: Making Thumbs partly transparent

@richie2609:

I just took a look at your gallery. If, as a user of JB Pro myself, I may make some unsolicited comments:

- Excellent pictures.

- When you hover your mouse over a thumbnail, it gets brighter than the others, which is fine, what you've been talking about, etc. What I find a little disconcerting is that as you move among the large images -- using the navigation buttons (or just clicking) to the left or right of the large image -- there is no indication among the thumbnails which picture is being viewed. That is, the thumbnail of a given viewed large image remains dark (just like the other thumbnails), is not outlined, etc.; in most galleries, I think the viewer is used to getting a hint which thumbnail is being viewed as a large image.

Just sayin'.

Regards,

Bill P.

  • Registered: 2012-12-13
  • Posts: 5

Re: Making Thumbs partly transparent

Sorry for the late answer.

Thanks what you said about the pics.

You're right about the selected  thumb. But I have yet to figure out how to do that.

Richie

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Making Thumbs partly transparent

You're right about the selected  thumb. But I have yet to figure out how to do that.

If still using the CSS you posted above, you could add the following code to make the thumbnail corresponding to the selected image stand out.

.jb-idx-thb-list .jb-thm-thumb-selected {
    opacity: 0.8;
}
  • Registered: 2012-12-18
  • Posts: 15

Re: Making Thumbs partly transparent

Hi Steven,

I tried the following:
thumbFrameColor to black with an opacity of 0.5 and make the thumbFrameWidth for unselected thumbnails cover the entire thumbnail image (by choosing a large value)

This is not working in IE8 it turns the thumbs black except the highlighted one. In all other browsers the thumbs have the right opacity but black thumbs in IE8 is not so good.

Then I tried this:

.jb-idx-thb-list .jb-idx-thumb {
    zoom: 1;
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    float: left;
    background-color: #000;
    position: relative;
    background-image: url(images/transparant-juicebox.png);
    background-repeat: repeat;
    background-position: left top;
}
.jb-idx-thb-list .jb-idx-thumb:hover {
         zoom: 1;
     opacity: 1;
     filter: alpha(opacity=100);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.jb-idx-thb-list .jb-thm-thumb-selected {
         zoom: 1;
     opacity: 1;
         filter: alpha(opacity=100);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

This works the best yet. All browsers have an opacity overlay and IE8 shows thumbnails but fully highlighted all of them. Much better then black thumbs in IE8.

It is the best option I could find.
It would be nice if it is possible to use a transparent PNG overlay image but I don't know how to realize that.

Do you have any idea?

Thanks in advance,
Mirjam

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Making Thumbs partly transparent

@Alfred

This is not working in IE8 it turns the thumbs black except the highlighted one. In all other browsers the thumbs have the right opacity but black thumbs in IE8 is not so good.

I have logged this issue as a bug report (thumbnail frames opaque in IE8) and it should hopefully be fixed in the next version of Juicebox-Pro.
In the meantime, I am glad that you have found a suitable workaround.