Adding text to Slideshow script for images

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply
1 2 Last »

•
•
Join Date: Jun 2007
Posts: 13
Reputation: schwarznavy is an unknown quantity at this point 
Solved Threads: 0
schwarznavy schwarznavy is offline Offline
Newbie Poster

Adding text to Slideshow script for images

 
0
  #1
Apr 2nd, 2008
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. ==========================================================
  2. Script: JavaScript Cross-Browser SlideShow Script
  3. With Cross-Fade Effect between Images
  4. Adjustable Timing and Unlimited Images
  5. Function: Displays images continuously in a slideshow
  6. presentation format, with a fade effect on
  7. image transitions.
  8. Browsers: All common browsers: NS3-6, IE 4-6
  9. Fade effect only in IE; others degrade gracefully
  10. Author: etLux
  11. ==========================================================
  12.  
  13. Step 1.
  14. Put the following script in the head of your page:
  15.  
  16. <script>
  17. // (C) 2000 www.CodeLifter.com
  18. // http://www.codelifter.com
  19. // Free for all users, but leave in this header
  20. // NS4-6,IE4-6
  21. // Fade effect only in IE; degrades gracefully
  22.  
  23. // =======================================
  24. // set the following variables
  25. // =======================================
  26.  
  27. // Set slideShowSpeed (milliseconds)
  28. var slideShowSpeed = 5000
  29.  
  30. // Duration of crossfade (seconds)
  31. var crossFadeDuration = 3
  32.  
  33. // Specify the image files
  34. var Pic = new Array() // don't touch this
  35. // to add more images, just continue
  36. // the pattern, adding to the array below
  37.  
  38. Pic[0] = '1.jpg'
  39. Pic[1] = '2.jpg'
  40. Pic[2] = '3.jpg'
  41. Pic[3] = '4.jpg'
  42. Pic[4] = '5.jpg'
  43.  
  44. // =======================================
  45. // do not edit anything below this line
  46. // =======================================
  47.  
  48. var t
  49. var j = 0
  50. var p = Pic.length
  51.  
  52. var preLoad = new Array()
  53. for (i = 0; i < p; i++){
  54. preLoad[i] = new Image()
  55. preLoad[i].src = Pic[i]
  56. }
  57.  
  58. function runSlideShow(){
  59. if (document.all){
  60. document.images.SlideShow.style.filter="blendTrans(duration=2)"
  61. document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
  62. document.images.SlideShow.filters.blendTrans.Apply() 
  63. }
  64. document.images.SlideShow.src = preLoad[j].src
  65. if (document.all){
  66. document.images.SlideShow.filters.blendTrans.Play()
  67. }
  68. j = j + 1
  69. if (j > (p-1)) j=0
  70. t = setTimeout('runSlideShow()', slideShowSpeed)
  71. }
  72. </script>
  73.  
  74. ==========================================================
  75.  
  76. Step 2.
  77. Put this onload event call in your body tag:
  78.  
  79. <body onload="runSlideShow()"> 
  80.  
  81. ==========================================================
  82.  
  83. Step 3.
  84. Put this in the body of your page where you want the 
  85. slide show to appear. 
  86.  
  87. Set widths and heights same as images
  88. Set image file same as first image in array Pic[] (above)
  89.  
  90. <table border="0" cellpadding="0" cellspacing="0">
  91. <tr>
  92. <td id="VU" height=150 width=150>
  93. <img src="1.jpg" name='SlideShow' width=150 height=150></td>
  94. </tr>
  95. </table>
  96.  
  97. ==========================================================
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 23
Reputation: FeralReason is an unknown quantity at this point 
Solved Threads: 0
FeralReason FeralReason is offline Offline
Newbie Poster

Re: Adding text to Slideshow script for images

 
0
  #2
May 30th, 2009
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 ?
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Adding text to Slideshow script for images

 
0
  #3
