PDA

View Full Version : Modifying "Image Thumbnail Viewer II"



alokw
04-20-2007, 02:48 PM
1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:
I'd like to do two things that I'm not sure how to do.

1. I'd like the "title" to appear somewhere other than immediately below the picture. Ideally, I'd like to define the position of the title in the same way that the position of the enlarged photo is defined. For example, when the thumbnail is hovered over, the "title" of the image appears somewhere far far away from the enlarged image, not directly under the enlarged photo. OR - If the title could "float" right on top of the enlarged image, that would be pretty awesome.

2. I'd like to pop-up another window when a thumbnail is clicked on. For example, when I hover on the first thumbnail, picture1.jpg should enlarge as normal, but when I click on the first thumbail, picture1.html should popup in a new window.

Any ideas how I might go about doing this?

Thanks!

ddadmin
04-21-2007, 01:26 PM
Sure, both requests are pretty easy to implement. Firstly, use the attached thumnailviewer2.js file instead of the original one. Then, where as before you would define just a single DIV to house the enlarged images, for example:


<div id="loadarea" style="width: 600px"></div>

Now, add to that another DIV on your page in the form:


<div id="loadarea-title" style="width: 600px"></div>

In order words, suffix the original DIV id with "-title". This DIV will be used to display the title of the image.

Regarding the popup window bit, this is controlled by this line inside the .js file:


window.open(this.href, "", "width=500px, height=500px")

You may want to edit the window attributes based on what's available (see bottom of this page (http://www.javascriptkit.com/jsref/window.shtml)).