Jump to content

image slider with captions


fife

Recommended Posts

Hi.  Completely new to Java script this day!  I have been looking for a plugin image slider with captions for my site.  I found a very simple to use one but for some reason it does not work.  I have spent hours now reading the code to see what the error is but I cant find it.  Can anybody help.  Here is the code.....


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
var SlideShowSpeed = 3000;


var CrossFadeDuration = 3;

var Picture = new Array(); 
var Caption = new Array(); 



Picture[1]  = 'images/york_road/first_slide.jpg';
Picture[2]  = 'images/york_road/last_slide.jpg';



Caption[1]  = "This is the first caption.";
Caption[2]  = "This is the second caption.";


var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
</script>

Then The html

<table border=0 cellpadding=0 cellspacing=0>
  <tr>
       <td width=350 height=234>
    <img src=images/york_road/first_slide.jpg name=PictureBox width=350 height=234>
    </td>
  </tr>
  <tr>
     <td id=CaptionBox class=Caption align=center bgcolor=#6633FF>
    Kitchen Development.    </td>
  </tr>
</table>

and the css

.Caption {
font-family: Arial;
font-weight: bold;
color:      #000000;
}


Link to comment
https://forums.phpfreaks.com/topic/220250-image-slider-with-captions/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.