Javascript image slideshow.

[MrMiyagi]

Hi,

I am trying to make a small image slideshow on my site. The problem is that I need there to be many slideshows rolling on the same page without interfearing with each others. I think I found a nice prototype driven script to do this, but I can not get it working.

http://www.icommunicate.co.uk/articles/all/simple_slide_show_for_prototype_scriptaculous_38/

From the above url I found this script:

<code>
/**
* Basic Slideshow App
*
* Plagerised from Tom Doyle by Isotope Communications Ltd, Dec 2008
*

http://www.tomdoyletalk.com/2008/10...y-slideshow-with-scriptaculous-and-prototype/

*
* Published [16/12/08]:
*

http://www.icommunicate.co.uk/articles/all/simple_slide_show_for_prototype_scriptaculous_38/

*
* Changes: Basically made it an object so that you can run multiple instances and so that
* it doesn't get interfered with by other scripts on the page.
*
* Have also added a few things, like "Captions" and the option of changing the
* effects..
*
* Example:
* Event.observe(window, 'load', function(){
* oMySlides = new iSlideShow({
* autostart : true // optional, boolean (default:true)
* start : 0, // optional, slides[start] (default:0)
* wait : 4000, // optional, milliseconds (default:4s)
* slides : [
* 'image-div-a',
* 'image-div-b',
* 'image-div-c',
* 'image-div-d'
* ],
* counter : 'counter-div-id', // optional...
* caption : 'caption-div-id', // optional...
* playButton : 'PlayButton', // optional (defaultlayButton)
* pauseButton : 'PauseButton', // optional (defaultauseButton)
* });
* oMySlides.startSlideShow();
* });
*
* To start the slideshow:
* oMySlides.startSlideShow();
*
* To skip forward, back, stop:
* oMySlides.goNext();
* oMySlides.goPrevious();
* oMySlides.stop();
*/

var iSlideShow = new Class.create();

iSlideShow.prototype = {

initialize : function (oArgs){
this.wait = oArgs.wait ? oArgs.wait : 4000;
this.start = oArgs.start ? oArgs.start : 0;
this.duration = oArgs.duration ? oArgs.duration : 0.5;
this.autostart = (typeof(oArgs.autostart)=='undefined') ? true : oArgs.autostart;
this.slides = oArgs.slides;
this.counter = oArgs.counter;
this.caption = oArgs.caption;
this.playButton = oArgs.playButton ? oArgs.playButton : 'PlayButton';
this.pauseButton = oArgs.pauseButton ? oArgs.pauseButton : 'PauseButton';
this.iImageId = this.start;
if ( this.slides ) {
this.numOfImages = this.slides.length;
if ( !this.numOfImages ) {
alert('No slides?');
}
}
if ( this.autostart ) {
this.startSlideShow();
}
},

// The Fade Function
swapImage: function (x,y) {
$(this.slides[x]) && $(this.slides[x]).appear({ duration: this.duration });
$(this.slides[y]) && $(this.slides[y]).fade({duration: this.duration });
},

// the onload event handler that starts the fading.
startSlideShow: function () {
this.play = setInterval(this.play.bind(this),this.wait);
$(this.playButton).hide();
$(this.pauseButton).appear({ duration: 0});

this.updatecounter();

},

play: function () {

var imageShow, imageHide;

imageShow = this.iImageId+1;
imageHide = this.iImageId;

if (imageShow == this.numOfImages) {
this.swapImage(0,imageHide);
this.iImageId = 0;
} else {
this.swapImage(imageShow,imageHide);
this.iImageId++;
}

this.textIn = this.iImageId+1 + ' of ' + this.numOfImages;
this.updatecounter();
},

stop: function () {
clearInterval(this.play);
$(this.playButton).appear({ duration: 0});
$(this.pauseButton).hide();
},

goNext: function () {
clearInterval(this.play);
$(this.playButton).appear({ duration: 0});
$(this.pauseButton).hide();

var imageShow, imageHide;

imageShow = this.iImageId+1;
imageHide = this.iImageId;

if (imageShow == this.numOfImages) {
this.swapImage(0,imageHide);
this.iImageId = 0;
} else {
this.swapImage(imageShow,imageHide);
this.iImageId++;
}

this.updatecounter();
},

goPrevious: function () {
clearInterval(this.play);
$(this.playButton).appear({ duration: 0});
$(this.pauseButton).hide();

var imageShow, imageHide;

imageShow = this.iImageId-1;
imageHide = this.iImageId;

if (this.iImageId == 0) {
this.swapImage(this.numOfImages-1,imageHide);
this.iImageId = this.numOfImages-1;

//alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)

} else {
this.swapImage(imageShow,imageHide);
this.iImageId--;

//alert(imageShow + ' and ' + imageHide)
}

this.updatecounter();
},

updatecounter: function () {
var textIn = this.iImageId+1 + ' of ' + this.numOfImages;
$(this.counter) && ( $(this.counter).innerHTML = textIn );
if ( $(this.caption) && ( oNewCaption = $(this.slides[this.iImageId]).down('.image-caption') ) ) {
$(this.caption).innerHTML = oNewCaption.innerHTML;
}
}
}
</code>

My problem is that I dont know how to get the slide show working on my site. Would be very helpful to see some working html/css/jscript sturctures.

I tried:

<code>

<div id="slideshow-container">

<ul id="slideshow">

<li id="slide-1" class="fade-box">
<a href="javascriptMySlides.goNext();">
<img src="projects/pic1.jpg" alt="" />

</a>
</li>

<li id="slide-2" class="fade-box">
<a href="javascriptMySlides.goNext();">
<img src="projects/pic2.jpg" alt="" />

</a>
</li>

<li id="slide-3" class="fade-box">
<a href="javascriptMySlides.goNext();">
<img src="projects/pic3.jpg" alt="" />

</a>
</li>

<li id="slide-4" class="fade-box">
<a href="javascriptMySlides.goNext();">
<img src="projects/pic4.jpg" alt="" />

</a>
</li>

<li id="slide-5" class="fade-box">
<a href="javascriptMySlides.goNext();">
<img src="projects/pic5.jpg" alt="" />

</a>
</li>
</ul>

</div>

<script type="text/javascript">
Event.observe(window, 'load', function(){

oMySlides = new iSlideShow({
autostart : true // optional, boolean (default:true)
start : 0, // optional, slides[start] (default:0)
wait : 4000, // optional, milliseconds (default:4s)
slides : [
'slide-1',
'slide-2',
'slide-3',
'slide-4'
],
// counter : 'slideshow-container', // optional...
// caption : 'caption-div-id', // optional...
// playButton : 'Play', // optional (defaultlayButton)
// pauseButton : 'Pause', // optional (defaultauseButton)
});
oMySlides.startSlideShow();
</script>

</code>

I dont need the stop, pause and goNext and goPrevious buttons. Just slideshows that scroll by themselves and loop forever. Thanks for all answers.

 

[Diancecht]

What problems are you having?

Cheers,
Dian

 

[MrMiyagi]

My problem is that this slideshow does not work. I only see the first picture, and it does not fade into another like it is supposed to. It should be able to show a picture for 2 second and transform into the nextone which it does not do..