– Ion.Image Slider freely distributed under terms of MIT licence
How to use it?
Generally it’s simple – you need few small steps.
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.
– normalize.min.css – desirable if you have not yet connected one
– 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 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>
Initialize jQuery image slider:
Or initialize slider with custom settings:
// text near zoom icon; set "", if not needed
startFrom: 0, // # of start picture
slideShow: true, // enable slide show
// pause between picture change (if slide show is on)
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.