Demos: 12

Zoom Slider - A Javascript Slideshow

Download   Release v2014.1.6
(Demo & source code)

  • Pure Javascript (11KB). Non-jQuery, Non-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 Fee: $20.00
    About 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);
    Either true or false. Set it to false if you prefer manual advance. "rotate", "fade" or "expand". Test them with a demo to see their effects. The wrapper id of your thumbnail images. Ignore it if you don't have thumbnails like the demo 2.

    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 at least 160px smaller (in either width or height) than the actual size of the images through the CSS setting:

    #zoom-slider { width:840px;height:420px; }
    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 pager (see demo 2). You can refine its look and position 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 of demo1.html in the download package. They are fully customizable.

  7. License