Image Thumbnail Viewer II image already there on load

[SilverFalls]

I have a quick question about this script: http://www.dynamicdrive.com/dynamici...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]

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]

Thank you! That's exactly what I needed.

[loxy]

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]

Then:

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

would work as well.