Image Thumbnail Viewer in iframe

[Steam Roller]

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!

Edit: Moved from:
http://www.dynamicdrive.com/forums/s...924#post177924

[jscheuer1]

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
  this.centerDiv(this.thumbBox);
  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.showthumbBox();
  }
  else
   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
   this.stopanimation();
 },

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

 stopanimation : function(){
  if (typeof this.opacitytimer != 'undefined')
   clearInterval(this.opacitytimer);
 },

 closeit : function(){ //Close "thumbbox" div function
  this.stopanimation();
  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')
    thumbnailviewer.centerDiv(thumbnailviewer.thumbBox);},
    'resize');
 } //END init() function

};

thumbnailviewer.init();
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
***********************************************/

</script>

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

[Steam Roller]

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.