Ajax Updates

BarackSlideshow – Tiny Lightweight Slideshow Script

Posted: 01 Dec 2009 07:26 AM PST

BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images.
Plugin Features

* Auto slideshow
* Support for slide-fade progression, random, slide left, slide right, slide bottom, slide top and fade transitions

Browser Compatibility
Tested in:
* Mozilla Firefox 2, 3
* MS Internet Explorer 6, 7, 8
* Opera 9+
* Apple Safari
* Google Chrome
How to use:
With a markup like this:

 <div id="slideshow">   <span id="loading">Loading</span>    <ul id="pictures">     <li><img src="../Source/images/cities/melbourne.jpg" alt="Melbourne" title="Melbourne" /></li>     <li><img src="../Source/images/cities/buenos_aires.jpg" alt="Buenos Aires" title="Buenos Aires" /></li>     <li><img src="../Source/images/cities/urubamba.jpg" alt="Urubamba" title="Urubamba" /></li>   </ul>    <ul id="menu">     <li><a href="../Source/images/cities/melbourne.jpg">Melbourne</a></li>     <li><a href="../Source/images/cities/buenos_aires.jpg">Buenos Aires</a></li>     <li><a href="../Source/images/cities/urubamba.jpg">Urubamba</a></li>   </ul> </div>

BarackSlideshow is initialized as follows:

 window.addEvent('domready', function(){     new BarackSlideshow('menu', 'pictures', 'loading', {transition: 'slide-left', auto: true}); });

Options
* transition (defaults to 'fade') Can be 'slide-left', 'slide-right', 'slide-top', 'slide-bottom', 'fade'
* auto (defaults to false) Whether to move from image to image automatically
* autostart (defaults to false) Whether to start slideshow automatically upon initialization
* autointerval (defaults to 2000) Interval time from image to image in ms
* tween (defaults to {duration: 700}) Options to pass to MooTools Fx.Tween, which takes care of image transitions.

Demo: http://devthought.com/wp-content/projects/mootools/barackslideshow/Demo/
Download: http://devthought.com/downloads/barackslideshow-latest.zip
Source: http://devthought.com/projects/mootools/barackslideshow/

Related Listings:

Javascript Image Slideshow Script Wizard Features: 5 different cross browser slideshow effects. Easy-to-configure. You can...
SlideShow Viewer Script Stylish gallery script with a ‘lightbox’ effect. Intuitive interface, it...
Slideshow for MooTools Script Slideshow 2! is a javascript class for Mootools 1.2 to...

bgStretcher – Backgrounds Stretcher using Jquery

Posted: 01 Dec 2009 06:52 AM PST

bgStretcher (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).
Features

1. Unobtrusive script, simple to setup
2. Works with all modern browsers
3. Supports single and multiple images

How to Use

1. Download bgStretcher script. The package already contains the jQuery framework.

2. Add the following code to your < head >…< /head > tag to connect jQuery framework, bgStretcher plugin and CSS. (Make sure paths to files are correct.)

 <script type="text/javascript" src="../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../bgstretcher.js"></script> <link rel="stylesheet" href="../bgstretcher.css" />

3. Use the following code to initialize the bgStretcher (see Options section below for details):

 <script type="text/javascript"> $(document).ready(function(){ //  Initialize Backgound Stretcher $(document).bgStretcher({ images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768 }); }); </script>

4. Assign the content of your page to a DIV with the following CSS styles (we used a DIV#page for this sample):

 #page { z-index: 2; position: relative; }

5. Insert content of your page inside this DIV:

 <body> <div id="page"> Your content goes here... </div> </body>

That's it Click the Demo button to see it in action.
Options
Configuration Option Default Value Description
imageContainer bgstretcher bgStretcher will automatically build structure for the images list in a DOM tree. This parameter is ID for the images holder. Try inspecting the tree with a FireBug to get an idea how it's constructed.
resizeProportionally true Indicates if background image(s) will be resized proportionally or not.
resizeAnimate false Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images empty An array containing list of images to be displayed on page's background.
imageWidth 1024 Original image's width.
imageHeight 768 Original image's height.
nextSlideDelay 3000 (3 seconds) Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed normal Numeric value in milliseconds or jQuery string value ('fast', 'normal', 'slow'). The parameter sets the speed of transition between images.
slideShow true Allows or disallows slideshow functionality.
Browser Compatibility