Member Avatar for schwarznavy

Greetings,

I'm not a very advanced programmer at all.

I found a piece of code that helps me out a lot at http://www.codelifter.com/main/javas...lideshow2.html. It allows an image to crossfade into another, into another, etc.

I'd like to be able to crossfade an image, with a text caption underneath it, to crossfade into a different image with different text, into another, etc.

I think doing this may have something to do with putting the image and caption into a <div>, and then changing the code to swap the first <div> into the next, into the next.

The code identifies the images as 1.jpg, 2.jpg, 3.jpg, etc. It would be awesome if the captions could come from 1.txt, 2.txt, 3.txt, etc.

If Javascript can't call up .txt files, then the captions could be put inside the current web page into a table that is set to be hidden (display: none).

Can anyone help me do this?

The reason I want to use Javascript is because I do not wish to use anything that will make visitors have to have additional software (like Java or Flash). Additionally, it is not a problem if they have Javascrpt disabled, because then they'll just see the first image with the first caption, which is fine. I can't use anything like PHP or PERL because I have very little control over the server.

Thank you very much.
Matthew

Here is the original code:

==========================================================
Script: JavaScript Cross-Browser SlideShow Script
With Cross-Fade Effect between Images
Adjustable Timing and Unlimited Images
Function: Displays images continuously in a slideshow
presentation format, with a fade effect on
image transitions.
Browsers: All common browsers: NS3-6, IE 4-6
Fade effect only in IE; others degrade gracefully
Author: etLux
==========================================================

Step 1.
Put the following script in the head of your page:

<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply() 
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

==========================================================

Step 2.
Put this onload event call in your body tag:

<body onload="runSlideShow()"> 

==========================================================

Step 3.
Put this in the body of your page where you want the 
slide show to appear. 

Set widths and heights same as images
Set image file same as first image in array Pic[] (above)

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table>

==========================================================

Too bad no one ever replied to this ! I am trying to solve exactly the same problem with exactly the same code. (The 2nd problem I am trying to solve is to get this fade/blend transition to work in non-IE browsers.) If you have solved your problem would you be willing to post your code ?

Lost in the archive section, but this may come in handy for the other viewers' on this site.

This is a revision of the first posted version of the crossFader script, and now comes with a text rotator upgrade.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/javascript" />
<title>Slide Show Demo</title>
<style type="text/css">
/* <![CDATA[ */
* { border : none; }
html, body {
  background-color : #aaa;
  color : #405060;
  font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

div#main {
  background-color : #f0f0f0;
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 2px solid;
  background-color : inherit;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

table {
  min-height : 600px;
  border-collapse : collapse;
  text-align : left;
  margin : 0 auto;
  table-layout : fixed;
  padding : 0;
  width : 100%; }

td {
  height : auto; 
  vertical-align : middle !important;
  width : 100%; }

div#mySlide {
  padding : 1em;
  text-align : center;
  width : 50%;
  margin : 0 auto; }

span#slideText, img#slideShow {
  margin : 0 auto;
  display : block; }

span#slideText {
  padding-top : 1em;
  color : #696969;
  letter-spacing : 2px; }

/* ]]> */
</style>

<script type="text/javascript">
// <![CDATA[

var slideShowSpeed = 2; // Specify the number of delays in seconds

var captionID = "slideText"; // Specify the element id of the slideText container, ( div/span/p etc. ).

var crossFadeDuration = 3; // Specify the Cross Fade Duration in ( seconds ).

var $Path = "1.jpg, 2.jpg, 3.jpg, 4.png, 5.gif"; // Specify the filename's of the images that will be loaded in the slideShow rotation. Must be delimited by a ( space or comma ).

    
var $text = [
// Specify your Slide message's here, must be double quoted ( "" ) and delimited by a ( , ).

/* 1 */ 
"Image slide show with text rotator",

/* 2 */
"Dani's Javascript Live Examples",

/* 3 */
"I Love JavaScript!",

/* 4 */
"We find ways to make your Website's better.",

/* 5 */
"The good things about here, is FREE!" ];