May 31st, 2009
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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <meta http-equiv="Content-Style-Type" content="text/javascript" />
  10. <title>Slide Show Demo</title>
  11. <style type="text/css">
  12. /* <![CDATA[ */
  13. * { border : none; }
  14. html, body {
  15.   background-color : #aaa;
  16.   color : #405060;
  17.   font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  18.   min-height : 600px;
  19.   text-align : center;
  20.   height : auto;
  21.   width : auto; }
  22.  
  23. div#main {
  24.   background-color : #f0f0f0;
  25.   margin : 0 auto;
  26.   height : inherit !important;
  27.   padding : 0;
  28.   width : 100%; }
  29.  
  30. div.tube {
  31.   border : 2px solid;
  32.   background-color : inherit;
  33.   height : inherit !important;
  34.   clear : both;
  35.   padding : 1em;
  36.   margin : 0;
  37.   overflow : hidden; }
  38.  
  39. table {
  40.   min-height : 600px;
  41.   border-collapse : collapse;
  42.   text-align : left;
  43.   margin : 0 auto;
  44.   table-layout : fixed;
  45.   padding : 0;
  46.   width : 100%; }
  47.  
  48. td {
  49.   height : auto; 
  50.   vertical-align : middle !important;
  51.   width : 100%; }
  52.  
  53. div#mySlide {
  54.   padding : 1em;
  55.   text-align : center;
  56.   width : 50%;
  57.   margin : 0 auto; }
  58.  
  59. span#slideText, img#slideShow {
  60.   margin : 0 auto;
  61.   display : block; }
  62.  
  63. span#slideText {
  64.   padding-top : 1em;
  65.   color : #696969;
  66.   letter-spacing : 2px; }
  67.  
  68. /* ]]> */
  69. </style>
  70.  
  71. <script type="text/javascript">
  72. // <![CDATA[
  73.  
  74. var slideShowSpeed = 2; // Specify the number of delays in seconds
  75.  
  76. var captionID = "slideText"; // Specify the element id of the slideText container, ( div/span/p etc. ).
  77.  
  78. var crossFadeDuration = 3; // Specify the Cross Fade Duration in ( seconds ).
  79.  
  80. 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 ).
  81.  
  82.  
  83. var $text = [
  84. // Specify your Slide message's here, must be double quoted ( "" ) and delimited by a ( , ).
  85.  
  86. /* 1 */ 
  87. "Image slide show with text rotator",
  88.  
  89. /* 2 */
  90. "Dani's Javascript Live Examples",
  91.  
  92. /* 3 */
  93. "I Love JavaScript!",
  94.  
  95. /* 4 */
  96. "We find ways to make your Website's better.",
  97.  
  98. /* 5 */
  99. "The good things about here, is FREE!" ];
  100.  
  101.  
  102. /* W-A-R-N-I-N-G!
  103.    - Do not attempt to alter any lines below -- unless you know what you are exactly doing! 
  104.  
  105. This notice must remain intact for use.
  106.  
  107. - DANIuser : essential ~
  108.  
  109. - Profile : http://www.daniweb.com/forums/member383844.html
  110.  
  111. - Get More IT Solutions at: http://www.daniweb.com/ 
  112. */
  113. var count = 0;
  114. var textCount = 0;
  115. var $images, $img;
  116. var runSlideShow;
  117.    $images = [ ];
  118.    $Path = (( $Path.split ) ? $Path.split(/[\,\s]+/) : $Path.match(/[\w\d]+(?:\.\w+)/g ));
  119.     runSlideShow = function() {
  120.    (( count === $Path.length ) ? count = 0 : count );
  121.    (( textCount === $text.length ) ? textCount = 0 : textCount );
  122.     $div = (( document.all ) ? document.all[ captionID ] : (( document.getElementById ) ? document.getElementById( captionID ) : document.layers[ captionID ] ));
  123.     $img = (( document.images ) ? document.images.slideShow : (( document.getElementById ) ? document.getElementById("slideShow") : (( document.layers ) ? document.layers.slideShow : document.all.slideShow )));
  124.       if ( document.images ) {
  125.          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.
  126.          $img.style.filter = " blendTrans( duration=2 )";
  127.          $img.style.filter = "blendTrans( duration = crossFadeDuration )"; 
  128.          (( $img.filters ) ? $img.filters.blendTrans.Apply() : $img );
  129.          } for ( var x = 0; x < $Path.length; x++ ) {
  130.          $images[ x ] = new Image();
  131.          $images[ x ].src = $Path[ x ];
  132.          }       
  133.       $img.src = $Path[ count ];
  134.       $div.innerHTML = $text[ textCount++ ];
  135.       $img.alt = $img.src;
  136.       (( $img.filters ) ? $img.filters.blendTrans.Play() : $img );
  137.       setTimeout( "runSlideShow()", ( slideShowSpeed * 1000 ))    
  138.       }
  139.    count++;
  140.    }; window.onload = runSlideShow;
  141. // ]]>
  142. </script>
  143. </head>
  144. <body>
  145. <div id="main">
  146. <div class="tube">
  147. <table id="slider" frame="void" rules="none" summary="Image slide show with text rotator.">
  148. <tr>
  149. <td>
  150. <div id="mySlide">
  151. <img id="slideShow" src="image1.jpg" alt="SlideShow" />
  152. <span id="slideText">SLIDE SAMPLE Text1</span>
  153. </div>
  154. </td>
  155. </tr>
  156. </table>
  157. </div></div>
  158. </body>
  159. </html>

