Toggling gallery description visibility

[srijith]

Coded up a small trick to toggle a gallery's description field's visibility.

Demo - http://www.pbase.com/srijith/madurodam
HOWTO - http://pbasewiki.srijith.net/howto/toggle_description

Tested with Firefox and IE 6

[dang]

Thanks!

[olafdk]

That's great - thanks!

Here's what I'd really like: No text visible under the thumbs, until you mouse over them. I think the text is distracting and would love for my galleries to show without the titles. I know, I can just leave my photos without titles, but sometimes I want them... Similarly, the description could pop up only when mousing over the gallery header or something, but the toggle is a good step!

[yardbird]

Great work Sirjith. This will certainly help in making my travel galleries so much better.

[srijith]

Made some changes to the code (JS as well as CSS). Please use the latest code in the wiki.

[olafdk]

Here's what I'd really like: No text visible under the thumbs, until you mouse over them. I think the text is distracting and would love for my galleries to show without the titles. I know, I can just leave my photos without titles, but sometimes I want them...

I found a way to do what I wanted:

Code: Select all

td.thumbnail{
     vertical-align:middle;
     width: 200px;
     height: 200px;
     color:rgb(26,26,26)
}
td.thumbnail:hover{
     color:rgb(255,255,255)
}
img.thumbnail{
     margin-bottom:6px;
     border: rgb(0,0,0) 1px solid
}

Basically, the text is the same as the background color [in my case rgb(26,26,26)], and therefore invisible, until you mouse over (hover) a thumbnail. When this happens the td.thumbnail:hover command changes the color of the text and the text becomes temporarily visible...

The img.thumbnail command is not necessary, but I wanted a bit more space between the thumbnail-image and the text [margin-bottom: 6px] as well as a border around my thumbnails [border: rgb(0,0,0) 1 px solid]

[srijith]

I found a way to do what I wanted:

That seems to be the easiest way to do it. Anything that relies on Javascript etc, will get messy because there is no easy way to identify the exact image on which the mouse is hovering since unlike the description, the thumbnail tags are not unique.

[olafdk]

srijith wrote:

That seems to be the easiest way to do it. Anything that relies on Javascript etc, will get messy because there is no easy way to identify the exact image on which the mouse is hovering since unlike the description, the thumbnail tags are not unique.

Have a look at my newly re-styled galleries (all pages except the root-page) to see it in effect. I am pretty happy with the result myself.

Now, when I get the time, I'd like to use your toggle, but not for the description, but rather all the different text-fields under the image in image-view, or at least some of them. I don't know if it will be at all possible, but I'd like it (limit the amount of text which is distracting from the photograph on display in image-view).

[srijith]

Olaf, nice work. I personally would not use this 'trick' because as a viewer I like to be presented with all possible information than having to find it by accident. In this case, I like to have an idea what I am looking at before having to mouse-over the image. For that matter I would not even intuitively know that I need to mouse-over to get the details.

[olafdk]

The above described td.thumbnail:hover command does not seem to work in Internet Explorer. Grr... I hate IE!!! I am very happy with the 'trick' myself, I want it to work, but I have no idea how I can get it to work in IE??? I have the same problem on my image-view pages, where I've used a similar trick to hide the camera and lens info (above 'full exif') with the following code:

Code: Select all

.techinfo{
     color:rgb(26,26,26);
     font-size:8pt;
     padding: 20px
}
.techinfo a:link{
     color:rgb(26,26,26);
     font-size:8pt
}
.techinfo a:hover{
     color:rgb(255,255,255);
     font-size:8pt
}

It works like it is supposed to in Firefox and Safari, but not in IE. Example can be seen here:http://www.pbase.com/olafdk/image/57438997&exif=N

[olafdk]

Olaf, nice work. I personally would not use this 'trick' because as a viewer I like to be presented with all possible information than having to find it by accident. In this case, I like to have an idea what I am looking at before having to mouse-over the image. For that matter I would not even intuitively know that I need to mouse-over to get the details.

Srijith, thanks for looking! I understand and respect your opinion. The reasoning behind it is to minimize clutter and, to a large degree, let the photos speak for themselves. The thumbnail images themselves should provide the viewer with an idea of what they are looking at : ) I trust human curiosity. On his or her way to clicking on one of the thumbs the viewer will soon enough discover the hidden titles.

[srijith]

This trick will not work anymore due to http://forum.pbase.com/viewtopic.php?t=32005

[crespowu]

What a pity!

DVD to iPod