Scriptaculous Slideshow for Blogs and Websites

by Dev Duff on June 18, 2009

Scriptaculous Slideshow

Scriptaculous Slideshow is a popular web 2.0 Java script package to produce cool image slideshows on websites and blogs. The slideshow offers a great way to highlight photos and images on websites and can be integrated easily on websites and blogs. script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.

Scriptaculous Slideshow Tutorial

  1. Introduction to Scriptaculous slideshow javascript library.
  2. Common questions related to the usage of Scriptaculous slideshow.
  3. Instructions and links to download the Scriptaculous Slideshow package.
  4. Introduction to files included in the Scriptaculous slideshow package.
  5. Customized CSS Code to display images properly on your blog/website.
  6. Instructions to call the Scriptaculous javascript library files.
  7. Instructions to insert HTML code in your web page(s).
  8. Instructions to change slideshow image timings.
  9. Live example of the Scriptaculous slideshow.
  10. Credits & Appreciation for programmers.
  11. Script.aculo.us Reference Books.
  12. Need assistance with installation?

XSitepro

Introduction to Scriptaculous Slideshow

Script.aculo.us is a set of JavaScript libraries to enhance the user interface of web sites. It provides an visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based auto-completion, in-place editing, sliders) and more.

Scriptaculous Slideshow Questions

Scriptaculous slideshowThis scriptaculous slideshow tutorial will answer these questions:

  • Can I use Scriptaculous slideshow on any website?
  • Do I need to program the libraries or the codes?
  • Can I use Scriptaculous slideshow anywhere on my website?
  • How can I change Scriptaculous slideshow settings?
  • How can I change image sizes in the slideshow?
  • Where can I download the complete Scriptaculous slideshow package?
  • How can I control the slideshow image rotation timings?

And a number of other questions are answered in this tutorial. The Scriptaculous slideshow javascript library  is released under the MIT license. Please read the license to familiarize yourself with the terms and conditions of the usage of this script.

Scriptaculous Slideshow Download Site

Scriptaculous slideshow javascript libraries can be downloaded at http://script.aculo.us/ in a ready to go package (zip) and can be used on any website/blog within minutes. You just need to know basic html and css functions to integrate this cool slideshow on your portal.

Download the package: http://script.aculo.us/

Scriptaculous Slideshow Package

JavaScript Library Files:

effects.js
prototype.js
scriptaculous.js
simple-slide-show.js

Other files in the package:

index.html
Images folder with images.

The index.html file includes all the coding and CSS that is required to display the web 2.0 slideshow on your webpages. All you need to do is just copy the CSS code and paste it in your CSS file and copy/paste the html codes and in your webpage. You are done!

NOTE: Please create new folders ‘js’ and ‘images’ for uploading library files and slideshow image files to your webserver. You can store these files anywhere you wish, just need to make sure that you use correct path to the files while inserting codes in your webpages.

Customized CSS Code

#slide-images {
	position:absolute;
	display:block;
	margin:0px;
	padding:0px;
	width:318px;
	height:221px;
	right:0;
	top:0;
}
#slide-images li {
	position:absolute;
	display:block;
	list-style-type:none;
	margin:0px;
	padding:0px;
}
#slide-images li img {
	display:block;
	border: 0;
}

The CSS code you are looking at is a slightly modified version of the original CSS code that is included in the index.html file of the Scriptaculous slideshow package.

Call to Scriptaculous Slideshow JavaScript Library Files

<script src="http://www.domain.com/js/prototype.js" type="text/javascript"></script>
<script src="http://www.domain.com/js/scriptaculous.js" type="text/javascript"></script>
<script src="http://www.domain.com/js/simple-slide-show.js" type="text/javascript"></script>

Copy paste this simple code within the <head> </head> part of your website page(s) on which you wish to display the slideshow. If you wish to display the slideshow on all pages of your website, you can simply paste this code in the Header (header.php) File of your website/blog.

NOTE: Please use exact paths to files. For eg., http://www.domain.com/js/prototype.js

HTML Code to display Scriptaculous Slideshow

<div id="slide-show">
<ul id="slide-images">

<li><a href="http://www.domain.com/target-link-1">
<img src="http://www.domain.com/images/image-one.jpg" alt="Target Link 1" />
</a></li>

<li><a href="http://www.domain.com/target-link-2">
<img src="http://www.domain.com/images/image-two.jpg" alt="Target Link 2" />
</a></li>

<li><a href="http://www.domain.com/target-link-3">
<img src="http://www.domain.com/images/image-three.jpg" alt="Target Link 3" />
</a></li>

<li><a href="http://www.domain.com/target-link-4">
<img src="http://www.domain.com/images/image-four.jpg" alt="Target Link 4" />
</a></li>

