• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Projects
    • GStaticMap WP Plugin
  • Contact
  • Privacy Policy

Lorenz Blog

All About Web & Mobile Application Development

  • Featured Articles
  • Gadgets
    • Android
    • Blackberry
  • Programming
    • Android
    • PHP
    • Java Script
    • MySQL
    • Postgresql
    • Flex
    • Web
  • Software
    • Mac OS
    • Windows
    • Linux
  • Web
You are Here » Home >> Information Technology >> Programming >> Java Script >> How to Create Flash Like Image Slideshow with JavaScript

How to Create Flash Like Image Slideshow with JavaScript

December 10, 2009 by Lorensius Londa 6 Comments

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>

View live demo

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.

View live demo

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>

View live demo

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>

View live demo

Option descreveal is set to ‘ondemand‘ to display image description when the user mouse over it.

Facebooktwitterredditpinterestlinkedinmailby feather

Related posts:

  1. How to Create Image Overlay Using Javascript
  2. Free JavaScript Calendar Using Dynarch Calendar
  3. How to Create Scrollable Image Slider Using JavaScript
  4. How to Crop Image Using JavaScript and PHP

Filed Under: Information Technology, Java Script, Programming Tagged With: flash like slideshow, flash slideshow, image fadein, image slideshow, javascript, javascript fadein, javascript slideshow

About Lorensius Londa

Passionate web and mobile application developer. Co-founder of TRUSTUDIO, loves programming, Android, aviation, travelling, photography, coffee and gym mania.

Reader Interactions

Comments

  1. sasi says

    July 7, 2010 at 2:26 pm

    thanku so much.

    very usefulcode. thanu

    Reply
  2. ravi bhushan says

    November 30, 2011 at 1:36 pm

    Thanks a lot to share this content!

    Reply
  3. Guillermo says

    February 13, 2012 at 1:36 am

    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.

    Reply
  4. Smommamibleta says

    October 4, 2013 at 11:51 am

    http://www.kochiwinter.com/
    都城市の関之尾滝で古式ゆかしく繰り広げられた。香港でのトランジットで利用しました空港からの送迎があり、月曜定休ではないお店を希望します。?

    Reply
  5. ThesFoeddef says

    November 8, 2013 at 8:50 pm

    にピッタリガジェット通信コーチ バッグ アウトレット『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.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About Me

A husband, father of two, passionate software developer, diy lover and home baker who loves to learn new things. Read More…

  • Facebook
  • GitHub
  • Google+
  • Instagram
  • Twitter
  • YouTube

Featured Articles

How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Blue Bamboo P25 Printer Android Demo Application With Source Code

Simple JSON RPC Client for Android

How to Send Message to Google Cloud Messaging (GCM) Server Using JSON and PHP

Footer

Recent Comments

  • Aditya Dabas on About
  • Ayten Göksenin Barutçu on How to Make Android Map Scrollable Inside a ScrollView Layout
  • mang jojot on About
  • Hussain on How to Programmatically Scan or Discover Android Bluetooth Devices

Recent Posts

  • How to Fix Blank Screen on WordPress Add/Edit Post Page
  • How to Programmatically Restart the ESP32 Board
  • How to Get Hardware Info of ESP32
  • How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Latest Tweets

To protect our users from spam and other malicious activity, this account is temporarily locked. Please log in to https://twitter.com to unlock your account.

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in