/* W-A-R-N-I-N-G!
   - Do not attempt to alter any lines below -- unless you know what you are exactly doing! 

This notice must remain intact for use.

- DANIuser : essential ~

- Profile : http://www.daniweb.com/forums/member383844.html

- Get More IT Solutions at: http://www.daniweb.com/ 
*/
var count = 0;
var textCount = 0;
var $images, $img;
var runSlideShow;
   $images = [ ];
   $Path = (( $Path.split ) ? $Path.split(/[\,\s]+/) : $Path.match(/[\w\d]+(?:\.\w+)/g ));
    runSlideShow = function() {
   (( count === $Path.length ) ? count = 0 : count );
   (( textCount === $text.length ) ? textCount = 0 : textCount );
    $div = (( document.all ) ? document.all[ captionID ] : (( document.getElementById ) ? document.getElementById( captionID ) : document.layers[ captionID ] ));
    $img = (( document.images ) ? document.images.slideShow : (( document.getElementById ) ? document.getElementById("slideShow") : (( document.layers ) ? document.layers.slideShow : document.all.slideShow )));
      if ( document.images ) {
         if ( $img.style.filter ) { // Exception for some browser's that do not understand image filtration. Just making sure that whole thing will still, work with or without images filtration support.
         $img.style.filter = " blendTrans( duration=2 )";
         $img.style.filter = "blendTrans( duration = crossFadeDuration )"; 
         (( $img.filters ) ? $img.filters.blendTrans.Apply() : $img );
         } for ( var x = 0; x < $Path.length; x++ ) {
         $images[ x ] = new Image();
         $images[ x ].src = $Path[ x ];
         }       
      $img.src = $Path[ count ];
      $div.innerHTML = $text[ textCount++ ];
      $img.alt = $img.src;
      (( $img.filters ) ? $img.filters.blendTrans.Play() : $img );
      setTimeout( "runSlideShow()", ( slideShowSpeed * 1000 ))    
      }
   count++;
   }; window.onload = runSlideShow;
// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<table id="slider" frame="void" rules="none" summary="Image slide show with text rotator.">
<tr>
<td>
<div id="mySlide">
<img id="slideShow" src="image1.jpg" alt="SlideShow" />
<span id="slideText">SLIDE SAMPLE Text1</span>
</div>
</td>
</tr>
</table>
</div></div>
</body>
</html>

We are hoping that you will appreciate those time we've spent when we are creating re-runs on every codes..

Thanks much ! I do appreciate it. This works flawlessly in Chrome and Firefox. Couldn't get it to work in IE8. (I realize this code dates to well before IE8.)

Thanx again.

I'll try to make another update later...

Can you provide a short detail, regarding the issue in IE8?

Thanks...

Further thoughts .. I am very new to javascript (more familiar with PHP and CSS.) Ultimately, I want a cross-browser slideshow, with titles and hyperlinks, and cross-fade effects that work across browsers. (Additionally, I want it to be flexible enough so that I can eventually select the images and text from a database.)

Summarizing where I am at :
1) schwarznavy's 4/2/08 post executes a slideshow in Chrome, FF and IE8, without text but with a cross-fade effect that only works in IE.
2) essential's 5/31/09 post executes a slideshow in Chrome and Firefox but not in IE8, with text but shows no cross-fade effect in either browser.
3) http://brainerror.net/scripts/javascript/blendtrans/demo.html's code (8/18/07) executes a slideshow in Chrome, Firefox and IE8, without text but with nice cross-fade effects that work in all 3 browsers. (But doesn't center images and I get strange side effects when I try to do this with css.)

Has anyone seen code that executes a slideshow A) cross-browser with cross-browser cross-fade effects, B) with text captions and (optionally) C) with hyperlinks?

I'll try to make another update later...

Can you provide a short detail, regarding the issue in IE8?

Thanks...

