jGallery

Mobile friendly, flexible jQuery photo gallery with albums, preloader and swipe events v1.5.0 — updated: 2014-12-18

Demo & Customize Download

Why jGallery?

Getting started

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="./css/jgallery.min.css?v=1.5.0" />
    <script type="text/javascript" src="./js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="./js/tinycolor-0.9.16.min.js"></script>
    <script type="text/javascript" src="./js/touchswipe.min.js"></script> //for touch events
    <script type="text/javascript" src="./js/jgallery.min.js?v=1.5.0"></script>
    <script type="text/javascript">
    $( function() {
        $( '#gallery' ).jGallery();
    } );
    </script>
</head>
<body>

    <!-- For full-screen or standard mode -->
    <div id="gallery">
        <div class="album" data-jgallery-album-title="Album 1">
            <h1>Album 1</h1>
            <a href="images/large/1.jpg">
                <img src="images/thumbs/1.jpg" alt="Source: Pixabay.com"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" />
            </a>
            <!-- more albums -->
        </div>
        <!-- more images -->
    </div>


    <!-- For slider mode without links -->
    <div id="gallery">
        <img src="images/large/1.jpg" alt="Source: Pixabay.com" />
        <!-- more images -->
    </div>


    <!-- For slider mode with links -->
    <div id="gallery">
        <a href="http://yourlink">
            <img src="images/large/1.jpg" alt="Source: Pixabay.com" />
        </a>
        <!-- more images -->
    </div>

</body>
</html>