Image Thumbnail Viewer II Small Thumbs Open a new page?

[vlane95678]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: Sorry to post about this again. I tried the solution for opening in a pop up window and it will not work for my application.

Instead I have an easy request -- been searching for over 3 hours now. All I want to do is have the small thumbnail (in this case I have changed the small thumbnails into simple text) to open a html page instead of the enlarged version of the thumbnail.

I've followed these two threads:
http://www.dynamicdrive.com/forums/showthread.php?t=25787
http://www.dynamicdrive.com/forums/archive/index.php/t-25787.html

But the problem is that I am using a modified version of the .js file provided by one of the DD admins so those instructions don't work.

So here is my modified .js and can anyone tell me what i need to change to make this simple request?

#####################

/*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
//Unofficial update Oct 4 2010: http://www.dynamicdrive.com/forums/showpost.php?p=238611&postcount=27

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', descriptiontop:'no', hidetitle:'no'}, //default settings
buildimage:function($, $anchor, setting){
var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0" />',
title = $anchor.attr('title') || $anchor.attr('data-title') || $anchor.data('title') || '';
if (setting.link)
imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
imghtml = setting.descriptiontop === 'yes'? '<div>'+(setting.enabletitle!='no' && title? title + '<br />' : '') + imghtml + '</div>' :
'<div>'+imghtml+(setting.enabletitle!='no' && title? '<br />' + 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
})
}

}


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
}
if(s.hidetitle === 'yes'){
$anchor.data('title', this.title).removeAttr('title');
}
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)
})
})
#####################################

[jscheuer1]

Please enclose code in:



code goes here


tags so it will look like:



code goes here


Anyways, your question is unclear. I thought I had answered it here:

http://www.dynamicdrive.com/forums/showpost.php?p=244127&postcount=8

in our other thread together. If that didn't work for you, you should have responded there with/for clarification, rather than open a new thread.

But here we are. No big deal.

What exactly do you want to do and in response to what action on the user's part?

Right now I'm assuming that onmouseover of the trigger, you want the user to see the enlarged image in the loadarea, which already happens. In addition to that, you want the onclick of the trigger to load a new page in the browser, taking the user away from (replacing) the gallery page.

If so, my response in the other thread will do that. If you have something else in mind, please be more specific.

BTW, the two links in your post to other threads ("I've followed these two threads:") are for a previous version of the script.