PDA

View Full Version : Script: Image thumbnail viewer II IE



jpozzi
02-06-2005, 01:38 PM
Help please; I am new to this.

I am using this but can't get the fade effect to work. I have changed the values for gradient size and duration repeatedly with no result at all.

The effect works fine on the demo example over the internet.

Can anybody help?

cr3ative
02-06-2005, 03:25 PM
Hiya - please post a link to your troubled website or your code wrapped in the appropriate bbcode tags {code} {/code}

cr3ative

jpozzi
02-06-2005, 04:40 PM
hi,

This is the code in the Head section:

<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
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["images/hgproductsimage1big.jpg", ""]
dynimages[1]=["images/hgproductsimage2big.jpg", ""]
dynimages[2]=["images/hgproductsimage3big.jpg", ""]
dynimages[3]=["images/hgproductsimage4big.jpg", ""]
dynimages[4]=["images/hgproductsimage5big.jpg", ""]
dynimages[5]=["images/hgproductsimage6big.jpg", ""]
dynimages[6]=["images/hgproductsimage7big.jpg", ""]
dynimages[7]=["images/hgproductsimage8big.jpg", ""]
dynimages[8]=["images/hgproductsimage9big.jpg", ""]



//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=1

//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=5 Duration=5000)"

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

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

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

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

</script>

this is in the body:

<TD vAlign=middle align=center width=380
height=280 border=0 background="images/dynareabg.jpg" width="380" height="280" alt="" border="0"><div id='dynloadarea'></div></TD>
<td width=380 valign=top><img src="images/spacer.gif" width="20" height="10" alt="" border="0"><a href="#" onMouseover="modifyimage('dynloadarea',0)"><img src="images/hgproductsimage1.jpg" width="100" height="79" alt="" border="1"></a><img src="images/spacer.gif" width="20" height="10" alt="" border="0"><a href="#" onMouseover="modifyimage('dynloadarea',1)"><img src="images/hgproductsimage2.jpg" width="100" height="79" alt="" border="1"></a><img src="images/spacer.gif" width="20" height="10" alt="" border="0"><a href="#" onMouseover="modifyimage('dynloadarea',2)"><img src="images/hgproductsimage3.jpg" width="100" height="79" alt="" border="1"></a><br><br>
<br>
<img src="images/spacer.gif" width="20" height="10" alt="" border="0"><a href="#" onMouseover="modifyimage('dynloadarea',3)"><img src="images/hgproductsimage4.jpg" width="100" height="78" alt="" border="1"></a><img src="images/spacer.gif" width="20" height="10" alt="" border="0"><a href="#" onMouseover="modifyimage('dynloadarea',4)"><img src="images/hgproductsimage5.jpg" width="100" height="78" alt="" border="1"></a><img src="images/spacer.gif" width="20" height="10" alt="" border="0"><a href="#" onMouseover="modifyimage('dynloadarea',5)"><img src="images/hgproductsimage6.jpg" width="100" height="78" alt="" border="1"></a><br><br>
<br>

<img src="images/spacer.gif" width="20" height="10" alt="" border="0"><a href="#" onMouseover="modifyimage('dynloadarea',6)"><img src="images/hgproductsimage7.jpg" width="100" height="79" alt="" border="1"></a><img src="images/spacer.gif" width="20" height="10" alt="" border="0"><a href="#" onMouseover="modifyimage('dynloadarea',7)"><img src="images/hgproductsimage8.jpg" width="100" height="79" alt="" border="1"></a><img src="images/spacer.gif" width="20" height="10" alt="" border="0"><a href="#" onMouseover="modifyimage('dynloadarea',8)"><img src="images/hgproductsimage9.jpg" width="100" height="79" alt="" border="1"></a><br>
<br><font size="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Move mouse over picture to see larger image</font>

</td>


As I said, I am new to this, thanks for getting back to me.

ddadmin
02-08-2005, 02:51 AM
.

I don't see anything wrong with the code posted. What's the URL to the problematic page on your site?

jpozzi
02-08-2005, 02:46 PM
Many thanks for looking.

It is a mystery; I created a blank page with just the code required and it worked fine. I then copied that code into the original page and it didn't work. I then took out all other code on the original page and it still didn't wok. I then had two identical pages, one worked, the other didn't!!! I am now putting the rest of the code into the one that works.

Again, many thanks