Results 1 to 6 of 6

Thread: Modify 'Image Thumbnail Viewer II'

  1. #1
    Join Date
    Feb 2012
    Location
    London
    Posts
    24
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Default Modify 'Image Thumbnail Viewer II'

    Re: http://www.dynamicdrive.com/dynamici...thumbnail2.htm
    I would like to modify 'Image Thumbnail Viewer II' so that part of the text that appears with the large image is hyperlinked (to an external site). The feature uses - title="text go here" for text to show below image. Is it possible to add the hyperlinked text here?

    If not, I have tried using - rev="targetdiv:loadarea,descid:moretext" and so creating the div "moretext" below the "loadarea" div. But the problem is that I want different text to show with each image, and I don't know how to do that.

    Will be most grateful for any help.
    Last edited by FrankieL; 02-08-2012 at 09:10 AM. Reason: Read request for link to page so people know what Q refers to.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    modify the line in red

    Code:
    	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>'+imghtml+((setting.enabletitle!='no' && ($anchor.attr('title')!=''||setting.caption))? '<br /><a '+(setting.link?'href="'+setting.link+'" ':'')+'>'+(setting.caption||$anchor.attr('title')) : '')+'</a></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
    		})
    	}
    
    }
    and add the new option in red

    Code:
    <a href="http://www.nasa.gov/images/content/166615main_image_feature_733_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none,fx:reveal,link:http://www.dynamicdrive.com/dynamicindex17/sofagirl.jpg" title="The Universe is just waiting to be explored" >Saturn #2 (click)</a><br />
    Last edited by vwphillips; 02-06-2012 at 04:52 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    FrankieL (02-10-2012)

  4. #3
    Join Date
    Feb 2012
    Location
    London
    Posts
    24
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Default

    Thank you for your reply. That does make the text 'link'. Great.
    Would it be possible to have two lines of text - one line that links and that doesn't link?

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" >
    
    /***********************************************
    * Image Thumbnail Viewer II script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    /*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>'+imghtml+((setting.enabletitle!='no' && ($anchor.attr('title')!=''||setting.caption))? '<br /><a '+(setting.captionlink?'href="'+setting.captionlink+'" ':'')+'>'+(setting.caption||$anchor.attr('title')) : '')+'</a></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
    		})
    	})
    }
    // Modified Function
    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 index,i=0; i<rawopts.length; i++){
                index=rawopts[i].indexOf(':')
                            if (index>2){
    		 	 options[rawopts[i].substring(0,index)]=rawopts[i].substring(index+1);
                            }
    		}
    		$(this).addthumbnailviewer2(options)
    	})
    })
    
    </script>
    
    </head>
    
    <body>
    <a href="http://www.nasa.gov/images/content/166615main_image_feature_733_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none,fx:reveal,caption:<a href=http://www.nasa.gov/images/content/166615main_image_feature_733_ys_4.jpg >Line 1</a><br />Line 2">Saturn #2 (click)</a><br />
    
    <div id="loadarea2"></div>
    
    </body>
    
    </html>
    in my previous post I used option link: for the caption link
    This option is used for the image link so the the caption link option is now captionlink:
    Last edited by vwphillips; 02-11-2012 at 10:39 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. The Following User Says Thank You to vwphillips For This Useful Post:

    FrankieL (02-10-2012)

  7. #5
    Join Date
    Feb 2012
    Location
    London
    Posts
    24
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Default

    That's marvellous! Thank you for your help.

    I have another question if you don't mind. Would it be possible to change the way the image appears? It seems to scroll and jigger down and accross in two stages. Would it be possible to make the image appear more smoothly in one go like on this site (but not 'onmousover')? -
    http://whitecube.com/artists/

    Thank you again for your help.

  8. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    that would require a completely new script

    I could make one for you
    but should be posed on the 'Looking for such a script or service' forum
    and you will need to specify what options you require
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. The Following User Says Thank You to vwphillips For This Useful Post:

    FrankieL (02-10-2012)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •