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.
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)
});
0 comments:
Post a Comment