In IE8, image1.jpg displays (with caption) followed immediately by 1.jpg (with caption) and then nothing else happens. (I am using your image names for convenience.) There are no cross-fade transitions between the two images (but I also don't get these transitions in FF and Chrome.)

Thanx for your help !

I'm still not sure for the end result of this script, but if you find any promblem, just let me know again...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Image Cross Fader Script with Text Rotator</title>
<style type="text/css">
/* <![CDATA[ */
* { border : none; }
html, body {
  background-color : #ccc;  
  color : #506070;
  font : normal normal normal 12pt/1.6 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

div#main {
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 2px solid;
  background-color : #f0f0f0;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

table {
  border-collapse : collapse;
  text-align : left;
  margin : 0;
  min-height : 600px !important;
  padding : 0;
  width : 100%; }

img#slidePic {
  border : 1px solid;
  min-width : 200px;
  min-height : 200px;
  background-color : #ccc; }

div#box {
  margin : 0 auto;
  width : 50%; }

td {
  height : auto;
  vertical-align : middle !important; 
  width : 100%;
  text-align : center; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

var slideTextID = "slideText"; // Specify the id of the slide text container.

var fadeIn = 4; // Specify the fadeIn transition.

var slideSpeed = 2 // Specify the number of delay in ( seconds ).
 
var baseName = "image"; // Specify the base name for the images

var crossFadeDuration = 3; // Specify the duration of the cross fade effect in ( seconds ).
/* 
   ~ In your image folder, you must rename all images based on the value that we've assigned in (baseName) variable and following it with a sequence of number.

Example:
image0.jpg, image1.jpg, image2.jpg and so on... */

var howManyImage = 5; // Specify the number of image(s) that will be loaded in the slide show. 
   
//* Bringing back the classic in creating arrays.

var myImages = new Array( howManyImage );
var imagePath = new Array( howManyImage );
var myCaption = new Array();

   myCaption[ 0 ] = "Text Sample #1";
   myCaption[ 1 ] = "Text Sample #2";
   myCaption[ 2 ] = "Text Sample #3";
   myCaption[ 3 ] = "Text Sample #4";
   myCaption[ 4 ] = "Text Sample #5"; 

/* 
   ~ You can add more text slide, by continuing the same format. Next index will begin at ( 5 ). */

   for ( var x = 0; x < myImages.length; x++ ) {
   myImages[ x ] = ((( baseName ) + x ) + ".jpg" );
      { imagePath[ x ] = new Image();
      imagePath[ x ].src = myImages[ x ];
      } 
   }

var iLen = myImages.length;
var tLen = myCaption.length;
var browser;
var imageCount = 0;
var textCount = 0;
var slideShow = function() {
   ie = new RegExp("MSIE[\\s\\/]([3-5]\\.\\d)", "i");
   browser = navigator.userAgent;
   imageCount = (( imageCount === iLen ) ? 0 : imageCount );
   textCount = (( textCount === tLen ) ? 0 : textCount );

   txtRotate = (( document.all && !document.getElementById ) ? document.all[ slideTextID ] : (( document.layers ) ? document.layers[ slideTextID ] : document.getElementById( slideTextID )));
   try { 
   imgRotate = (( document.images.slidePic ) ? document.images.slidePic : document.images["slidePic"] );
   } catch( e ) {
   imgRotate = (( document.all && !document.getElementById ) ? document.all["slidePic"] : (( document.layers ) ? document.layers["slidePic"] : document.getElementById("slidePic") ));
   } 
   for ( var j = (( fadeIn ) * 100 ); j >= 0; j-- ) {
      if ( ie.test( browser ) ) {
      imgRotate.style.filter = "blendTrans(duration=" + crossFadeDuration + ")";
         if ( imgRotate.filters.blendTrans.status !== 2 ) {
         imgRotate.filters.blendTrans.apply();
         imgRotate .style.visibility = "visible";
         }
      } else if ( browser.toLowerCase().indexOf("firefox") !== -1 ) {
      imgRotate.style.MozOpacity = Math.round( j / 100 ); 
      } else if ( browser.toLowerCase().indexOf("konqueror") !== -1 ) {
      imgRotate.style.KhtmlOpacity = Math.round( j / 100 );
      } else if ( ( /MSIE[\s\/]([6-8]\.\d)/i ).test( browser ) ) {
      imgRotate.style.filter = "alpha(opacity=" + j + ")";
      } else {
      imgRotate.style.opacity = Math.round( j / 100 );
   }
} imgRotate.src = imagePath[ imageCount ].src;
     (( ie.test( browser )) ? imgRotate.filters.blendTrans.play() : true ); 
   txtRotate.innerHTML = myCaption[ textCount ];
   window.setTimeout( "slideShow()", (( slideSpeed ) * 1000 ));
   textCount++;
   imageCount++;
};

window.onload = slideShow;

// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<table id="crossfader" frame="void" rules="none" summary="Javascript : crossfader script with text rotator">
<tr>
<td><div id="box"><img id="slidePic" src="image0.jpg" alt="Image Slide" />
<div id="slideText"></div></div></td>
</tr>
</table>
</div>
</div>
</body>
</html>

(Hopefully I am not duplicating a reply -- looked like I timed out before I could submit last time.)

I created the images -- image0.jpg through image4.jpg in my images directory and modified the path so that they could be accessed, then tried your code in both IE8 and FF.

In both, I can see that the tube div is being displayed (I added color:red to the style so that I could see the border.) Under this I see the captions, so I know we are looping properly. In firebug I can see that the image paths are being constructed properly. However, I am seeing no images.

I am currently using code from brainerror.com -- seems to give me the cross-browser fade-transitions I need even though it does not display captions. But I'm happy to test whatever else you come up. (Also happy to share the code I am using if you want to see it.)

Thanx !


I'm still not sure for the end result of this script, but if you find any promblem, just let me know again...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Image Cross Fader Script with Text Rotator</title>
<style type="text/css">
/* <![CDATA[ */
* { border : none; }
html, body {
  background-color : #ccc;  
  color : #506070;
  font : normal normal normal 12pt/1.6 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

div#main {
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 2px solid;
  background-color : #f0f0f0;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

table {
  border-collapse : collapse;
  text-align : left;
  margin : 0;
  min-height : 600px !important;
  padding : 0;
  width : 100%; }

img#slidePic {
  border : 1px solid;
  min-width : 200px;
  min-height : 200px;
  background-color : #ccc; }

div#box {
  margin : 0 auto;
  width : 50%; }

td {
  height : auto;
  vertical-align : middle !important; 
  width : 100%;
  text-align : center; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

var slideTextID = "slideText"; // Specify the id of the slide text container.

var fadeIn = 4; // Specify the fadeIn transition.

var slideSpeed = 2 // Specify the number of delay in ( seconds ).
 
var baseName = "image"; // Specify the base name for the images

var crossFadeDuration = 3; // Specify the duration of the cross fade effect in ( seconds ).
/* 
   ~ In your image folder, you must rename all images based on the value that we've assigned in (baseName) variable and following it with a sequence of number.

Example:
image0.jpg, image1.jpg, image2.jpg and so on... */

var howManyImage = 5; // Specify the number of image(s) that will be loaded in the slide show. 
   
//* Bringing back the classic in creating arrays.

var myImages = new Array( howManyImage );
var imagePath = new Array( howManyImage );
var myCaption = new Array();

   myCaption[ 0 ] = "Text Sample #1";
   myCaption[ 1 ] = "Text Sample #2";
   myCaption[ 2 ] = "Text Sample #3";
   myCaption[ 3 ] = "Text Sample #4";
   myCaption[ 4 ] = "Text Sample #5"; 

/* 
   ~ You can add more text slide, by continuing the same format. Next index will begin at ( 5 ). */

   for ( var x = 0; x < myImages.length; x++ ) {
   myImages[ x ] = ((( baseName ) + x ) + ".jpg" );
      { imagePath[ x ] = new Image();
      imagePath[ x ].src = myImages[ x ];
      } 
   }

var iLen = myImages.length;
var tLen = myCaption.length;
var browser;
var imageCount = 0;
var textCount = 0;
var slideShow = function() {
   ie = new RegExp("MSIE[\\s\\/]([3-5]\\.\\d)", "i");
   browser = navigator.userAgent;
   imageCount = (( imageCount === iLen ) ? 0 : imageCount );
   textCount = (( textCount === tLen ) ? 0 : textCount );

   txtRotate = (( document.all && !document.getElementById ) ? document.all[ slideTextID ] : (( document.layers ) ? document.layers[ slideTextID ] : document.getElementById( slideTextID )));
   try { 
   imgRotate = (( document.images.slidePic ) ? document.images.slidePic : document.images["slidePic"] );
   } catch( e ) {
   imgRotate = (( document.all && !document.getElementById ) ? document.all["slidePic"] : (( document.layers ) ? document.layers["slidePic"] : document.getElementById("slidePic") ));
   } 
   for ( var j = (( fadeIn ) * 100 ); j >= 0; j-- ) {
      if ( ie.test( browser ) ) {
      imgRotate.style.filter = "blendTrans(duration=" + crossFadeDuration + ")";
         if ( imgRotate.filters.blendTrans.status !== 2 ) {
         imgRotate.filters.blendTrans.apply();
         imgRotate .style.visibility = "visible";
         }
      } else if ( browser.toLowerCase().indexOf("firefox") !== -1 ) {
      imgRotate.style.MozOpacity = Math.round( j / 100 ); 
      } else if ( browser.toLowerCase().indexOf("konqueror") !== -1 ) {
      imgRotate.style.KhtmlOpacity = Math.round( j / 100 );
      } else if ( ( /MSIE[\s\/]([6-8]\.\d)/i ).test( browser ) ) {
      imgRotate.style.filter = "alpha(opacity=" + j + ")";
      } else {
      imgRotate.style.opacity = Math.round( j / 100 );
   }
} imgRotate.src = imagePath[ imageCount ].src;
     (( ie.test( browser )) ? imgRotate.filters.blendTrans.play() : true ); 
   txtRotate.innerHTML = myCaption[ textCount ];
   window.setTimeout( "slideShow()", (( slideSpeed ) * 1000 ));
   textCount++;
   imageCount++;
};

window.onload = slideShow;

// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<table id="crossfader" frame="void" rules="none" summary="Javascript : crossfader script with text rotator">
<tr>
<td><div id="box"><img id="slidePic" src="image0.jpg" alt="Image Slide" />
<div id="slideText"></div></div></td>
</tr>
</table>
</div>
</div>
</body>
</html>

The only problem i have here, is that i am just using a palm device, running in OPERA (Presto), developing the whole script. That's why i can't run testing on transitions. But it's quite a big challenge to me, creating programs in handheld device--so i prefer to give it another one last try.

Thanks for the feedback...

The final attempt of the script. Hope everything will work as expected.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Image Cross Fader with Text Rotator :: The Cross-Browser Project</title>
<style type="text/css">
/* <![CDATA[ */
* { border : none; }
html, body {
  background-color : #ccc;  
  color : #506070;
  font : normal normal normal 12pt/1.6 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

div#main {
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 2px solid;
  background-color : #f0f0f0;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

table {
  border-collapse : collapse;
  text-align : left;
  margin : 0;
  min-height : 600px !important;
  padding : 0;
  width : 100%; }

img#slidePic {
  border : 1px solid;
  min-width : 200px;
  min-height : 200px;
  background-color : #ccc; }

div#box {
  margin : 0 auto;
  width : 50%; }

td {
  height : auto;
  vertical-align : middle !important; 
  width : 100%;
  text-align : center; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
/* 
  Crossfader, SlideShow w/ text-slide - 
  
developed by DANIUSER : essential.

  ~ Profile: http://www.daniweb.com/forums/member383844.html
  ~ Get More IT Solutions at: http://www.daniweb.com/

This notice must reamain intact for use.
*/

var isIMAGE = [];

// < CONFIGURATION >
// Add more image files here by continuing the same format:
var isPATH = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg",
"image5.jpg" ];

// Add more text-slide by continuing the same format:
var isTEXT = [ 
"Text sample #1",
"Text sample #2",
"Text sample #3",
"Text sample #4",
"Text sample #5" ];
    
var ids = "slidePic"; // Specify your image id.

var txtId = "slideText"; // Specify id of the slideText container.

var slideSpeed = 2; // Set slide speed in ( seconds ).

var speed = 500; // Set transition speed in ( milliseconds ).

var startAt = 100; /* 
   ~ Setting this higher than the ( endAt ) variable will generate a fadeout effect on the image, viceversa. */

var endAt = 0;


// do not alter any lines below. 
var timer, i;
var slideM, slideT;
var tcount = 0, icount = 0;
var viaID = Boolean( document.getElementById );
var setOpacity;
   setOpacity = function( transpeed, isIMG ) {
   try {
   isIMG = document.images[ isIMG ];
   } catch( e ) {
   isIMG = (( viaID ) ? document.getElementById( isIMG ) : (( document.all && !viaID ) ? document.all[ isIMG ] : document.layers[ isIMG ] ));
   } isIMG.opacity = ( transpeed / 100 );
   isIMG.MozOpacity = ( transpeed / 100 );
   isIMG.KhtmlOpacity = ( transpeed / 100 );
   isIMG.filter = "alpha(opacity=" + transpeed + ")";
   };
var opacity;
   opacity = function() {
   setSpeed = Math.round( speed / 100 );
   timer = 0;
      if ( startAt > endAt ) {
         for ( i = startAt; i >= endAt; i-- ) {
         window.setTimeout("setOpacity( " + i + ", '" + ids + "' )", (( timer ) * setSpeed ));
         timer++;
         }
      } else if ( startAt < endAt ) {
         for ( i = startAt; starAt <= endAt; i++ ) {
         window.setTimout("setOpacity( " + i + ", '" + ids + "' )", (( timer ) * setSpeed ));
         timer++;
         }
      }
   };

var slideShow;
   slideShow = function() {
   (( icount === isPATH.length ) ? icount = 0 : icount );
   (( tcount === isTEXT.length ) ? tcount = 0 : tcount );
      try {
      slideM = document.images[ ids ];
      } catch( er ) {
      slideM = (( viaID ) ? document.getElementById( ids ) : (( document.all && !viaID ) ? document.all[ ids ] : document.layers[ ids ] ));
      } slideT = (( viaID ) ? document.getElementById( txtId ) : (( document.all && !viaID ) ? document.all[ txtId ] : document.layers[ txtId ] ));
   for ( var x = 0; x < isPATH.length; x++ ) {
      isIMAGE[ x ] = new Image();
         for ( var y in isIMAGE ) {
         isIMAGE[ y ].src = isPATH[ y ];
         }
      } slideT.innerHTML = isTEXT[ tcount ];
        slideM.src = isIMAGE[ icount ].src;
      window.setTimeout("slideShow()", (( slideSpeed ) * 1000 ));
      icount++;
      tcount++;
      opacity();
   };

window.onload = slideShow;
// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<table id="crossfader" frame="void" rules="none" summary="Javascript : crossfader script with text rotator">
<tr>
<td><div id="box"><img id="slidePic" src="image0.jpg" alt="Image Slide" />
<div id="slideText"></div></div></td>
</tr>
</table>
</div>
</div> 
</body>
</html>

I'm impressed. Developing on a handheld must be challenging !

Handling cross-browser transitions seems to be the big challenge with slideshows. Of the 30 or so sites I have reviewed that are competing with my client (my wife), about 7 have slideshows. 2 of those are done with Shockwave Flash (which of course satisfies all of my requirements except cost). Of the others none have captions, none are hyperlinked (so that you can click on the image and go somewhere where you can buy the product) and only one seems to have a cross-browser fade/blend working (although others have fade/blend working in IE only.) I've worked through the strange side effects in the brainerror.net code and it is working ok now but I am still without captions and hyperlinks (which my wife is really pushing for !) ... good for my education tho... :-)

google javascript+slideshow+with+captions+and+crossfade
or if you dont need the slideshow to be clientside
google php+slideshow+with+captions+and+crossfade
google asp+slideshow+with+captions+and+crossfade

Thanks, I will ! It does seem like it should be possible to adapt PHP / CSS gallery code (which I've already developed) to do a slideshow but (being fairly new at this) I didn't see anyway to do fade-blends without javascript so I didn't investigate that path.

a single file drop in php script with captions, blends, thumbnails, slideshows, save .zip of all images, totally configurable, stylable, Piece of cake,
Blatant Plug, not my product but I use it
Johannes Knabe's php slideshow

instruction 5 for captioning, the xml is easy, the script can generate it for you on prompt

I ususally rename the file slideshow.php to index.php to make the folder just run

Same result as before. Titles show but images do not. In firebug I can see that we are looping through images correctly and the images are in the right path (hovering over the path shows a thumbnail of the image.) However, I noticed that as we loop through the images, opacity is always 0. Here is code I copied directly from firebug.

<div id="box">
<img id="slidePic" alt="Image Slide" src="http://localhost/images/image4.jpg" style="opacity: 0;"/>
<div id="slideText">Text Sample #5</div>
</div>

One more point, when this code:

else if ( browser.toLowerCase().indexOf("firefox") !== -1 ) {
      imgRotate.style.MozOpacity = Math.round( j / 100 ); 
      }

is changed to this:

else if ( browser.toLowerCase().indexOf("firefox") !== -1 ) {
      imgRotate.style.MozOpacity = 5;
      }

All images become visible in Firefox (only). I couldn't figure out how to set a watch on the j variable but that is what I would look at first, if you can do that from your handheld. :-)

Member Avatar for schwarznavy

Hi. I ended up going with a slightly modified version of the JS-Slideshow found on http://www.gerd-tentler.de/tools/.

Then I combined it into a template for use with Jalbum.

You can see it in action at www.c7f.navy.mil.

I don't know what browsers it is completely compatible with.

Matt

Thanks much. I like it - labels, click-throughs, transitions (that work in FF), with both image-rotation and a little next/previous/pause device. I'll try this one out !

On a side note, noticed the June 3rd Yokosuka slide in the slideshow and forwarded the link to my Father, who was on board the USS Wilkesbarre and was involved with securing the Yokusuka naval base immediately before Japan signed the surrender terms on 9/2/45.

You must be Navy. Thanks again !

Member Avatar for schwarznavy

Thanks for the comment. If you're dad is up to it, he should visit our Facebook page -- the link is on our main web site www.c7f.navy.mil.

Will do. You must have done quite a bit of work on this slideshow. Gerry's version does not do fade transitions in FF, have titles, clickthroughs, etc. Is the c7f version posted anywhere ?

Thanx, Glenn.

Hi there,

Did you fix everything up?

- i'll get back on this one as soon as i get my new pc.

Kind regards...
essential

Thanks for the comment. If you're dad is up to it, he should visit our Facebook page -- the link is on our main web site www.c7f.navy.mil.

Addendum to last post -- After reviewing Gerry's content.js (for the first time) it seems fairly clear how to do titles and hyperlinks. I wrote Gerry about the lack of Fades in FF 3.0.10.

Hi there,

Did you fix everything up?

- i'll get back on this one as soon as i get my new pc.

Kind regards...
essential

Without the ability to set a watch so I can understand how that variable is changing and whether the problem is caused by rounding to zero or whatever, I'm not quite comfortable with diving in and modifying your code (I'm not a Javascript programmer -- at least not yet. Got my hands full with PHP and MySql.)

Ciao, Glenn

Hello,

wasn't sure if you where aware that filters.blendTrans only works in IE...

the better way to handle this for cross-browser support is by using DOM .opacity If I can find some time over the next few days i will put a sample together for you.

Yes, thanks -- although I did not know this 11 days ago. Only the code posted in 2008 by Schwartznavy used filters.blendTrans. I don't think any of the others mentioned here use this.

The link Schwartznavy provided 3 days ago (http://www.gerd-tentler.de/tools/) does use ".opacity". The guy who wrote this code (Gerry) has now explained to me how to make the transitions visible (my system was too fast and I wasn't seeing them.) Essential's code uses ".opacity". The code I am currently using (from brainerror.com) also uses ".opacity".

I have something working right now and may switch to the latest schwartznavy solution (http://www.gerd-tentler.de/tools/) when I have hit the rest of my deadlines. Will still test Essential's code as he modifies it. However, as the the Mexican Bandits said in the "Undefeated", "We are so poor (at Javascript) and you have so much (knowledge of how to do this stuff) we'll take everything (that you are willing to offer) !" So feel free to do a short tutorial. Nice to have so rich a thread going.

Thanx, Glenn

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.