Home » Web

Slide Ảnh Auto

Ultimate Fade-in slideshow (v2.1)

Author: Dynamic Drive

Note: Oct 6th, 09': Adds option to randomize display order of images, via new option displaymode.randomize

Description: This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features all rolled into one. Each instance of a fade in slideshow on the page is completely independent of the other, with support for different features selectively enabled for each slideshow. Here's a lowdown on the script's features:

Sleek fade in effect that has the current image fading over the previous one.
Ability to display images either as an automatic or manual slideshow. In manual mode you define your own "prev/next" controls to let the user go through the slides.
In automatic mode, slideshow can be set to stop rotating after x cycles.
Each slide can be optionally hyperlinked.
Each slide can have an optional description associated with it. Descriptions can either be set to show on demand (when the mouse rolls over the slide), or be always visible until explicitly dismissed.
Persistence of last viewed slide supported, so when the user reloads the page, the slideshow resumes from the last slide.
Slideshow automatically pauses onMouseover.

Rock on with the ultimate fade in slideshow script!

Demos:

-Straightforward, auto playing slideshow with no hyperlinking, descriptions etc.		A nice day to get the skates out and go ice skating. -Auto playing slideshow with all slides showing a persistent description.
There's nothing like a nice cold swim. -Auto playing slideshow with some slides hyperlinked and carrying a description, shown onmouseover.		A nice day to get the skates out and go ice skating. 1/4 -Manual slideshow with custom buttons and status control.

Directions

Simply add the below code inside the section of the page:

Select All

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  <script  type="text/javascript" src="fadeslideshow.js">  /*********************************************** * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library  (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script  and 100s more ***********************************************/  </script>  <script type="text/javascript">  var mygallery=new fadeSlideShow({  wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow  dimensions: [250, 180], //width/height of gallery in pixels. Should  reflect dimensions of largest image  imagearray: [   ["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing  next to the pool when the weather is hot."],   ["http://i29.tinypic.com/xp3hns.jpg",  "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to  explore these caves!"],   ["http://i30.tinypic.com/531q3n.jpg"],   ["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene  with everything changing colors."] //<--no trailing comma after very  last image element!  ],  displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},  persist: false, //remember last viewed slide and recall within same  session?  fadeduration: 500, //transition duration (milliseconds)  descreveal: "ondemand",  togglerid: "" })   var mygallery2=new fadeSlideShow({  wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow  dimensions: [250, 180], //width/height of gallery in pixels. Should  reflect dimensions of largest image  imagearray: [   ["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing  next to the pool when the weather is hot."],   ["http://i29.tinypic.com/xp3hns.jpg",  "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to  explore these caves!"],   ["http://i30.tinypic.com/531q3n.jpg"],   ["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene  with everything changing colors."] //<--no trailing comma after very  last image element!  ],  displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},  persist: false, //remember last viewed slide and recall within same  session?  fadeduration: 500, //transition duration (milliseconds)  descreveal: "always",  togglerid: "fadeshow2toggler" })  </script>

The above code references 1 external file plus 3 images as part of its interface. Download them below (right click, and select "Save As"):

fadeslideshow.js
(check inside fadeslideshow.js to ensure that the paths to these 3 images are correct)

Step 2: Then, insert the following sample HTML for 2 sample Fade In slideshows:

Mark up wise each Slideshow should just be an empty DIV on the page with a unique ID:

fadeshow1">

The DIV's ID value should match up with the value set in the option wrapperid in the code of Step 1 above. When the page loads, the script will load the gallery into this DIV.

That's it for installation! Time to take a look at all the available options at your disposal when initializing each instance of Fade In Slideshow on the page.

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Tags: Web

Tin liên quan

Social

Chuyên Mục

Bài Viết Mới

Bài viết hot

Nhận Xét

Bài viết ngẫu nhiên

Slide Ảnh Auto

Tin nổi bật