<li><a href="http://www.domain.com/target-link-5">
<img src="http://www.domain.com/images/image-five.jpg" alt="Target Link 5" />
</a></li>

<li><a href="http://www.domain.com/target-link-6">
<img src="http://www.domain.com/images/image-six.jpg" alt="Target Link 6" />
</a></li>

</ul>
</div>

You need to locate that spot where you wish to display your images. You should also know the size of your images so that you can update same in the CSS code. For this blog, I’m using 318 x 221 pixel images and I have the same mentioned in the CSS code. In order to use a different size for your slideshow images, you just have to tweak the CSS code.

NOTE: Please use exact paths to files. For eg., http://www.domain.com/images/image-one.jpg

Scriptaculous Slideshow Image Timings

In order to toggle the display time of images, you need to change the slideshow image display timing in the scriptaculous.js file:

Open scriptaculous.js file from the ‘js’ folder and change the var delay time from 1000 to anything you like. I have changed it to 3000 in order to display each image for 3 seconds.

var delay = 3000;
var start_frame = 0;

Credits & Appreciation

Scriptaculous programmers have worked hard to design this awesome slideshow and have released it under the MIT License. If you really loved this script, consider a small donation to appreciate Scriptaculous Programmer’s work. A small donation is always encouraging to the programmers so that they create more such cool scripts in future. Please visit Scriptaculous website to appreciate the work.

Scriptaculous Reference Books

You can learn these javascript libraries and learn how to modify them for your projects with the help of these cool books:

Prototype and Script.aculo.us Book Practical Prototype and Script.aculo.us Book

Need assistance with installation?

If you need any assistance with installing the Scriptaculous slideshow, I can perhaps help you with it. You can see the slideshow in action at the top right side of this blog. I can create a custom css, insert bigger or small pictures, link pictures/images to various parts of your website and anything that you want me to do with the Scriptaculous slideshow. Please drop me a comment below, I will get back to you in no time.

Are you using Scriptaculous slideshow on your website?

If you have any better tips to play around with the scriptaculous slideshow, please feel free to post a comment below. You can explore other wordpress tutorials that may interest you or help you in one way or the other.
Thankyou for reading this article!

This post was written by...

– who has written 305 posts on Dev Duff.

Contact the author

{ 24 comments… read them below or add one }

Naomi

Excellent!
This is the best tutorial I have seen in weeks. I needed help with integrating the scriptaculous slideshow in our upcoming project and was unable to get it working. Figured the simple mistake was that we were not providing complete path to the files. Only after reading this tutorial we figured what we were doing wrong. Provided exact paths to files & images and it is working like a charm.
Thankyou so much for writing this awesome tutorial and helping us out, many hours saved!
Naomi.

Reply

Roger White

That’s a very very good tutorial. Perhaps the best I have came across. Dev, I’m a non-technical person and I’m running a custom designed website. I’m finding a couple of problems with using the slideshow. Do you help webmasters with integrating the slideshow on their websites? I wouldn’t mind paying a nominal fee if you can help me with setting up the slideshow on my website. You have my email ID. Please reply at your earliest convenience. Thankyou for the help.
Roger White.

Reply

Dev Duff

Thankyou for the kind words guys. I’m happy to know you liked this tutorial.

@Naomi: I’m glad you got your slideshow worked out.

@Roger White: Glad to know you liked this tutorial. Although it is not tough to work out the slideshow, however, if it is just some error, I can help you for free. However, if you want me to do all the configuration and setup images, image links, etc. I can do that for a nominal fee. Please contact me through the contact form on this site and leave your contact details. I can call you or chat with you on IM. We can take things from there.

Regards,
Dev Duff.

Reply

Bonita

After searching without success for a looong time, I found your site and.. what a relief! It was so intuitive and I think I can get my site up and going. I’m not a webmaster, and code is foreign to me. I see the delay = 3000 in the scriptaculous.js file, but is there a code or setting somewhere to allow a longer transition between slides?

Thanks for any help you can provide, and thank you for this code.

Reply

Dev Duff

Hi Bonita,

Great to know you liked this Scriptaculous slideshow tutorial. The delay = 3000 is the timing in miliseconds (ms). Practically, it represents delay of 3 seconds between slides. You can change it to 5000 for 5 seconds, 6000 for 6 seconds, 10000 for 10 seconds and so on. The idea of setting the time for slides is to make sure that your audience can view the slides (images) and read information on them. So, test your slides after setting a time frame, can you read all the information on the images? If it is too fast or too slow, it will affect your audience’s experience with your website. If the timing is perfect, your website will look a lot more professional and informative. If it is just images with designs, you can set 3000 (3 seconds) as delay time but if the images have deals or information on them, you may like to set 5000 (5 seconds) or more so that your audience/visitors can read the deals/information and take advantage of the offers. Hope this answers your question.

