Recent news

Friday, 3 June 2016

Touch Screen Enabled jQuery Image Gallery To Displays Images


 jQuery image gallery is used to display the images with touch functionality, responsive and customizable blue imp Gallery carousel in the dialog component of jQuery UI.  
                 
How To Use


1. Add the below library reference at header of the page

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/south-street/jquery-ui.css" id="theme">
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">


2. Now add the below html tag for next previous button of gallery

<div id="blueimp-gallery-dialog" data-show="fade" data-hide="fade">
    <div class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
        <div class="slides"></div>
        <a class="prev"></a>
        <a class="next"></a>
        <a class="play-pause"></a>
    </div>
</div>


3. Add the below reference in body of the page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="//github.com/blueimp/jQuery-Image-Gallery/blob/master/js/jquery.image-gallery.min.js"></script>


4 . Now add the below html coded with image

<div id="links">
    <a href="images/banana.jpg" title="Banana" data-dialog>
        <img src="images/thumbnails/banana.jpg" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple" data-dialog>
        <img src="images/thumbnails/apple.jpg" alt="Apple">
    </a>
    <a href="images/orange.jpg" title="Orange" data-dialog>
        <img src="images/thumbnails/orange.jpg" alt="Orange">
    </a>
</div>



Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles