Zoom Slider - A Javascript Slideshow

Download
includes source code and 2 demos
Release v.2013.3.18 image slider change Change Log:
  • v.2012.10.20
    Add built-in function: reload
  • v.2012.7.26
    Updated the license mechanism
  • v.2012.6.20
    Updated: improved performance and responsiveness
  • v.2012.4.19
    Fixed the bug that the slider doesn't work well in IE 9 and IE 10.

 


  • 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 cross browser compatible
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
  • License: US$20.00    Buy Now     About the license
  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" }; var zoomSlider=new ZoomSlider(zoomSliderOptions);
    • 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.

    Create Slider Dynamically

    If your slider HTML will not be available on page load, and you want to create the slider dynamically by a client event or Ajax, you can use the built-in reload function. For example, you can make the call below in the callback of your Ajax:
    zoomSlider.reload();
  4. Setting the zooming effect:

    To acquire the zooming effect, make sure the slider size is set smaller than the size of the images through the CSS setting:

    #zoom-slider { width:840px;height:420px; }

    How to change the image zooming speed? slideshow change
    • 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:
    License Fee: US$20.00
    Buy License Now
    • A license is required before the slider goes to production.
    • 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 issued on a per-domain basis (valid for one domain and its sub-domains)
    • The license is valid forever for future upgrades/releases with no requirement to renew
    • The acquired license should be set to the license property in the zoomSlider.js file. The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. So the JavaScript file itself will do the checking and no other services will be involved.

    When you have acquired the license, open the zoomSlider.js file with Notepad, and replace the license value with yours.

    var zoomSliderOptions = { ...... license:"mylicense" };
Demos: 12