How to Create Flash Like Image Slideshow with JavaScript
Home » Information Technology » How to Create Flash Like Image Slideshow with JavaScriptIn 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.
Related post:
3 Responses to “How to Create Flash Like Image Slideshow with JavaScript”
Leave a Reply
-
Subscribe in a reader
Atom Feed URL
thanku so much.
very usefulcode. thanu
[...] Creating a flashy image slideshow with IE Transitions 8. Animated JavaScript Slideshow – 5KB 9. How to Create Flash Like Image Slideshow with JavaScript 10. Build a Dynamic Menu in JavaScript 11. Interactive Forms with Javascript / HTML Tutorial 12. [...]
Thanks a lot to share this content!