jQuery image slider with Lightbox – ion.imageSlider

Nice and powerful jQuery image slider plugin. Lightbox and skins support included!

Great jQuery image slider

jQuery Ion Image Slider is a customizable and touch-friendly jQuery slider plugin for creating pretty image sliders with Lightbox and Skin Support.

Key features:

– Lightbox supports keyboard controls with ESC, LEFT and RIGHT button

– Cross-browser: Google Chrome, Mozilla Firefox, Opera, Safari, IE (8.0+)

– Ion.Image Slider supports touch-devices (iPhone, iPad, etc.)

– Ion.Image Slider freely distributed under terms of MIT licence

jQuery image slider - ion.imageSlider
jQuery image slider – ion.imageSlider

How to use it?

Generally it’s simple – you need few small steps.

Prepare images

Thumbnails must be the same height to make slider work correctly. E.g. in the attached skins, the height of each thumbnail is 264px, width has no importance. If you want to change this value, you will also need to change the height of the slider in the CSS-skin file.

Import libraries:

– jQuery

– ion.imageSlider.min.js

CSS:

– normalize.min.css – desirable if you have not yet connected one
– ion.imageSlider.css
– ion.imageSlider.skinName.css

Skin image:

– iis-skinName-skin-preloader.gif – preloader

– iis-skinName-skin-preloader.png – skin sprite

Then, 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 jQuery image slider:

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

Or initialize slider with custom settings:

$("#mySlider").ionImageSlider({
    // text near zoom icon; set "", if not needed
    zoomText: "Zoom...",

    startFrom: 0,  // # of start picture
    slideShow: true,  // enable slide show

    // pause between picture change (if slide show is on)
    slideShowDelay: 7
});

Skins

You can set one of prepared skins.

jquery-image-slider-ion2

Project homepage:

http://ionden.com/a/plugins/ion.imageSlider/en.html

GitHub:

https://github.com/IonDen/ion.imageSlider

See also:

JCoverflip – jQuery image slider

Blueberry image slider plugin

jq-tiles Slideshow – a plugin with cool transition effects

Skitter – multiple style slideshow

Enjoy!

Share:Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1