JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Nano Gallery

    Github

    image gallery simplified - jQuery plugin. Touch enabled, responsive, justified/cascading/grid layout and it supports pulling in Flickr, Google Photos and self hosted images.
    Filed under  › 

    • 🔾30%Overall
    • ★438
    • ⏳35.1 days
    • 🕩101
    • 👥7

    nanoGALLERY - image gallery for jQuery





    nanoGALLERY's successor, is available: nanogallery2

    nanogallery2

    Please note that nanoGALLERY is no more maintained. Please switch to nanogallery2.





    Image gallery simplified.

    Touch enabled, fully responsive, justified/cascading/grid layout and supporting cloud storage.

    Featuring multi-level navigation in albums, combinable hover effects on thumbnails, responsive thumbnail sizes, multiple layouts, slideshow, fullscreen, pagination, image lazy load, themes, deep linking, customizable, i18n, and pulling in Flickr or Picasa/Google+/Google Photos photo albums among others.

    Usage can be as easy as:

        jQuery('#elt').nanoGallery({
        kind : 'picasa',
        userID : 'YourUserID'
    });

    View ChangeLog

    Documentation, Demonstrations and Tutorials

    Visit the nanoGALLERY homepage: http://nanogallery.brisbois.fr

    Animation
    Screenshot1 Screenshot2 Screenshot3

    Package managers

    Bower: bower install nanogallery
    npm: npm install nanogallery

    Usage example with images from a Flickr account

    Include JS and CSS files

    <!-- Add jQuery library (MANDATORY) -->
<script type="text/javascript" src="third.party/jquery-1.7.1.min.js"></script> 

<!-- Add nanoGALLERY plugin files (MANDATORY) -->
<link href="css/nanogallery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.nanogallery.js"></script>

    Create a container

    Put a <DIV> element in the <BODY> of your HTML. This DIV is the placeholder for the gallery.

    <div id="nanoGallery1"></div>

    Initialize the script

    jQuery(document).ready(function () {
    jQuery("#nanoGallery1").nanoGallery({
        kind:'flickr',
        userID:'34858669@N00'
    });
});

    License

    nanoGALLERY is licensed under CC BY-NC 3.0.
    Only for personal, non-profit organizations, or open source projects (without any kind of fee), you may use nanoGALLERY for free.

    Requirements

    • Javascript must be enabled
    • jQuery 1.7.1

    Thanks

    Testing services provided by BrowserStack

    Show All