thumbnail default


Hi guys
I have a cool java script that display zoomed picture when mouse over, my only problem is that I want the first picture to be zoomed when loadind page, I mean before mouse over on first picture, here is my php and java script: “picture1 is my first picture”

echo " ";


and this is my java script:

/*Image Thumbnail Viewer II (May 19th, 2010)
* This notice must stay intact for usage 
* Author: Dynamic Drive at
* Visit for full source code

//Last updated: Sept 26th, 2010:


		loadmsg: '<img src="spinningred.gif" /><br />Loading Large Image...', //HTML for loading message. Make sure image paths are correct

	/////NO NEED TO EDIT BEYOND HERE////////////////

	dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
	buildimage:function($, $anchor, setting){
		var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0" />'
		if (
			imghtml='<a href="''">'+imghtml+'</a>'
		imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
		return $(imghtml)

	showimage:function($image, setting){
		$image.stop()[setting.fxfunc](setting.fxduration, function(){
			if ( &&'filter') //fix IE clearType problem when animation is fade-in

	var $=jQuery

	return this.each(function(){ //return jQuery obj
		if (this.tagName!="A")
			return true //skip to next matched element

		var $anchor=$(this)
		var s=$.extend({}, $.thumbnailviewer2.dsetting, options) //merge user options with defaults
		s.fxfunc=(s.fx=="fade")? "fadeIn" : "show"
		s.fxduration=(s.fx=="none")? 0 : parseInt(s.fxduration)
		if (s.preload=="yes"){
			var hiddenimage=new Image()
		var $loadarea=$('#'+s.targetdiv)
		var $hiddenimagediv=$('<div />').css({position:'absolute',visibility:'hidden',left:-5000,top:-5000}).appendTo(document.body) //hidden div to load enlarged image in
		var triggerevt=s.trigger+'.thumbevt' //"click" or "mouseover"
		$anchor.unbind(triggerevt).bind(triggerevt, function(){
			if ($'$curanchor')==$anchor) //if mouse moves over same element again
				return false
			$'$curanchor', $anchor)
			if ($'$queueimage')){ //if a large image is in the queue to be shown
				$'$queueimage').unbind('load') //stop it first before showing current image
			var $hiddenimage=$hiddenimagediv.find('img')
			if ($hiddenimage.length==0){ //if this is the first time moving over or clicking on the anchor link
				var $hiddenimage=$('<img src="'+this.href+'" />').appendTo($hiddenimagediv) //populate hidden div with enlarged image
				$hiddenimage.bind('loadevt', function(e){ //when enlarged image has fully loaded
					var $targetimage=$.thumbnailviewer2.buildimage($, $anchor, s).hide() //create/reference actual enlarged image
					$loadarea.empty().append($targetimage) //show enlarged image
					$.thumbnailviewer2.showimage($targetimage, s)
			$'$queueimage', $hiddenimage) //remember currently loading image as image being queued to load

			if ($hiddenimage.get(0).complete)
				$hiddenimage.bind('load', function(){$hiddenimage.trigger('loadevt')})
			return false

	var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
		var options={}
		var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
		for (var i=0; i<rawopts.length; i++){
			var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"

normaly java script must be repaired
Demo here:
thanks a lot for help !