In some cases on web application development, image slideshow is a nice option to display images in an interactive mode, which nowdays, could be done well using Adobe Flash. However, Flash has it’s own drawbacks such as it needs additional player plugin installed on the client browser and another extra size of swf file to be downloaded.
Another way for displaying image slideshow is by using Javascript which is more simple and easier to apply. In this tutorial, i will use Ultimate Fade-In Slideshow Javascript library from Dynamic Drive which can be downloaded here. It needs JQuery library that can be downloaded here.
To use Ultimate Fade-In Slideshow, simply include the two library files (jquery-1.3.2.min.js and fadeinslideshow.js) inside the HEAD section of the page and the code for displaying image slideshow itself. Below is the html template that used for entire examples in this tutorial. Replace the <!– insert example script below here //–> section with the code on each example.
Example HTML Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Image Slideshow With JavaScript</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/fadeinslideshow.js"></script>
<!-- insert example script below here //-->
</head>
<body>
<h2>Image Slideshow Without Description and Hyperlinking</h2>
<div id="slideshow"></div>
</body>
</html>
Example 1. Auto playing slideshow without description and hyperlinking.
<script type="text/javascript">
var gallery1 = new fadeSlideShow ({
wrapperid: 'slideshow',
dimensions: [300, 225],
imagearray: [
["http://londatiga.net/tutorials/fadeinslideshow/images/img01.png"],
["http://londatiga.net/tutorials/fadeinslideshow/images/img02.png"],
["http://londatiga.net/tutorials/fadeinslideshow/images/img03.png"]
],
displaymode: {type: 'auto', pause: 2500, cycles:0, wraparound: true},
persist: false,
fadeduration: 2500,
descreveal: 'ondemand',
togglerid: ''
})
</script>
line 2: create an instance of fadeSlideShow class with the following options:
line 3: wrapperid, the id of an empty div container on your page that will show the fade in slideshow images.
line 4: dimensions, dimension of the slideshow in the format [width, height] with pixels unit.
line 5: imagearray, an array containing the images you wish to show. The syntax is:
[“path_to_image”, “optional_url”, “optional_linktarget”, “optional_description”]
The path_to_image option is the path or url to your image,
The optional_url option is the url for hyperlinking,
The optional_linktarget option is the link target (open in the same window or new window),
The optional_description option is the description of your image
For image without hyperlinking and description, just define the path_to_image option and eliminate the other options
line 10: displaymode, the primary attributes of your slideshow. The syntax is:
{type:’auto|manual’, pause:milliseconds, cycles:0|integer, wraparound:true|false, randomize:true|false}
The type option is for auto slideshow or manual slideshow. If manual, you must define your own prev and next controls to let the user control the slideshow. See togglerid option below for more info.
The pause option when set to 0 will cause the slideshow to rotate perpetually in automatic mode, while any number larger than 0 means it will stop after x cycles.
The warparound option when set to false will disable the user’s ability in manual mode to go past the very first and last slide when clicking on the navigation links to manually view the slides.
The randomize option when set to true will shuffle the display order of the images, so they appear in a different order each time the page is loaded.
In the example above, the slideshow will auto run and pause 2500 miliseconds between slides. The images will appear in a different order every time the page is loaded.
line 11: persists, is a boolean variable that decides whether the slideshow should remember and recall the last viewed slide within a browser session when the page is reloaded.
line 12: fadeduration, the duration in miliseconds of the fade effect when transitioning from one image to the next.
line 13: descreveal, is the option for displaying image description if you define it. If set always, the description will be displayed persistently at the bottom of the image, and ondemand will display the description when user mouses over the image.
line 14: togglerid, is the option you used if you wish to create navigational controls that allow the user to explicitly move back and forth between slides.
Example2. Auto playing slideshow with all slides hyperlinked.
<script type="text/javascript">
var gallery1 = new fadeSlideShow ({
wrapperid: 'slideshow',
dimensions: [300, 225],
imagearray: [
["http://londatiga.net/tutorials/fadeinslideshow/images/img01.png", "http://www.panoramio.com/photo/25232721", "_new"],
["http://londatiga.net/tutorials/fadeinslideshow/images/img02.png", "http://www.panoramio.com/photo/25232985", "_new"],
["http://londatiga.net/tutorials/fadeinslideshow/images/img03.png", "http://www.panoramio.com/photo/25232048", "_new"]
],
displaymode: {type: 'auto', pause: 2500, cycles:0, wraparound: true },
persist: false,
fadeduration: 2500,
descreveal: 'ondemand',
togglerid: ''
})
</script>
On imagearray option, we define the the url for each image on the second option, and set _new value on the third option to open the url in new window.
Example 3. Auto playing slideshow with all slides showing a persistence description.
<script type="text/javascript">
var gallery1 = new fadeSlideShow ({
wrapperid: 'slideshow',
dimensions: [300, 225],
imagearray: [
["http://londatiga.net/tutorials/fadeinslideshow/images/img01.png", "", "", "Gas Station, Ende Flores"],
["http://londatiga.net/tutorials/fadeinslideshow/images/img02.png", "", "", "St. Michael Church"],
["http://londatiga.net/tutorials/fadeinslideshow/images/img03.png", "", "", "IPI Beach"]
],
displaymode: {type: 'auto', pause: 2500, cycles:0, wraparound: true },
persist: false,
fadeduration: 2500,
descreveal: 'always',
togglerid: ''
})
</script>
On imagearray option, we define the description for each image on the fourth option, left the second and third option empty.
Example 4. Auto playing slideshow with all slides showing description when user mouses over it.
<script type="text/javascript">
var gallery1 = new fadeSlideShow ({
wrapperid: 'slideshow',
dimensions: [300, 225],
imagearray: [
["http://londatiga.net/tutorials/fadeinslideshow/images/img01.png", "", "", "Gas Station, Ende Flores"],
["http://londatiga.net/tutorials/fadeinslideshow/images/img02.png", "", "", "St. Michael Church"],
["http://londatiga.net/tutorials/fadeinslideshow/images/img03.png", "", "", "IPI Beach"]
],
displaymode: {type: 'auto', pause: 2500, cycles:0, wraparound: true },
persist: false,
fadeduration: 2500,
descreveal: 'ondemand',
togglerid: ''
})
</script>
Option descreveal is set to ‘ondemand‘ to display image description when the user mouse over it.
by 
thanku so much.
very usefulcode. thanu
Thanks a lot to share this content!
Hi i got this error
————————————-
“missing : after property id ”
on line …
wrapperid: ‘slideshow’,
————————————-
I´ve made all the steps of this tutorial but i cant make it work, also i´ve donwloded the slide show js from here http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm please help.
http://www.kochiwinter.com/
都城市の関之尾滝で古式ゆかしく繰り広げられた。香港でのトランジットで利用しました空港からの送迎があり、月曜定休ではないお店を希望します。?
にピッタリガジェット通信コーチ バッグ アウトレット『Spy Net Secret 子どもまで楽しむことが出来るト通信編集部。その中でもスパイてみることグレゴリー リュックをよく見ていスパイグッズ。『Spy Net Secret Mission Video Watch』は、ちょっとゴツイただの時計……画、静止、密かに敵の情報を仕入れなもシンプルなり使いやすく、子どもから大人まで楽ているためりメモリーをボッテガ ヴェネタ 財布購入する必要属の変保存することができます。普通の腕時。http://www.thejohnslife.com/They would all become original and authentic. These days, there are many authorised dealers of Chanel who have started identifyingオロビアンコ バッグ メンズ their own websites for you to expand their business global. クロエ 財布 新作 2013These too could become a good option to consider, if they have good quality discount offers running in their stock.グレゴリー リュック However, with such sites, you will always need to do some background research everything ディーゼル バッグthere has to be at the Chanel online store for you.