We are hoping that you will appreciate those time we've spent when we are creating re-runs on every codes..
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 23
Reputation: FeralReason is an unknown quantity at this point 
Solved Threads: 0
FeralReason FeralReason is offline Offline
Newbie Poster

Re: Adding text to Slideshow script for images

 
0
  #4
May 31st, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Adding text to Slideshow script for images

 
0
  #5
May 31st, 2009
I'll try to make another update later...

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

Thanks...
Last edited by essential; May 31st, 2009 at 2:42 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 23
Reputation: FeralReason is an unknown quantity at this point 
Solved Threads: 0
FeralReason FeralReason is offline Offline
Newbie Poster

Re: Adding text to Slideshow script for images

 
0
  #6
May 31st, 2009
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 23
Reputation: FeralReason is an unknown quantity at this point 
Solved Threads: 0
FeralReason FeralReason is offline Offline
Newbie Poster

Re: Adding text to Slideshow script for images

 
0
  #7
May 31st, 2009
•
•
•
•
Originally Posted by essential View Post
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 !
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Adding text to Slideshow script for images

 
0
  #8
Jun 1st, 2009
I'm still not sure for the end result of this script, but if you find any promblem, just let me know again...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head profile="http://www.w3.org/2005/10/profile">
  6. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Style-Type" content="text/css" />
  9. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  10. <title>Image Cross Fader Script with Text Rotator</title>
  11. <style type="text/css">
  12. /* <![CDATA[ */
  13. * { border : none; }
  14. html, body {
  15.   background-color : #ccc;  
  16.   color : #506070;
  17.   font : normal normal normal 12pt/1.6 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  18.   min-height : 600px;
  19.   text-align : center;
  20.   height : auto;
  21.   width : auto; }
  22.  
  23. div#main {
  24.   margin : 0 auto;
  25.   height : inherit !important;
  26.   padding : 0;
  27.   width : 100%; }
  28.  
  29. div.tube {
  30.   border : 2px solid;
  31.   background-color : #f0f0f0;
  32.   height : inherit !important;
  33.   clear : both;
  34.   padding : 1em;
  35.   margin : 0;
  36.   overflow : hidden; }
  37.  
  38. table {
  39.   border-collapse : collapse;
  40.   text-align : left;
  41.   margin : 0;
  42.   min-height : 600px !important;
  43.   padding : 0;
  44.   width : 100%; }
  45.  
  46. img#slidePic {
  47.   border : 1px solid;
  48.   min-width : 200px;
  49.   min-height : 200px;
  50.   background-color : #ccc; }
  51.  
  52. div#box {
  53.   margin : 0 auto;
  54.   width : 50%; }
  55.  
  56. td {
  57.   height : auto;
  58.   vertical-align : middle !important; 
  59.   width : 100%;
  60.   text-align : center; }
  61. /* ]]> */
  62. </style>
  63. <script type="text/javascript">
  64. // <![CDATA[
  65.  
  66. var slideTextID = "slideText"; // Specify the id of the slide text container.
  67.  
  68. var fadeIn = 4; // Specify the fadeIn transition.
  69.  
  70. var slideSpeed = 2 // Specify the number of delay in ( seconds ).
  71.  
  72. var baseName = "image"; // Specify the base name for the images
  73.  
  74. var crossFadeDuration = 3; // Specify the duration of the cross fade effect in ( seconds ).
  75. /* 
  76.    ~ 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.
  77.  
  78. Example:
  79. image0.jpg, image1.jpg, image2.jpg and so on... */
  80.  
  81. var howManyImage = 5; // Specify the number of image(s) that will be loaded in the slide show. 
  82.  
  83. //* Bringing back the classic in creating arrays.
  84.  
  85. var myImages = new Array( howManyImage );
  86. var imagePath = new Array( howManyImage );
  87. var myCaption = new Array();
  88.  
  89.    myCaption[ 0 ] = "Text Sample #1";
  90.    myCaption[ 1 ] = "Text Sample #2";
  91.    myCaption[ 2 ] = "Text Sample #3";
  92.    myCaption[ 3 ] = "Text Sample #4";
  93.    myCaption[ 4 ] = "Text Sample #5"; 
  94.  
  95. /* 
  96.    ~ You can add more text slide, by continuing the same format. Next index will begin at ( 5 ). */
  97.  
  98.    for ( var x = 0; x < myImages.length; x++ ) {
  99.    myImages[ x ] = ((( baseName ) + x ) + ".jpg" );
  100.       { imagePath[ x ] = new Image();
  101.       imagePath[ x ].src = myImages[ x ];
  102.       } 
  103.    }
  104.  
  105. var iLen = myImages.length;
  106. var tLen = myCaption.length;
  107. var browser;
  108. var imageCount = 0;
  109. var textCount = 0;
  110. var slideShow = function() {
  111.    ie = new RegExp("MSIE[\\s\\/]([3-5]\\.\\d)", "i");
  112.    browser = navigator.userAgent;
  113.    imageCount = (( imageCount === iLen ) ? 0 : imageCount );
  114.    textCount = (( textCount === tLen ) ? 0 : textCount );
  115.  
  116.    txtRotate = (( document.all && !document.getElementById ) ? document.all[ slideTextID ] : (( document.layers ) ? document.layers[ slideTextID ] : document.getElementById( slideTextID )));
  117.    try { 
  118.    imgRotate = (( document.images.slidePic ) ? document.images.slidePic : document.images["slidePic"] );
  119.    } catch( e ) {
  120.    imgRotate = (( document.all && !document.getElementById ) ? document.all["slidePic"] : (( document.layers ) ? document.layers["slidePic"] : document.getElementById("slidePic") ));
  121.    } 
  122.    for ( var j = (( fadeIn ) * 100 ); j >= 0; j-- ) {
  123.       if ( ie.test( browser ) ) {
  124.       imgRotate.style.filter = "blendTrans(duration=" + crossFadeDuration + ")";
  125.          if ( imgRotate.filters.blendTrans.status !== 2 ) {
  126.          imgRotate.filters.blendTrans.apply();
  127.          imgRotate .style.visibility = "visible";
  128.          }
  129.       } else if ( browser.toLowerCase().indexOf("firefox") !== -1 ) {
  130.       imgRotate.style.MozOpacity = Math.round( j / 100 ); 
  131.       } else if ( browser.toLowerCase().indexOf("konqueror") !== -1 ) {
  132.       imgRotate.style.KhtmlOpacity = Math.round( j / 100 );
  133.       } else if ( ( /MSIE[\s\/]([6-8]\.\d)/i ).test( browser ) ) {
  134.       imgRotate.style.filter = "alpha(opacity=" + j + ")";
  135.       } else {
  136.       imgRotate.style.opacity = Math.round( j / 100 );
  137.    }
  138. } imgRotate.src = imagePath[ imageCount ].src;
  139.      (( ie.test( browser )) ? imgRotate.filters.blendTrans.play() : true ); 
  140.    txtRotate.innerHTML = myCaption[ textCount ];
  141.    window.setTimeout( "slideShow()", (( slideSpeed ) * 1000 ));
  142.    textCount++;
  143.    imageCount++;
  144. };
  145.  
  146. window.onload = slideShow;
  147.  
  148. // ]]>
  149. </script>
  150. </head>
  151. <body>
  152. <div id="main">
  153. <div class="tube">
  154. <table id="crossfader" frame="void" rules="none" summary="Javascript : crossfader script with text rotator">
  155. <tr>
  156. <td><div id="box"><img id="slidePic" src="image0.jpg" alt="Image Slide" />
  157. <div id="slideText"></div></div></td>
  158. </tr>
  159. </table>
  160. </div>
  161. </div>
  162. </body>
  163. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 23
