PDA

View Full Version : Image Thumbnail Viewer II image already there on load



SilverFalls
02-04-2013, 02:29 AM
I have a quick question about this script: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

I got it working, and made it so the div already displays an image when the page loads, but I want to make it, more specifically, that one of the thumbnails is already triggered. Currently if I scroll over the thumbnail for the image that's preloaded, the fade effect kicks in, making the image flicker. It's a minor aesthetic thing, but I looked in the .js file and was wondering if there is a way to make the page load with a specific thumbnail already anchored.

It's not the end of the world if not, but it would make it look more polished, and I want to learn javascript anyhow :)

Thanks!

jscheuer1
02-04-2013, 06:40 AM
You can put this script in the head, after the scripts for the viewer:


<script type="text/javascript">
jQuery(function($){
$('[rel=enlargeimage]').eq(0).trigger('mouseover');
});
</script>

You may want to preload the image though, if so use this instead:


<script type="text/javascript">
jQuery(function($){
var $first = $('[rel=enlargeimage]').eq(0);
$(new Image()).load(function(){
$first.trigger('mouseover');
}).attr('src', $first.attr('href'));
});
</script>

SilverFalls
02-04-2013, 01:25 PM
Thank you! That's exactly what I needed.

loxy
09-13-2013, 07:03 PM
I just want to share a tweak that I used when I had multiple galleries on a page. In this case the code above only pre-loads the first image in the first gallery.

So, what I did was to add an attribute
class="defaultimage" to the link in each gallery that I wanted as the default image. Then in the head of the page, just under the gallery script, I added:


<script type="text/javascript">
jQuery(function($){
$('a[class=defaultimage]').trigger('click');
});
</script>

jscheuer1
09-13-2013, 07:09 PM
Then:


<script type="text/javascript">
jQuery(function($){
$('a.defaultimage').trigger('click');
});
</script>

would work as well.