Can Image Thumbnail viewer be altered to open an iframe?

[jimdaug]

1) Script Title: Image Thumbnail Viewer

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

3) Describe problem:
Hi, great script. I am currently using it with cmotion for my portfolio site, here http://www.jimdaug.com/gallery.html. I wouldn't call myself a great programmer, but I seem to know enough to understand the scripts involved. I would like to alter the thumbnail script to display videos in .mov and .wmv format on a different gallery page. My first idea was to alter the part that generates the html for the image source and change it to an iframe.

instead of this:

var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />'

this:

var imageHTML='<iframe src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" > </iframe>'

using this as the link in the body:
<a href="movs/swat2.mov" rel="thumbnail"> <img src="images/thumbnails/BW/swatWire.jpg" name="swatWire" id="swatWire" /><br></a>


but it doesn't work. The loading .gif comes up, but then the browser just goes to the file like I had clicked on a normal link. same with an html as the href. There is obviously more going on than I understand. This seems pretty simple and I understand 90% of the code. There must be something simple that I am missing. Thanks for any help you can provide. Link to test page http://www.jimdaug.com/vidGalleryTest.html

[ddadmin]

Hmm that definitely won't work. Getting this script to load IFRAME content would require some rather extensive modifications. Right now the closest thing I can think of on DD for this would be DHTML window widget (http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/) actually, namely, the IFRAME option.

[jimdaug]

The DHTML window widget isn't exactly what I had in mind, but thank you for the reply.

If I understand the script, It's basically using the rel="thumbnail" attribute to differentiate those anchors from others that would be on the page, then writes out a div and puts the image source inside it.

What is preventing me from putting something else in that div besides an image?

EDIT starts here...

So after racking my brain for a while I figured out how to do it. And it was quite simple. I modified the html link in the body to look like so

<a href="images/jpegs/swat.jpg" rel="thumbnail" attr="movs/swat2.mov">
<img src="images/thumbnails/BW/swat.jpg" name="swat" id="swat" />
</a>


Then changed the loadimage:function in the thumnailViewer.js file to this

var imageHTML='<img src="'+link.getAttribute("href")+'" width="0" style="'+this.opacitystring+'" />' //Construct HTML for shown image
imageHTML+='<iframe src="'+link.getAttribute("attr")+'" width="640" height="495"> </iframe>'


The only caveat currently is the size of the iframe has to be coded into the javascript file. With a little more time, I should be able to size it dynamically.

I'm open for suggestions too. If there is a better way to do it please let me know.

[jscheuer1]

You might like to look here:

http://home.comcast.net/~jscheuer1/side/mybox/

first introduced here:

http://www.dynamicdrive.com/forums/showthread.php?t=22703