Reputation: FeralReason is an unknown quantity at this point 
Solved Threads: 0
FeralReason FeralReason is offline Offline
Newbie Poster

Re: Adding text to Slideshow script for images

 
0
  #9
Jun 1st, 2009
(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 !



•
•
•
•
Originally Posted by essential View Post
I'm still not sure for the end result of this script, but if you find any promblem, just let me know again...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head profile="http://www.w3.org/2005/10/profile">
  6. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Style-Type" content="text/css" />
  9. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  10. <title>Image Cross Fader Script with Text Rotator</title>
  11. <style type="text/css">
  12. /* <![CDATA[ */
  13. * { border : none; }
  14. html, body {
  15.   background-color : #ccc;  
  16.   color : #506070;
  17.   font : normal normal normal 12pt/1.6 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  18.   min-height : 600px;
  19.   text-align : center;
  20.   height : auto;
  21.   width : auto; }
  22.  
  23. div#main {
  24.   margin : 0 auto;
  25.   height : inherit !important;
  26.   padding : 0;
  27.   width : 100%; }
  28.  
  29. div.tube {
  30.   border : 2px solid;
  31.   background-color : #f0f0f0;
  32.   height : inherit !important;
  33.   clear : both;
  34.   padding : 1em;
  35.   margin : 0;
  36.   overflow : hidden; }
  37.  
  38. table {
  39.   border-collapse : collapse;
  40.   text-align : left;
  41.   margin : 0;
  42.   min-height : 600px !important;
  43.   padding : 0;
  44.   width : 100%; }
  45.  
  46. img#slidePic {
  47.   border : 1px solid;
  48.   min-width : 200px;
  49.   min-height : 200px;
  50.   background-color : #ccc; }
  51.  
  52. div#box {
  53.   margin : 0 auto;
  54.   width : 50%; }
  55.  
  56. td {
  57.   height : auto;
  58.   vertical-align : middle !important; 
  59.   width : 100%;
  60.   text-align : center; }
  61. /* ]]> */
  62. </style>
  63. <script type="text/javascript">
  64. // <![CDATA[
  65.  
  66. var slideTextID = "slideText"; // Specify the id of the slide text container.
  67.  
  68. var fadeIn = 4; // Specify the fadeIn transition.
  69.  
  70. var slideSpeed = 2 // Specify the number of delay in ( seconds ).
  71.  
  72. var baseName = "image"; // Specify the base name for the images
  73.  
  74. var crossFadeDuration = 3; // Specify the duration of the cross fade effect in ( seconds ).
  75. /* 
  76.    ~ 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.
  77.  
  78. Example:
  79. image0.jpg, image1.jpg, image2.jpg and so on... */
  80.  
  81. var howManyImage = 5; // Specify the number of image(s) that will be loaded in the slide show. 
  82.  
  83. //* Bringing back the classic in creating arrays.
  84.  
  85. var myImages = new Array( howManyImage );
  86. var imagePath = new Array( howManyImage );
  87. var myCaption = new Array();
  88.  
  89.    myCaption[ 0 ] = "Text Sample #1";
  90.    myCaption[ 1 ] = "Text Sample #2";
  91.    myCaption[ 2 ] = "Text Sample #3";
  92.    myCaption[ 3 ] = "Text Sample #4";
  93.    myCaption[ 4 ] = "Text Sample #5"; 
  94.  
  95. /* 
  96.    ~ You can add more text slide, by continuing the same format. Next index will begin at ( 5 ). */
  97.  
  98.    for ( var x = 0; x < myImages.length; x++ ) {
  99.    myImages[ x ] = ((( baseName ) + x ) + ".jpg" );
  100.       { imagePath[ x ] = new Image();
  101.       imagePath[ x ].src = myImages[ x ];
  102.       } 
  103.    }
  104.  
  105. var iLen = myImages.length;
  106. var tLen = myCaption.length;
  107. var browser;
  108. var imageCount = 0;
  109. var textCount = 0;
  110. var slideShow = function() {
  111.    ie = new RegExp("MSIE[\\s\\/]([3-5]\\.\\d)", "i");
  112.    browser = navigator.userAgent;
  113.    imageCount = (( imageCount === iLen ) ? 0 : imageCount );
  114.    textCount = (( textCount === tLen ) ? 0 : textCount );
  115.  
  116.    txtRotate = (( document.all && !document.getElementById ) ? document.all[ slideTextID ] : (( document.layers ) ? document.layers[ slideTextID ] : document.getElementById( slideTextID )));
  117.    try { 
  118.    imgRotate = (( document.images.slidePic ) ? document.images.slidePic : document.images["slidePic"] );
  119.    } catch( e ) {
  120.    imgRotate = (( document.all && !document.getElementById ) ? document.all["slidePic"] : (( document.layers ) ? document.layers["slidePic"] : document.getElementById("slidePic") ));
  121.    } 
  122.    for ( var j = (( fadeIn ) * 100 ); j >= 0; j-- ) {
  123.       if ( ie.test( browser ) ) {
  124.       imgRotate.style.filter = "blendTrans(duration=" + crossFadeDuration + ")";
  125.          if ( imgRotate.filters.blendTrans.status !== 2 ) {
  126.          imgRotate.filters.blendTrans.apply();
  127.          imgRotate .style.visibility = "visible";
  128.          }
  129.       } else if ( browser.toLowerCase().indexOf("firefox") !== -1 ) {
  130.       imgRotate.style.MozOpacity = Math.round( j / 100 ); 
  131.       } else if ( browser.toLowerCase().indexOf("konqueror") !== -1 ) {
  132.       imgRotate.style.KhtmlOpacity = Math.round( j / 100 );
  133.       } else if ( ( /MSIE[\s\/]([6-8]\.\d)/i ).test( browser ) ) {
  134.       imgRotate.style.filter = "alpha(opacity=" + j + ")";
  135.       } else {
  136.       imgRotate.style.opacity = Math.round( j / 100 );
  137.    }
  138. } imgRotate.src = imagePath[ imageCount ].src;
  139.      (( ie.test( browser )) ? imgRotate.filters.blendTrans.play() : true ); 
  140.    txtRotate.innerHTML = myCaption[ textCount ];
  141.    window.setTimeout( "slideShow()", (( slideSpeed ) * 1000 ));
  142.    textCount++;
  143.    imageCount++;
  144. };
  145.  
  146. window.onload = slideShow;
  147.  
  148. // ]]>
  149. </script>
  150. </head>
  151. <body>
  152. <div id="main">
  153. <div class="tube">
  154. <table id="crossfader" frame="void" rules="none" summary="Javascript : crossfader script with text rotator">
  155. <tr>
  156. <td><div id="box"><img id="slidePic" src="image0.jpg" alt="Image Slide" />
  157. <div id="slideText"></div></div></td>
  158. </tr>
  159. </table>
  160. </div>
  161. </div>
  162. </body>
  163. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Adding text to Slideshow script for images

 
0
  #10
Jun 1st, 2009
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...
Reply With Quote Quick reply to this message  
Reply
1 2 Last »

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 7463 | Replies: 25
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxhelp animate array automatically autoplay beta boarder box bug button calendar captcha card cart codes column cookies createrange() css cursor date debugger decimal design developer dom download dropdown element enter error events firefox firehose flash focus form frameworks getselection google gwt html htmlform iframe image() images index java javascript javascripts jawascriptruntimeerror jquery jsp listbox maps marquee masterpage menu microsoft mimic mp3 mp4 offline onmouseover parameters php player post problem programming prototype rating redirect regex safari scale scriptlets search select size sources sql starrating text textarea toggle twitter validation variables w3c web website window windowofwords windowsxp xml xspf
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC