View Full Version : Image Thumbnail Viewer in iframe

Steam Roller
02-10-2009, 07:17 PM
I am wondering if there is any way of using this script inside an iframe where the thumbnails are located, but have the larger images displayed outside/on top of the iframe?

Any help or suggestions would be be greatly appreciated!

Moved from:

02-11-2009, 05:30 AM
Generally you should post questions asking for help in the help section here where I've moved this.

Anyways, this script will work for that, if there is just one page with an iframe, and inside that is the gallery. Link this script to both pages (save in a plain text editor like NotePad and call it thumbnailviewer.js):

// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: February 1st, 2009 - add iframe support
// -------------------------------------------------------------------

var thumbnailviewer = {
enableTitle : true, //Should "title" attribute of link be used as description?
enableAnimation : true, //Enable fading animation?
definefooter : '<div class="footerbar">Close X</div>', //Define HTML for footer interface
defineLoading : '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div

///////////// No Need to Edit Beyond Here /////////////

scrollbarwidth : 16,
opacitystring : 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',

createthumbBox : function(){ // write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>' + this.definefooter + '</div>')
document.write('<div id="thumbLoading">' + this.defineLoading + '</div>')
this.thumbBox = parent.document.getElementById('thumbBox');
this.thumbImage = parent.document.getElementById('thumbImage'); //Reference div that holds the shown image
this.thumbLoading = parent.document.getElementById('thumbLoading'); //Reference "loading" div that will be shown while image is fetched
this.standardbody = (parent.document.compatMode == 'CSS1Compat')? parent.document.documentElement : parent.document.body; //create reference to common "body" across doctypes

centerDiv : function(divobj){ //Centers a div element on the page
var ie = document.all && !window.opera, dom = document.getElementById,
scroll_top = ie? this.standardbody.scrollTop : parent.window.pageYOffset,
scroll_left = ie? this.standardbody.scrollLeft : parent.window.pageXOffset,
docwidth = ie? this.standardbody.clientWidth : parent.window.innerWidth - this.scrollbarwidth,
docheight = ie? this.standardbody.clientHeight: parent.window.innerHeight,
docheightcomplete = this.standardbody.offsetHeight > this.standardbody.scrollHeight?
this.standardbody.offsetHeight : this.standardbody.scrollHeight, //Full scroll height of document
objwidth = divobj.offsetWidth, //width of div element
objheight = divobj.offsetHeight, //height of div element
//Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
topposition = docheight>objheight? scroll_top + docheight / 2 - objheight / 2 + 'px' : scroll_top + 10 + 'px';
divobj.style.left = docwidth / 2 - objwidth / 2 + 'px'; //Center div element horizontally
divobj.style.top = Math.floor(parseInt(topposition)) + 'px';
divobj.style.visibility = 'visible';

showthumbBox : function(){ //Show ThumbBox div
thumbnailviewer.thumbLoading.style.visibility = 'hidden'; //Hide "loading" div
if (this.enableAnimation){ //If fading animation enabled
this.currentopacity = 0.1; //Starting opacity value
this.opacitytimer = setInterval(function(){thumbnailviewer.opacityanimation();}, 20);

loadimage : function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility == 'visible') //if thumbox is visible on the page already
this.closeit(); //Hide it first (not doing so causes triggers some positioning bug in Firefox
var imageHTML = '<img src="' + link.getAttribute('href') + '" style="' + this.opacitystring + '" />'; //Construct HTML for shown image
if (this.enableTitle && link.getAttribute('title')) //Use title attr of the link as description?
imageHTML += '<br />' + link.getAttribute('title')
this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
this.thumbImage.innerHTML = imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
this.featureImage = this.thumbImage.getElementsByTagName('img')[0]; //Reference shown image itself
if (this.featureImage.complete){
this.thumbImage.style.width = this.featureImage.width + 'px';
this.featureImage.onload = function(){ //When target image has completely loaded
thumbnailviewer.thumbImage.style.width = thumbnailviewer.featureImage.width + 'px';
thumbnailviewer.showthumbBox(); //Display "thumbbox" div to the world!
if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
this.featureImage.src = link.getAttribute('href');
this.featureImage.onerror = function(){ //If an error has occurred while loading the image to show
thumbnailviewer.thumbLoading.style.visibility = 'hidden'; //Hide "loading" div, game over

setimgopacity : function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between)
var targetobject = this.featureImage;
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity == 'number') //IE6
targetobject.filters[0].opacity = value * 100;
else //IE 5.5
targetobject.style.filter = 'alpha(opacity=' + value * 100 + ')';
else if (typeof targetobject.style.MozOpacity != 'undefined') //Old Mozilla syntax
targetobject.style.MozOpacity = value;
else if (typeof targetobject.style.opacity != 'undefined') //Standard opacity syntax
targetobject.style.opacity = value;
else //Non of the above, stop opacity animation

opacityanimation : function(){ //Gradually increase opacity function
this.currentopacity += 0.1;
if (this.currentopacity > 1)

stopanimation : function(){
if (typeof this.opacitytimer != 'undefined')

closeit : function(){ //Close "thumbbox" div function
this.thumbBox.style.visibility = 'hidden';
this.thumbImage.innerHTML = '';
this.thumbBox.style.left = '-2000px';
this.thumbBox.style.top = '-2000px';

dotask : function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
tasktype = window.addEventListener? tasktype : 'on' + tasktype;
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent(tasktype, functionref);

init : function(){ //Initialize thumbnail viewer script by listening to the page for clicks on links with rel="thumbnail"
if (!this.enableAnimation)
this.opacitystring = '';
var pagelinks = function(e){
var t; e = e || window.event; t = e.target || e.srcElement;
while(t.parentNode && t.nodeName && t.nodeName.toLowerCase() != 'a')
t = t.parentNode;
if (t.nodeName && t.nodeName.toLowerCase() == 'a' && t.rel && t.rel == 'thumbnail'){ //Begin if statement
if (e.preventDefault) e.preventDefault();
thumbnailviewer.stopanimation(); //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(t); //Load image
return false;
} //end if statement
return undefined;
this.dotask(document, pagelinks, 'click');
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){
if (thumbnailviewer.thumbBox.style.visibility=='visible')
} //END init() function


thumbnailviewer.createthumbBox(); //Output HTML for the image thumbnail viewer

Make sure to include the credit in the link, and also use the stylesheet from the original script ( http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm ). So, in the head of both pages, put:

<link rel="stylesheet" href="thumbnailviewer.css" type="text/css">
<script src="thumbnailviewer.js" type="text/javascript">

* Image Thumbnail Viewer Script- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code


Setup your thumbnails in the body of the page in the iframe in the usual manner as described on the demo page.

Steam Roller
02-11-2009, 01:55 PM
I appologize for posting in the wrong area. All future posts will be posted in the Help section.

And thanks SO much for a quick reply! I followed your instructions and everything is now working great.