PDA

View Full Version : Modify 'Image Thumbnail Viewer II'



FrankieL
02-06-2012, 12:47 PM
Re: http://www.dynamicdrive.com/dynamicindex4/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.

vwphillips
02-06-2012, 01:43 PM
modify the line in red


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


<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 />

FrankieL
02-06-2012, 05:17 PM
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?

vwphillips
02-07-2012, 11:02 AM
<!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:

FrankieL
02-07-2012, 09:43 PM
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.

vwphillips
02-08-2012, 12:42 PM
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