Animated JavaScript Slideshow

JavaScript Slideshow This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. This script was built ground-up and will soon be included at scriptiny where all my scripts will be added as they are updated, debugged and incorporated in the new TINY namespace. I will also document the scripts more thoroughly and publish multiple examples. I will continue to publish scripts there and support as I have time via the new community forum. I will try and post more frequently here on a wide range of web development related topics. Here is an example of the markup to build a slideshow…

  • Image One

    photos/image-one.jpgLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

    Image One

  • Image Two

    photos/image-two.jpgLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.

    Image Two

Each “li” above represents an image. The “h3″ content becomes the title for the image and the “p” the description. The “span” content is the path to the fullsize image. If you want to link the image wrap an “a” tag around the “img” tag which is the thumbnail image. The following are the parameters that can be set on the object… more complete documentation will follow soon. Default values are displayed as (10) and recommended values as [1-20]. Images imgSpeed = int; (10) navOpacity = int; (25) navHover = int; (70) letterbox = “string”; (#000) required color for letterbox on portrait images link = “string”; class name for link hover state Auto Slideshow auto = boolean; (false) speed = int; (10) Information Dialog info = boolean; (true) infoID = “string”; required for information dialog infoSpeed = int; (10) Thumbnail Slider thumbs = “string”; id of thumbnail slider, disabled if not set scrollSpeed = int; [1-20] (5) thumbOpacity = int; [0-100] (70) active = “string”; required for thumbnail active border spacing = int; (5) spacing between thumbnails left = “string”; id of left navigation link, required for slider right = “string”; id of right navigation link, required for slider Here is an example calling the script… The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder). This script has been tested in Firefox, Internet Explorer, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects under the creative commons license and is offered AS-IS, NO FREE SUPPORT PROVIDED.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: