Thumbnailviewer2: create additional command to set caption in specific div : Revision

[doriggidy]

1) Script Title: Thumbnailviewer2

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

3) Describe problem: I would like to create an additional command which tells each thumbnail to send a caption to a specific div id on mouseover. It would be similar to what the script is doing already: sending a command from each thumbnail to a larger image on mouseover, except it would be for text, and it would be in addition to this command. I know the script allows for a "title" to be inputted, but it only lets you display it under the image, and it can't really be styled. A friend of mine has a hunch that what needs to be done is find a javascript function that sets an element based on its id? Help!


http://www.dynamicdrive.com/forums/s...ad.php?t=50898

This was originally addressed in this thread but I was instructed to start a new thread.

It seems as if the solution is no longer applicable as the code seems to have changed since the solution was posted. Is that so? If so how could this be done with the newer code? Or am I just missing something?

[bernie1227]

here is amodified version of thumbnailviewer2.js:

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

//Last updated: Sept 26th, 2010: http://www.dynamicdrive.com/forums/showthread.php?t=57892

jQuery.noConflict()

jQuery.thumbnailviewer2={
		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 (setting.link)
			imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
		imghtml='<div id="title" style="font-size: 2em;">'+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+imghtml+'</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
		})
	}
	
}


jQuery.fn.addthumbnailviewer2=function(options){
	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()
			hiddenimage.src=this.href
		}
		var $loadarea=$('#'+s.targetdiv)
		var $hiddenimagediv=$('<div />').css({position:'absolute',visibility:'hidden',left:-10000,top:-10000}).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 ($loadarea.data('$curanchor')==$anchor) //if mouse moves over same element again
				return false
			$loadarea.data('$curanchor', $anchor)
			if ($loadarea.data('$queueimage')){ //if a large image is in the queue to be shown
				$loadarea.data('$queueimage').unbind('load') //stop it first before showing current image
			}
			$loadarea.html($.thumbnailviewer2.loadmsg)
			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)
				})
			$loadarea.data('$queueimage', $hiddenimage) //remember currently loading image as image being queued to load
			}

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

jQuery(document).ready(function($){
	var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
	$anchors.each(function(i){
		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"
			options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
		}
		$(this).addthumbnailviewer2(options)
	})
})

the part in red is the part that has been edited, and you can apply css styles to the div class or change the inline styles I have made.

[doriggidy]

Thank you very much.