Log in

View Full Version : Thumbnail Viewer and Iframes


shellewis
05-16-2008, 07:32 PM
Hello to all! I am new, a little special and very aware of it. my question is this:

How can I use the Thumbnail viewer to display an Iframe w/scrollbar on mouseover and then have the iframe replaced when I mouseover the next thumbnail to display an image?

Here is a link to a sample of the page I am building:

http://www.myfancyphoto.com/dragonfly%20web/menu2.html


Here is the code I have attempted to modify:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0011)about:blank -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified here to accept external text file as well as images
* Modified for optional captions, read all comments in top
* of script and in HTML code below.
* Modifications © John Davenport Scheuer - jscheuer1TAKETHISOUTTOUSEEMAIL@comcast.net
***********************************************/
/*
IMPORTANT NOTE - In most cases specifying only a small external file for display
will yield the best results - IMPORTANT NOTE
Specify image/text file paths and optional link (set link to "" for no link)
set third parameter to "i" for image file, "t" for text file: */
var dynimages=new Array()
dynimages[0]=["test.html","", ]
dynimages[1]=["news.html", "", "t"]
dynimages[2]=["photo3.jpg", "http://www.google.com", "i"]
dynimages[3]=["ext.htm", "http://www.google.com", "t"]

//Set scrolling for text content if text content used("yes" or "no"):
var scrolltext="yes"

//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
if (dynimages[x][2]=='i'){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
if (theimg[2]=="i")
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[2]=="t"){
scrollHeight=(document.getElementByID)?document.getElementById('dynloadarea').style.height:document.all('dynloadarea').style.height
scrollWidth=(document.getElementByID)?document.getElementById('dynloadarea').style.width:document.all('dynloadarea').style.width
imghtml+='<iframe src="'+theimg[0]+'" frameborder="'+imgborderwidth+'" height="'+scrollHeight+'" width="'+scrollWidth+'" scrolling="'+scrolltext+'"></iframe>'
}
//if (theimg[2]=="t")
//imghtml+='<iframe src="'+theimg[0]+'" frameborder="'+imgborderwidth+'" height="'+document.getElementById("dynloadarea").style.height+'" scrolling="'+scrolltext+'"></iframe>'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
//get_cap('');
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
//var frameheight=imgobj.style.height
//alert(frameheight)
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

//function get_cap(cap){
//if (document.getElementById){
//document.getElementById('caploadarea').innerHTML=cap;}
//else if (document.all){
//document.all('caploadarea').innerHTML=cap;}
//else{
//return;}
//}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #DEBEDE;
}
-->
</style></head>

<body>
<table width="900" height="590" border="0" align="center" cellpadding="0" cellspacing="0" background="images/menubasepage.jpg">
<tr>
<td><table width="900" height="592" border="0" cellpadding="0" cellspacing="0" background="spacer.gif">
<tr>
<td width="900"><table width="900" height="590" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="56" colspan="3"><img src="images/navbar.jpg" width="900" height="56" border="0" usemap="#Map" /></td>
</tr>
<tr>
<td width="306" align="center">&nbsp;</td>
<td width="276" align="center">
<p>
<!--Configure your links below, notice that if you add ;get_cap(this.name); to the onMouseover event
and a name to the anchor tag, you will get a caption -->
<a href="#" onMouseover="modifyimage('dynloadarea', 0);"><img src="images\menubobatea.jpg" width=261px height=44px border=0 alt="" title=""></a><br><a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img src="images\menublendedspecialties.jpg" width=261px height=53px border=0 alt="" title=""></a><br>&nbsp;<br>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img src=thumb3.jpg width=50px height=50px border=0 alt="" title=""></a><br>&nbsp;<br>
<a href="#" name="Above is Some Text Content" onMouseover="modifyimage('dynloadarea', 3);get_cap(this.name);">Text Content</a><p>
<!--Configure size of display areas below -->
<!--<div id="dynloadarea" style="width:140px;height:225px"></div>
<hr align=left width=140>
<div id="caploadarea" style="width:200px;height:2em;text-align:left"></div>-->
<br>
</p></td>
<td width="318" align="center">
<div id="dynloadarea" style="width:235px;height:445px"></div>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

<map name="Map" id="Map"><area shape="rect" coords="16,17,88,48" href="#" /><area shape="rect" coords="112,17,160,48" href="#" /><area shape="rect" coords="185,16,254,49" href="#" /><area shape="rect" coords="276,16,387,52" href="#" /><area shape="rect" coords="409,16,493,49" href="#" /><area shape="rect" coords="512,15,630,50" href="#" /><area shape="rect" coords="646,13,799,50" href="#" /><area shape="rect" coords="816,14,886,48" href="#" /></map></body>
</html>

Thank you in advance to anyone who is even willing to attempt to help!
shellewis
05-16-2008, 07:38 PM
ok ... when you follow the link to the sample page ... now it is working ... I am very greatful yet extremely confused ... can someone please explain why it is working now that it is live but not when I try to preview in browser through dreamweaver?
jscheuer1
05-16-2008, 09:17 PM
Most if not all versions of DW are for designing HTML and/or simple javascript only. You should never abandon a script because it doesn't work in a WYSIWYG editor like DW or FP. In fact, complex scripts are best added to a page using a text only editor like NotePad or one of the many advanced text only editors developed for web design. Pages should be tested in the browser, not the editor. If IE is your browser, it will often give an advisory/warning when viewing scripts locally. This generally will not happen once the page is live.
shellewis
05-16-2008, 10:49 PM
thank you for explaining that ... i really am a newbie :) and by the way thank you for the modifications you made to allow the iframe to work within the thumbnail viewer. I really like the way it looks and functions on the page.