Skip to content


Subversion checkout URL

You can clone with
Download ZIP
jQuery Image Gallery is an extension to the Dialog component of jQuery UI, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.
JavaScript HTML CSS
Branch: master

jQuery Image Gallery


jQuery Image Gallery Demo


jQuery Image Gallery displays images with the touch-enabled, responsive and customizable blueimp Gallery carousel in the dialog component of jQuery UI.
It features swipe, mouse and keyboard navigation, transition effects and on-demand content loading and can be extended to display additional content types.


Copy js/jquery.image-gallery.min.js to your website.

Add the following HTML snippet to the head section of your webpage:

<link rel="stylesheet" href="//" id="theme">
<link rel="stylesheet" href="//">

Add the following HTML snippet with the dialog and embedded Gallery widget to the body of your webpage:

<!-- The dialog widget -->
<div id="blueimp-gallery-dialog" data-show="fade" data-hide="fade">
    <!-- The gallery widget  -->
    <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>

Include the following scripts at the bottom of the body of your webpage:

<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
<script src="js/jquery.image-gallery.min.js"></script>

Create a list of links to image files with the attribute data-dialog (optionally with enclosed thumbnails) and add them to the body of your webpage:

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


For information regarding Keyboard shortcuts, Gallery Options, API methods, Video Gallery setup, Gallery extensions and Browser support, please refer to the blueimp Gallery documentation.



Released under the MIT license.

Something went wrong with that request. Please try again.