, , , ,

nanoGALLERY: Implement image gallery easily.

nanoGALLERY jquery plugin : Very easy to implement image gallery. It is touch enabled, responsive, fast and it supports cloud storage.

Featuring multi-level navigation in albums, lightbox, many hover effects on thumbnails, slideshow, fullscreen, pagination, image lazy load, themes, bootstrap compatibility, customizable, i18n, and pulling in Flickr/Picasa/Google+ photo albums among others.

Feature list

Spice up your Portfolio with eye-catching effects.

  • Image Gallery : Display thumbnails with title and description. Thumbnail size is configurable. Galleries are displayed with smooth animation. Support for pagination.
  • Integrated Lightbox : Images are displayed in full view via a modal popup window. Display images with title and description.
  • Hover Effects : Easy setup of thumbnail hover animation. Effects can be combined for more possibilities. 2D/3D effects available. Effects are touchscreen friendly.
  • Title and Description : Are displayed on thumbnails as well as on images. Support HTML tags.
  • Mobile Friendly : Touchscreen enabled and responsive.
  • CSS3 Acceleration : Support CSS3 acceleration on modern browser. Compatible with older browser too.
  • User Friendly : Easy to use. Support browser BACK button. Can be controlled using mouse, keyboard or gesture.
  • Multi-Level Navigation : Breadcrumb to support navigation in photo albums. Unlimited number of sub-levels.
  • Online Photo Storage : Display images stored in Picasa/Google+ and in Flickr. No need to upload images manually to your site. New published images are automatically displayed in the gallery.

Download: https://github.com/Kris-B/nanoGALLERY

Demonstration: https://nanogallery2.nanostudio.org/

Plugin homepage: https://nanogallery2.nanostudio.org/

Implementation:

1. Include JS and CSS files

<!-- Add jQuery library (mandatory) -->
<script type="text/javascript" src="third.party/jquery-1.8.2.min.js"></script> 
 
<!-- Add Transit plugin (optional - this is only required for some hover effects) -->
<script type="text/javascript" src="third.party/transit/jquery.transit.min.js"></script> 
 
<!-- Add Hammer.js plugin (optional - this is only required for gesture support) -->
<script type="text/javascript" src="third.party/hammer.js/hammer.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>

Example 1 : list of images using HREF attribute

<!-- First, write your HTML -->
<div id="nanoGallery">
    <a href="image_01.jpg" 
        data-ngThumb="image_01t.jpg"
        data-ngDesc="Description1">Image1</a>
    <a href="image_02.jpg" 
        data-ngThumb="image_02t.jpg" 
        data-ngDesc="Description2">Image2</a>
    <a href="image_03.jpg"
        data-ngThumb="image_03t.jpg"
        data-ngDesc="Description3">Image3</a>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    jQuery("#nanoGallery").nanoGallery({
        thumbnailWidth: 120,
        thumbnailHeight: 80,
        thumbnailHoverEffect:'borderLighter,descriptionSlideUp',
        itemsBaseURL:'http://brisbois.fr/nanogallery4/demonstration'
    });
  });
</script>

Example 2 : list of images passed to the script (API)

<!-- First, write your HTML -->
<div id="nanoGallery"></div>
<script type="text/javascript">
  $(document).ready(function(){
    jQuery("#nanoGallery").nanoGallery({
        thumbnailWidth: 120,
        thumbnailHeight: 120,
        items: [{
            src: 'image_01.jpg', // image
            srct: 'image_01t.jpg', // thumbnail
            title: 'image 1', // title
            description: 'Description 1' // description
        }, {
            src: 'image_02.jpg',
            srct: 'image_02t.jpg',
            title: 'image 2'
        }, {
            src: 'image_03.jpg',
            srct: 'image_03t.jpg',
            title: 'image 3'
        }],
        itemsBaseURL: 'http://brisbois.fr/nanogallery4/demonstration/',
        thumbnailLabel: {
            display: true,
            position: 'overImageOnBottom'
        },
        thumbnailHoverEffect:'borderLighter'
    });
  });
</script>

Example 3 : Google+ / Picasa photos

<!-- First, write your HTML -->
<div id="nanoGallery"></div>
<script type="text/javascript">
  $(document).ready(function(){
    jQuery("#nanoGallery").nanoGallery({
        kind: 'picasa',
        userID: 'xxx@gmail.com',
        album: 'xxxxxx',                //remove this line to display all the albums
        thumbnailWidth: 144,
        thumbnailHeight: 144,
        thumbnailHoverEffect:'borderLighter'
    });
  });
</script>

Example 4 : Flickr photos

<!-- First, write your HTML -->
<div id="nanoGallery"></div>
<script type="text/javascript">
  $(document).ready(function(){
    jQuery("#nanoGallery").nanoGallery({
        kind: 'flickr',
        userID: '34858669@N00',
        photoset:'72157594299597591',           //remove this line to display all the photosets
        thumbnailWidth: 125,
        thumbnailHeight: 125,
        thumbnailHoverEffect:'borderLighter,descriptionSlideUp'
    });
  });
</script>

Options:

Screenshots:

About me