Image Thumbnail Viewer II - large image dimension, link on thumbnail & title format

[jamesforster]

1) Script Title:
Image Thumbnail Viewer II

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem:
Hi, i've just started using the above mentioned script, but i have got stuck on the following 3 problems. I hope someone can help me here:

I am using thumbnail images that activate the larger image on mouseover.

i)how do i set the larger image so that it takes a 100% width? I tried putting width="100%" almost everywhere, but nothing has worked for me - the large image just takes the dimensions of the actual image.

ii)When actually clicking on the thumbnail image, it links to the page where the image is actually located, ie www.domain.com/images/image1.jpg. How do i make it so that i go nowhere when i click on the thumbnail?

iii) Is there a way i can format the title which shows underneath the large image, so that i can make it bigger, change the font/color etc - can i use css in conjunction with this?

Thank you for your time!
James

[vwphillips]

.DDImage {
 width:100%;

}

	dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
	buildimage:function($, $anchor, setting){
		var imghtml='<img class="DDImage" src="'+$anchor.attr('href')+'" style="border-width:0;" />'
		if ($anchor.attr('name'))
			imghtml='<a href="'+$anchor.attr('name')+'">'+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 (this.style && this.style.removeAttribute)
				this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
		})
	}

}

<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" name="http://www.vicsjavascripts.org.uk/" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">Saturn #1</a><br />


<div id="loadarea"></div>


or


	
	
	dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
	buildimage:function($, $anchor, setting){
		var imghtml='<img class="'+$anchor.attr('class')+'" src="'+$anchor.attr('href')+'" style="border-width:0;" />'
		if ($anchor.attr('name'))
			imghtml='<a href="'+$anchor.attr('name')+'">'+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 (this.style && this.style.removeAttribute)
				this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
		})
	}

}
with


	
	
<a class="DDImage" href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" name="http://www.vicsjavascripts.org.uk/" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored"><img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" /></a><br />

[jamesforster]

Thank you so much,

unfortunately i can only work on this at weekends, hence my late reply.

I have used your code above to resolve the image resizing issue, but i don't think there's anything in the code above that resolves the clickable thumbnail problem - is there?? i don't understand it if the answer is there - i've tried adjusting the segments you highlighted red.

Could you please specify how i can get the thumbnail images not to be clickable (they are just activated by the mouse over)?

Many thanks
James

[jscheuer1]

I haven't been following the rest of this. But to prevent the click on the triggers, put this script in the head of the page after the scripts for thumbnail viewer:

<script type="text/javascript">
jQuery(function($){
	$('a[rel=enlargeimage]').click(function(e){
		e.preventDefault();
	});
});
</script>

[jamesforster]

brilliant! thank you so much