jQuery Image Slider With Lightbox and Skin Support - Ion Image Slider

File Size: 146 KB
Views Total: 4977
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Image Slider With Lightbox and Skin Support - Ion Image Slider

jQuery Ion Image Slider is a customizable and touch-friendly jQuery slider plugin for creating pretty image sliders with Lightbox and Skin Support.

How to use it:

1. Include jQuery library and jQuery Ion Image Slider plugin on the page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="ion.imageSlider.js"></script>

2. Include required css file on the page

<link rel="stylesheet/less" href="static/css/ion.imageSlider.css">

3. Don't forget to choose and include a skin css file

<link rel="stylesheet" href="static/css/skin1.css" id="skinCss">

4. Create the html

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

5. Call the plugin with options

    zoomText: "TEXT",                  // 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)

This awesome jQuery plugin is developed by IonDen. For more Advanced Usages, please check the demo page or visit the official website.