Help fading in first (and only first) slide show image

**scurry** · 08-15-2006, 05:17 AM

1) Script Title: Slide Show Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...dhtmlslide.htm

3) Describe problem: I'm looking for a way to fade in my first image in the slide show (as the page loads), but then have the successive images simply appear with no effect on click through.

Here's my page: http://www.leighclambert.com/forthehome_ss.htm

Any help would be most appreciated! Thank you!

**jscheuer1** · 08-15-2006, 07:01 AM

There's got to be a better way to do this but, this routine (borrowed, adapted and upgraded from Ultimate Fade-in slide show (v1.5)) works and is much more cross browser than the script you mention's original fade routine:

HTML Code:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>LCL Designs - For the Home</title>
<script type="text/javascript">
document.write('<style type="text/css">\
#show {\
filter:alpha(opacity=0);\
-moz-opacity:0;\
opacity:0;\
-khtml-opacity:0;\
}\
<\/style>')

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.picobj.filters&&obj.picobj.filters[0]){
if (typeof obj.picobj.filters[0].opacity=="number") //if IE6+
obj.picobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.picobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (typeof obj.picobj.style.opacity=='string'&&!obj.picobj.filters)
obj.picobj.style.opacity=obj.degree/101
else if (typeof obj.picobj.style.MozOpacity=='string')
obj.picobj.style.MozOpacity=obj.degree/101
else if (typeof obj.picobj.style.KhtmlOpacity=='string')
obj.picobj.style.KhtmlOpacity=obj.degree/100
}
else
clearInterval(fadein)
}
var fadein, obj=new Object();
onload=function(){
obj.degree=10;
obj.picobj=document.getElementById('show')
fadein=setInterval("fadepic(obj)", 50)
}
</script>
</head>

<body bgcolor="#E3F9F7">

<p align="center"><br>
<img border="0" src="images/ttl_forthehome.gif" width="192" height="34"></p>
<div align="center">
  <center>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="13%">
    <tr>
      <td width="100%" align="center" valign="top">&nbsp;<script type="text/javascript">

/***********************************************
* DHTML slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:
photos[0]="photo1.jpg"
photos[1]="photo2.jpg"
photos[2]="photo3.jpg"
photos[3]="photo4.jpg"

//Specify whether images should be linked or not (1=linked)
var linkornot=0

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""

//do NOT edit pass this line

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
which--
document.images.photoslider.src=photos[which]
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}

      </script>

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" colspan="2" height="450"><center>
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img id="show" src="'+photos[0]+'" name="photoslider" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
</tr>
<tr>
<td width="50%" height="21" style="padding-top: 10"><p align="left"><a href="#" onClick="backward();return false">
<img border="0" src="images/previous.gif" width="72" height="20"></a></td>
<td width="50%" height="21" style="padding-top: 10"><p align="right"><a href="#" onClick="forward();return false">
<img border="0" src="images/next.gif" width="43" height="20"> </a></td>
</tr>
</table>

<p align="center">
<img border="0" src="images/lcl_motif.gif" width="82" height="31"></p></td>
    </tr>
  </table>
  </center>
</div>

  <p align="center"><br>
  <font face="Georgia" size="1" color="#663014"><a href="index.html">
  <font color="#663014">Home</font></a></font><font size="1" face="Georgia"><font color="#663014">&nbsp;&nbsp; 
  |&nbsp; </font><a href="index.html"><font color="#663014">About LCL Designs</font></a><font color="#663014">&nbsp;&nbsp; 
  |&nbsp; </font><a href="forthehome_ss.htm"><font color="#663014">For the Home</font></a><font color="#663014">&nbsp; 
  |&nbsp; <a href="index.html"><font color="#663014">For the Child</font></a>&nbsp; 
  |&nbsp; </font><a href="index.html"><font color="#663014">From the Outside In</font></a></font><font size="1" face="Arial">&nbsp;
  </font><br>
  <br>
&nbsp;</p>

</body>

</html>

**scurry** · 08-15-2006, 11:30 AM

John,

Thanks a million! That was EXACTLY what I was looking for.

Have a great one,

Joe

Thread: Help fading in first (and only first) slide show image

Thread Tools

Search Thread

Help fading in first (and only first) slide show image

Bookmarks

Bookmarks

Posting Permissions