Thumbnail/Enlarge Display viewer for Video Selection

[generaldrpepper]

Hey folks, I'm wondering if you wouldn't be able to at least push me in the right direction to solve this issue.

What I'm trying to do is have the thumbnails as buttons for video links that display a larger image when you hover your mouse over them, but that when you click either the larger image or the thumbnail you are taken to a new page, rather than opening up the larger image.

The following DD script does everything I need it to do, outside of the thumbnail being able to link to the new page:

Script: DD Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

I've tried to tweak it with hasn't been able to work and I suspect it's simply because it goes against the function of this script. Which is why I did not post in the DD Scripts thread, as I am expecting I'll need something else to do it.

Any ideas? Thanks in advance for your help.

[jscheuer1]

Not so different as you think. Add this to the head of your page after the external tag for the thumbnailviewer2.js script:


<script type="text/javascript">
jQuery(function($){
$('a[rel=enlargeimage]').click(function(e){
var opts = {}, rev = this.rev.split(','), re = /:(?!\/\/)/;
for (var i = rev.length - 1; i > -1; --i){
rev[i] = rev[i].split(re);
opts[$.trim(rev[i][0])] = $.trim(rev[i][1]);
}
if(opts.link){
e.preventDefault();
location.href = opts.link;
}
});
});
</script>

Then, if you have a page configured to load onclick of the larger image, it will also be what loads onclick of the thumbnail image.

[generaldrpepper]

Ah, brilliant! Thank you so much, I'd been pounding my head against the wall on this for hours. It works great!

[jscheuer1]

Here's a slightly more efficient version (does the same thing):


<script type="text/javascript">
jQuery(function($){
var re = /:(?!\/\/)/;
$('a[rel=enlargeimage]').click(function(e){
var opts = {}, rev = this.rev.split(','), i = rev.length - 1;
for (i; i > -1; --i){
rev[i] = rev[i].split(re);
opts[$.trim(rev[i][0])] = $.trim(rev[i][1]);
if(opts.link){
e.preventDefault();
location.href = opts.link;
return;
}
}
});
});
</script>