Customizing Image Thumbnail Viewer II

[palmaroca]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: The script works great. I would just like to know how to make some changes in how it works out of the box.

my site: http://paulmirocha.com/portfolio_maps.htm


If you click on the top right map thumbnail for the North Dakota map, you'll see what I mean. You'll get the main image in the right column <div#imagegallery>. Clicking on that image gives you a third image: detail enlargement . I don't like my design where the enlarged image comes up in a new page in the same window. It is a work-around. What I want is for the enlarged detail to come up in a new blank window.

Is there a way to alter the script to do that?

Thanks,

[thetestingsite]

In this function of thumbnailviewer2.js, add the highlighted part:

loadimage:function(linkobj){
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a target="_blank" href="'+dest+'">'+imageHTML+'</a>'
if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+description
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
showcontainer.style.filter=this.iefilterstring
showcontainer.filters[0].Apply()
}
showcontainer.innerHTML=imageHTML
this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
this.featureImage.onload=function(){ //When enlarged image has completely loaded
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Play()
}
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Stop()
}
},

Hope this helps.

[palmaroca]

Thanks. That works! Can I adjust the resulting new window so that it hugs the image and has no chrome etc. Just stripped down. And there's more...And then I want the window to automatically close when the viewer clicks anywhere else. I want it all.

I know there are scripts that will do this, but I don't know where the <a> element is that I can point that script to.

If ITNV2 can style the new window that would make it even more awesome than it already is.

Thanks again.

[thetestingsite]

Well, instead of using target (in the line I highlighted above), you could use onclick with a window.open function. You could search around here or the internet for more info about window.open. As for closing with when a new image is clicked, not sure about that one.

Hope this helps.

[jscheuer1]

You don't really want to be opening a new window, all modern browsers can (depending upon their settings) block that. And, getting the proper dimensions to it, unless they are the same for all of your images, would be tricky and/or tedious. Also, there is no way to truly remove all of the chrome, as security features in all modern browsers will prevent that - they require certain minimal chrome, including something that displays the address. This is to prevent phishing via spoofing another site.

Here's what I would suggest:

http://www.dynamicdrive.com/dynamici...box2/index.htm

Simply install that script on your page as instructed in Step 1 on the above page. Put the tags right before the script tag for thumbnailviewer2.js. Download the distribution files and make them available to your page. Then in the thumbnailviewer2.js file, make it like so:

imageHTML='<a href="'+dest+'" rel="lightbox" onclick="myLightbox.start(this);return false;">'+imageHTML+'</a>'

[palmaroca]

Thank you John. I like it. I will try that out.

Paul

[palmaroca]

Lightbox looks great from its demo sample. But Hmm, I tried the lightbox code, but I am missing something because I can't get it to work.

I put the downloaded lightbox files into my root directory and put the links to the lightbox css and script in my header. (BTW, can I put the Lightbox files in their own directory?)

My understanding ends when I get to the code in my <a> tags in the html. There is already a rel attribute from thumbnailviewer2 in that tag. Here's my <td> htlm:

<td><a href="resources/images/maps/cornsjourney.jpg" rel="enlargeimage::click"rev="imagegallery::resources/images/detail_pages/cornsjourney_det.htm"
title="Corn Migration Map, Hampton Brown/National Geographic Publishing <br> <b> CLICK IMAGE FOR DETAIL</b>"">
<img src="resources/thumbnails/cornsjourney_th.jpg"width="46" height="46"></a></td>

TNV2 is already using the href to place the medium sized image in my imagegallery div. How then do I apply lightbox using this medium sized image (resources/images/detail_pages/cornsjourney_det.htm) as the link for lightbox to enlarge the image detail? It's sort of like TNV2 hands off an image to Lightbox, which in turn uses that image as a link to show a third image, a higher res cropped detail from the image gallery image.

Am I being clear? My old page is at:http://paulmirocha.com/portfolio_maps.htm

[jscheuer1]

OK, it would be easier for me to find the problem if you put up a demo of your best effort at doing this with lightbox.

However, I can already tell you that your code here:

<td><a href="resources/images/maps/cornsjourney.jpg" rel="enlargeimage::click"rev="imagegallery::resources/images/detail_pages/cornsjourney_det.htm"
title="Corn Migration Map, Hampton Brown/National Geographic Publishing <br> <b> CLICK IMAGE FOR DETAIL</b>"">
<img src="resources/thumbnails/cornsjourney_th.jpg"width="46" height="46"></a></td>

should be fine as is. I would have a space here (highlighted and represented as an underscore):

rel="enlargeimage::click"_rev="imagegallery::resou . . .

But that probably isn't critical.

From what you are saying, the problem is probably from not actually making the lightbox resource files available to your page and/or failing to make the modification I outlined to the thumbnailviewer2.js file. Probably the lightbox files availability.

Like, if you have on your page:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

You should have a folder with your page in it that has three folders off of it:

css
images
js

The lightbox.css file should be in the css folder, the lightbox support images should be in the images folder, and all of the lightbox many scripts should be in the js folder. In other words, just like in the distribution archive. Your images can stay where they are.

[palmaroca]

I put a demo site up at: http://paulmirocha.com/testing/portfolio_maps.htm

Please do not look at the rest of the site, as it will not function properly. Just look at portfolio_maps.htm, and the two image thumnails on teh very bottom--6th row of the thumbnail table: a map of corn distribution and a diagram of an oil spill. These are the test images. I have tried everything you suggested, and checked it twice, but can't find the missing link. The enlarged images still just come up in the parent window and you have to use trh back button to get back to the main page.

The other thumbnails on that page will work as I originally designed them: not using lightbox.

Any suggestions?

Thanks a lot.

[jscheuer1]

There could be other problems, but the files:

prototype.js
effects.js
scriptaculous.js

are not where they should be. These actual files should be in the js folder along with lightbox.js. They came with the distribution archive, use them.

I see another problem, you should be using v2.03a:

http://www.dynamicdrive.com/dynamici...box2/index.htm

It is the most up to date for this purpose (2.04 is out, but it isn't as well suited to all you might want to do with this, though it can be adapted, it won't work 'as is' like 2.03a will with your current setup).

So replace lightbox.js with the file in the 2.03a distribution, and use the other three scripts in the same folder with it. Make folders for and use the updated css and support images that come in the distribution archive.

Everything else looks in order.