Scriptaculous Slideshow for Blogs and Websites

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?

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

This 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.devduff.com/js/prototype.js" type="text/javascript"></script>
<script src="http://www.devduff.com/js/scriptaculous.js" type="text/javascript"></script>
<script src="http://www.devduff.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.devduff.com/js/prototype.js

HTML Code to display Scriptaculous Slideshow

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

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

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

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

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

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

<li><a href="http://www.devduff.com/target-link-6">
<img src="http://www.devduff.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.devduff.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:

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!

Tags: Wordpress Tutorials