Log in

View Full Version : image thumbnail viewer 2 : add target="_blank" to link ?


zelda_pinwheel
04-23-2007, 12:37 AM
1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:
Hello,
first of all thanks for your brilliant scripts and forums, as a designer with no javascript skills i really love them.

My question is this : is there any way to modify the script so that the link (to an external site) on the large image will open in a new window ? also, is there a way to add an extra line of text to the description shown beneath the image, like "visit the site", which could be linked (with the target="_blank") ? since the text is inside the title attribute adding the link code caused problems....

Another (less important) question, is there a way to AVOID showing the tooltip when you hover over the original link ? since the text is rather long (and includes br tags...) in this particular case it's not very elegant...

possibly there is a different script (or even a css solution) that would be better adapted ? This one seems really to be what i want but all suggestions are welcome...

the (totally not finished yet) page using the code, so you can see what i mean :
http://audrey.keszek.free.fr/__NEWSITE/refs.htm

thanks in advance for any help you can provide ! I really appreciate it. I hope this question hasn't already been answered, there was a strange bug on the search function earlier and i couldn't get past the first page of results (i tried though, really !)...

Cheers

PS I have used this script before (here :
http://cielunatic.free.fr/index2.htm then click on "images") and i really like the result, so maximum respect to all of you dev geniuses and thanks again for sharing the javascript love...
jscheuer1
04-23-2007, 05:50 AM
You can set the base target on the page to _new but, then you need to set the target on any other links on the page that you wish to have open in the same window as _self, ex:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base target="_new">

You could instead set the target="_new" in the thumbnailviewer2.js script (addition red):


imageHTML='<a target="_new" href="'+dest+'">'+imageHTML+'</a>'

You can use a link in the title attribute:


title="This is an <a href='http://www.dynamicdrive.com' target='_new'>example</a>"

To get rid of the tool tip, put this code as the last thing on your page right before the </body> tag:


<script type="text/javascript">
(function(){
if(document.body.getAttribute)
for (var i = 0, l=document.links; i < l.length; i++)
if(/enlargeimage/.test(l[i].getAttribute('rel'))){
l[i].caption=l[i].getAttribute('title');
l[i].removeAttribute('title');
}
})();
</script>

And, change this line in thumbnailviewer2.js:


var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr

to:


var description=(thumbnailviewer2.enableTitle && linkobj.caption)? linkobj.caption : "" //Get title attr
zelda_pinwheel
04-23-2007, 11:08 AM
Hello,
I set the target="_new" in the thumbview code and it works brilliantly, thanks so much !! the links in the description text also (i think it didn't work when i tried it the first time because i used " instead of ' around the extra code ; i didn't know about that).

But, when I added / modified the code to get rid of the tooltip, a strange problem :
the tooltip continues to appear when I hover over the text link, but when I click, there is no more text under the enlarged image ! this is the opposite of what I wanted to achieve in fact, sorry if i was unclear !
Is there any way to *keep* the text description under the enlarged image, but NOT show the tooltip over the text menu on the left ? if this is not possible it's not the end of the world, only i would prefer it to avoid the rather ungainly tooltips...

I put the modified pages on line so you can see what i mean (same address as above).

thanks again for your help !
jscheuer1
04-23-2007, 01:31 PM
This:


<script type="text/javascript">
(function(){
if(document.body.getAttribute)
for (var i = 0, l=document.links; i < l.length; i++)
if(/enlargeimage/.test(l[i].getAttribute('rel'))){
l[i].caption=l[i].getAttribute('title');
l[i].removeAttribute('title');
}
})();
</script>

belongs at the end of the page:


<script type="text/javascript">
(function(){
if(document.body.getAttribute)
for (var i = 0, l=document.links; i < l.length; i++)
if(/enlargeimage/.test(l[i].getAttribute('rel'))){
l[i].caption=l[i].getAttribute('title');
l[i].removeAttribute('title');
}
})();
</script>
</body>
</html>
zelda_pinwheel
04-23-2007, 02:07 PM
oh sheesh, what a novice... i didn't even notice it was a closing tag. that will teach me to stare at code until 2 am...

but now it works perfectly !

thanks !