Ion.ImageSlider

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

• jQuery 1.9+

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.

Import this 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

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)
});