I added a new feature to the gallery photos which is a mouseover that displays the photos technical details when you hover over an image in a CSS menu style. Let me tell you how I got it to work...
First-off since I'm using drupal I'm obviously using views, so what I did was add the content fields in views and excluded the display on each field and created a global field to piece them together in an HTML format using the fields' tokens (these fields are my camera/lens info and aperture, shutter, and ISO fields). I put them all inside a main div container and put the photo details inside it's own.
So I've got this to work with:
<div class="gallery-photo">
[field_image_fid]
<div class="photo-details">
<p>[field_camera_nid] w/ [field_lens_nid]</p>
<p>[field_focal_length_value] - [field_aperture_value]@[field_shutter_speed_value] ISO [field_iso_value]</p>
</div>
</div>
All I needed to do was set the image to be visible, and the details to be hidden unless the the user hovers over the image, and that code looks like this:
.gallery-photo img {
visibility:visible;
}
.gallery-photo {
font-size:0.75em;
line-height:12px;
visibility:hidden;
}
.photo-details {
background:#FFFFE0;
margin-top:-10px;
position:absolute;
width:148px;
border:1px solid #CCCCCC;
padding:1px;
}
.gallery-photo:hover {
visibility:visible;
}
And presto... A nice little CSS add-on. Took me a couple hours with some trial and error and tweaking so I hope it works for you as well. Now I've just got to go through the photos and add the details.
