View Full Version : CSS image gallery problem

09-20-2013, 09:11 PM
1) Script Title: CSS Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

3) Describe problem:
This great script is used quite successfully on our Scout website but I've encountered a slight problem when there are lots of images in the gallery (30+).
As you scroll down the page to get to the lower thumbnails, the larger picture starts to fall off the top of the screen. This is exaggerated more on low resolution screens (e.g. tablets).

Is it possible to wrap the thumbnails in a div box with scrollbars so the user does not have to scroll down the page to reach lower thumbs?
And please treat me with kid-gloves. I'm not a CSS expert.

Kind thanks

09-21-2013, 05:10 AM
Perhaps, but since the large image is a child of the thumbnail, it would also appear within that scrollable div, so the same thing would happen within that scrollable div.

There are at least two css only options, and one could always opt for a javascript solution, more on that later if you're interested in going that route. The two css options that spring to mind are:

1.) Create groups of thumbnail larger images by assigning a different class, like group1, group2, and so on for each span in a group. have only 4 or 5 thumbnails' spans in each group. Like group1 could look like so:

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span class="group1"><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span class="group1"><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span class="group1"><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a>

<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span class="group1"><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>

Group2 would be the same, only different images, and each of their spans would have class="group2" instead of group1. And so on fro group 3, 4, however many that you need.

Then for this last part of the css, leave out the top property (remove the highlighted):

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;

Then for each group, have a different value:

.thumbnail:hover span.group1{ /*CSS for enlarged images in group1*/
top: 0;

.thumbnail:hover span.group2{ /*CSS for enlarged images in group2*/
top: 235px;

.thumbnail:hover span.group3{ /*CSS for enlarged images in group3*/
top: 470px;

and so on. These values would increment at about the average height of a larger image, or at whatever amount seems to work best with the layout.

2.) Another, perhaps simpler solution would be to use position: fixed; here:

.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;

And adjust the horizontal for the hover like so (the top may need to be increased as well - say to 150px, whatever gets it in the right position relative to the top of the window):

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: auto;
right: 0px; /*position where enlarged image should offset horizontally */
z-index: 50;

which would align it with the right edge of the browser window. To make it a little farther left, just increase the right coordinate.

Or you can do like:

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 330px; /*position where enlarged image should offset horizontally */
z-index: 50;

simply increasing the left coordinate. With position fixed, the left coordinate is now from the browser's left edge, not the the left edge of the gallery container div. These might be the same though, if they are, no change is required.

Use only method 1 or method 2, they should not be combined.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.