Ion.Image Slider – jQuery Image Lightbox Slider with Skins Support

July 19, 2013

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

Download Ion.Image Slider from GitHub

Muhammad Dilawar

Muhammad Dilawar is a WordPress developer and technical SEO specialist with over 12 years of experience building, optimizing, and maintaining websites. He specializes in WordPress, WooCommerce, server optimization, DNS, Cloudflare, website security, and performance improvements. Through Softstribe, he shares practical guides, tutorials, and industry insights based on real-world experience helping businesses grow their online presence.