CSS Image Gallery hover over image remain in gallery container

[spookymix]

I really like this image viewer:

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

but was wondering if there is a way to cause the last image you hovered over to remain in the gallery container even when your mouse isn't hovering over it? Please...if someone can help it would be much appreciated. Thanks in advance.

Mike

[azoomer]

Maybe this script has the functionality you want
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

[spookymix]

Thanks for the quick reply...but do you know any script with no j query or JavaScript? Just purely css?

[azoomer]

Not really. I guess you need javascript if you want it to consistently show the last 'mousedover' picture, otherwise you would have to rely on the z-index alone. As an alternative you can set a background picture as a default with the script you use now then that would be seen whenever you mouse out.
What is wrong with javascript anyway ?

[spookymix]

I'm just used to CSS...I find it easier to manage. But I'll give Image Thumbnail Viewer II a try. Thanks again.

Mike

[azoomer]

I think you will find it quite easy if you just follow the instructions , but post a link to your testpage online if you run into trouble.

[spookymix]

Hi azoomer. I'm playing with the thumbnail 2 gallery and really like it but I'm scratching my head on how to do a few minor adjustments. How would I:

Link each picture in the gallery and
place an image in the image container when the page is first loaded?

Thanks for all your help. I really appreciate it.

[azoomer]

Here is an example of how you can put a background image in the loadarea


<style type="text/css">
#loadarea {
background-image: url(images/backgroundimage.jpg);
background-repeat:no-repeat;
}
</style>
it works best if the images are the same size, at least the other pictures should not be smaller than the background pic.

About the link, take a look a this from the doc
<a href="myimages/first.jpg" title="This is a picture of my dog!" rel="enlargeimage" rev="targetdiv:loadarea,link:http://cnn.com">Thumbnail</a>

[spookymix]

Is it possible for the background image to disappear after I roll over a thumbnail? The reason is because the images in the container have a fade in effect and each time the picture fades in you see the background container image before the main image loads. Also, how would I link a thumbnail pic to a hyperlink?

[azoomer]

That's a good point, I'll try to see if I can come up with something

[azoomer]

Okay you can try to paste this in the head section, for example just before the </head> tag


<script type="text/javascript">
jQuery(document).ready(function($){
$('a[rel="enlargeimage"]').mouseenter(function(){
$('#loadarea').css('background-image', 'none');
});
});
</script>
It should remove the background image in the loadarea once you mouse over one the thumbnails / links. ( I am assuming you use the mouseover effect on the thumbnails and not click)

Edit:
I cannot make the thumbnails link to anything else than the large picture. The large image can have a link attached as explained in post #8.
If you on the other hand want to prevent click on the thumbnail to take visitors to the large image you could use something like this instead


<script type="text/javascript">
jQuery(document).ready(function($){
$('a[rel="enlargeimage"]').mouseenter(function(){
$('#loadarea').css('background-image', 'none');
});

$('a[rel="enlargeimage"]').click(function(){
return false;
});
});
</script>

[spookymix]

Thank azoomer. You're the best! I'll post my final result when I'm done. :)