Regards,
Dev.

Reply

Bonita

I have the web site up .. but it’s not finished. Again, I’m not at all familiar with javascript. Do you notice that when the page first loads (using Internet Explorer) it flickers? Is there code that can be added to prevent this?

Reply

Dev Duff

Hi Bonita,

I checked your website soaringhawkranch.com with Internet Explorer 8 and did not notice any flickering at all. Although I didn’t notice it but many people are discussing this issue on forums and other places on the internet. It could be quite possible, with different IE versions, javascript may behave differently. Please search on Google with this keyword: scriptaculous slideshow flickering and you will see many people discussing this issue. I’m not sure why that happens and how to get rid of it, yet. I will research on this and find out what can be done. A new post coming shortly to overcome the flickers in scriptaculous slideshow.

Dev.

Reply

Bonita

Thanks, Dev.

Reply

Dev Duff

Hi Bonita,

I have just finished writing a tutorial to the Scriptaculous slideshow flickering problem. Here is the new article .. Slideshow flicker solution
Hope you find this tutorial helpful.

Regards,
Dev.

Reply

Brian

Just downloaded the files but there is no trace of
“simple-slide-show.js” in the bundle. All the others are there.Any suggestions?

Reply

Dev Duff

Hi Brian,
I wrote this tutorial in June 2009 and there have been many changes in the Scriptaculous slideshow core files since then. I wanted to write a new tutorial, however, I will write one as soon as the time allows. But if there is any specific help you need, I will be happy to write an article. Please let me know.
Dev.

Reply

Margo

I have read many explanations about script, but this one remains the most intuitive. It clarified me some things that always tortured me when I have to install it properly, especially with IE.

Reply

Anna

This slide show is beautiful and very simple. Thank you for the script. I just have one question. I need to add a control to it, so that upon pressing a button, the user can jump ahead continuously to the next slide. I’ve tried adding a very simple control with:

$(‘#slideshow-next’).click(slideNext);
function slideNext() {
clearTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
fadeInOut();
setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}

but this seems to negate the automatic timing, and doesn’t make the button function either.

Any ideas?

Reply

Brad

Hi, I found this code and I think it uses scriptaculous. My question is…do I just need to make calls to the js files in the head section to get it to run?

start_slideshow(1, 3, 6000);
function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade(‘slideshow’ + frame);
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
setTimeout(“Effect.Appear(‘slideshow” + frame + “‘);”, 1000);
setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 1000);
})
}

Reply

Subhana

Superb. The article on this kind and I agree with Margo comments.

Reply

zip

This is EXACTLY what I think I’m looking for. But, before taking the time to implement the code… can I see a demo? Thanks so much.

Reply

Katy

Hi,

Is there a way to use this with different sized images? I’ve got images that are either going to have a width of 300px or a height of 300px depending on whether they’re landscape or portrait. At the moment it fade in and out ok but if the image behind is bigger you see it for a second fully opaque before it disappears. Is there a way around this?

Thanks
Katy

Reply

Dev Duff

Hello Katy,

Yes, different size images can be used. The flickering problem can be sorted by rapping up the code between a new div. Please read this article, I’m sure it will help: http://www.devduff.com/wordpress/scriptaculous-slideshow-flickering-solution.php

Please let me know if there’s anything I can help with. I’ll be happy to assist.

Regards,
Dev.

Reply

Jim

Is there a scriptaculous slideshow? I see none in the documentaton or downloaded libraries. I am now assuming I will need to build it using the various effects that are in the libraries. Any help would be great.
thanks.

Reply

Gina

Thanks for this, it’s great.

I am having one weird issue though, not really a flicker, but…
I’ve pre-cached all of the images, but when navigating to the page for the first time, OR refreshing the page, the last image of the slide show briefly displays before the slide show begins. Even if the page has already been visited and cached. So it looks like a like a flash of an image.

Please check it out here:
http://sgengineeringinc.com/AboutUs

Any insite? Thanks in advance!

Reply

Gina

I had to change the slide show to mootools. But I think it had something to do with setting the images to 0 opacity if they weren’t the first image to be displayed. Maybe something to look into. I’m a real novice, so I did not know how to do it.

Thanks anyway and thanks again for this great script!

Reply

guytoon

Great tutorial! I have one problem in that when you download Scriptaculous there is no simple-slideshow.js file in the directory

Kind regards

guytoon

Reply

Dev Duff

@guytoon: Sorry buddy, this is an old article and when I wrote this article, there used to be the simple-slideshow.js file in the Scriptaculous package. However, if you need any help, I can download the latest package and see whats included in the latest version.

Reply

Dev Duff

To Everyone: I removed the slideshow from this blog months ago. Gotta keep up with the speed of pages, Google Bot loves that! But if you need urgent help, I would love to assist you, just ask.

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post: