Nice image slider with lightbox and skin support
CSS JavaScript
Latest commit 14c2f63 Nov 5, 2015 @IonDen Update readme
Permalink
Failed to load latest commit information.
PSD Slider release Jun 27, 2013
_tmp Logo added Sep 19, 2015
css Slider release Jun 27, 2013
img Slider release Jun 27, 2013
js Slider release Jun 27, 2013
history.md Logo added Sep 19, 2015
ion-imageSlider.jquery.json Slider release Jun 27, 2013
readme.md Update readme Nov 5, 2015
readme.ru.md Update readme Nov 5, 2015

readme.md

ion.imageSlider

English description | Описание на русском

jQuery image slider with lightbox and skin support.


Description

  • Ion.ImageSlider — nice and powerful image slider and lightbox at once.
  • Lightbox supports keyboard controls with ESC, LEFT and RIGHT button.
  • Crossbrowser: 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.

Dependencies

Preparing Images

Thumbnails must be the same height to make slider work correctly. For example, 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.

Using script

Import this libraries:

  • jQuery
  • ion.imageSlider.min.js

And CSS:

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

Don't forget about skin image:

  • iis-skinName-skin-preloader.gif - preloader
  • iis-skinName-skin-preloader.png - skin sprite
  • 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)
});

Settings

Property Default Description
zoomText "zoom" Optional property, set custom text near zoom icon or remove it
startFrom 0 Optional property, set slider start image
slideShow true Optional property, enable slide show
slideShowDelay 7 Optional property, pause between picture change (if slide show is on) in seconds

Update history


Support Ion-series plugins development: