Ion.Image Slider is a jQuery image lightbox slider that supports skins. Ion.Image Slider is nice and powerful slider for images and lightbox at once. Lightbox supports keyboard controls with ESC, LEFT and RIGHT button. Come up with cross-browser support Mozilla Firefox, Google Chrome, Opera, IE(8.0+), Safari. Ion.Image Slider supports touch-screen devices like iPhone, iPad, etc. Make sure to use Ion.Image Slider freely distributed under terms of MIT licence for your projects and on your websites.

How Should you Work with Ion.Image Slider

Thumbnails must have the same height to make slider work correctly. I mean to say that in the attached skins, the height of each thumbnail is 264px, and the width doesn’t matter. If you want to change this value, you will have to change the height of slider from the CSS-skin file.

ION IMAGE SLIDER – JQUERY IMAGE LIGHTBOX SLIDER WITH SKINS

How Does this Script Work

Load these files in the <head> section
ion.imageSlider.min.js
normalize.min.css
ion.imageSlider.css
ion.imageSlider.skinName.css

Don’t forget about skin image

  • iis-skinName-skin-preloader.png – skin sprite
  • iis-skinName-skin-preloader.gif – preloader
  • Or use included PSD file and draw your own skin
  • You can generate preloaders here

Create gallery with the group of links

<div class="ion-image-slider" id="mySlider">
    <a href="link to large image 1"><img src="link to thumbnail 1" data-caption="Image name, if have one" /></a>
    <a href="link to large image 2"><img src="link to thumbnail 2" /></a>
    ...
    <a href="link to large image N"><img src="link to thumbnail N" data-caption="One more name" /></a>
</div>

Initialize slider

$("#mySlider").ionImageSlider();

Or initialize slider with custom settings:

$("#mySlider").ionImageSlider({
 zoomText: "Увеличить", // text near zoom icon; set "", if don't need
 startFrom: 0, // # of start picture
 slideShow: true, // enable slide show
 slideShowDelay: 7 // pause between picture change (if slide show is on)
});

Download Ion.Image Slider from GitHub