Beautiful Slideshow (Recomended)

Zoom Slider - A Javascript Slideshow

• Pure Javascript (11KB). No jQuery, No flash.
• HTML captions
• Zooming effects
• Integrated thumbnail images
• Built-in navigation control
• Easy to use and customize
• Supported by all major browsers
  IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
• License: US$20.00

Zoomslider is a great slideshow for use in the office or hotel website. I have used it on the website http://www.leconcordehotels.com/, other than produces display a good picture, you can see also the changes I made ​​to the hotel website.

Here's Zoomslider Orginal :

and here's Zoomslider after edited with me :

You can try it for your website, download trial script here

Direction :

1. Download the demos (source code included) by clicking the above Download button.
   The source code is composed of three parts: HTML(demo1.html, demo2.html), CSS(zoomslider.css), and Javascript(zoomSlider.js).
2. Choose an appropriate demo in the downloaded package and put the HTML code and CSS/Javascript file links into your own page
3. Customize the zoom javascript slider by changing the zoomSliderOptions in the Javascript file:
   var zoomSliderOptions =
   

   {
   
             sliderId: "zoom-slider",
   
             slideInterval: 5000,
   
             autoAdvance: true,
   
             captionOpacity: 0.5,
   
             captionEffect: "rotate",
   
             thumbnailsWrapperId: "thumbs",
   
             thumbEffect: 0.5,
   
             license:"mylicense"
   
   

   };
   • sliderId: the zoom slider id that you specified in the slider's HTML code
   • slideInterval: the duration that each slide stays in milliseconds
   • autoAdvance: either true or false. Set it to false if you prefer manual advance
   • captionOpacity: a value between 0 - 1 will give the caption a semi-transparent background. The larger the value, the less transparent it is.
   • captionEffect: "rotate", "fade" or "expand". Please play with the demos to see their exact effects.
   • thumbnailsWrapperId: The wrapper id of your thumbnail images. Ignore it if you don't have thumbnails like the demo 2.
   • thumbEffect: thumbnail effect: 1 for grayscale, 0 for non-effect, 0.5 for blurring effect (actually you can set it any value between 0 and 1 which will be the opacity value)
   • license: the place to put your license.
4. Setting the zooming effect:
   Set the slider width and height to be smaller than the size of the images, using the CSS setting:
   #zoom-slider { width:840px;height:420px;/* Make it smaller than your images for zooming effect */ }
   
   How to change the image zooming speed?
   
   • adjust the slider width and height
   • or: change the zoomSliderOptions slideInterval value in the Javascript file
   • Bigger size difference or smaller slideInterval = faster zooming speed
   • The slider size(width by height) doesn't have to be proportional to the size of the images.
   • It is recommended to use the same size images for the slider.
5. If zooming effect is not desired, you can set the slider width or height to be the same as the image size by the CSS setting as mentioned above.
6. There is a built-in navigation control (see demo 2). You can refine its looks and positions by tweaking the CSS and the graphics bullets.png. If you need more navigation controls such as the previous, next, play, and stop buttons in the demo on this page, you can refer to the code in the downloaded demo1.html. They are fully customizable.
   
7. License: A license is required for using the zoom slider. Otherwise it may not work properly on the production server.
   
   • The license entitles a website to use any or all of Menucool sliders (jQuery Slider, Thumbnail Slider, JavaScript Image Slider, Content Slider, and Zoom Slider)
   • The license is valid for one site domain and all its sub-domains across the site
   • The license is valid forever with no requirement to renew
   • The license will be used to compare with your domain name on the browser's address bar for verification. There is no license check made to other places.
   When you have acquired the license, you can use Notepad to open the zoomSlider.js file, and replace the license value with yours.
   For example: license: "abcde"  (Note: there is no comma after the license key)
   
   Price: US$20.00.    Buy Now