nanoGALLERY jQuery plugin - API methods

API methods to handle user selections

by Christophe Brisbois

HTML

<link rel="stylesheet" href="http://nanogallery.brisbois.fr/css/nanogallery.css">
<script src="http://nanogallery.brisbois.fr/jquery.nanogallery.js"></script>
<h2>nanoGALLERY - API methods to handle user selections</h2>

<button id="btnReload" "type="button ">reload album</button>
<button id="btnCntSelected" "type="button">Count selected items</button>
<button id="btnDisplayTitle" "type="button ">Display title of selected items</button>
<button id="btnUnselect" "type="button ">Unselect selected items</button>
<div id="nanoGallery"></div>

CSS

body {
    background:#333;
    color:#eee;
}

JavaScript

$(document).ready(function () {
    jQuery("#nanoGallery").nanoGallery({
        kind: 'picasa',
        userID: '[email protected]',
        album: '5870135211745010881',
        thumbnailHoverEffect: 'borderLighter',
        itemsSelectable: true
    });
});

$('#btnReload').on('click', function () {
    $('#nanoGallery').nanoGallery('reload');
});

$('#btnCntSelected').on('click', function () {
   alert($('#nanoGallery').nanoGallery('getSelectedItems').length);
});

$('#btnDisplayTitle').on('click', function () {
    var items = $('#nanoGallery').nanoGallery('getSelectedItems');
    var l = items.length;
    for (var j = 0; j < l; j++) {
        alert((j + 1) + ' -> ' + items[j].title);
    }
});

$('#btnUnselect').on('click', function () {
    var items = $('#nanoGallery').nanoGallery('getSelectedItems');
    if (items.length > 0) {
        $('#nanoGallery').nanoGallery('unselectItems', items);
    } else {
        alert('nothing is selected');
    }
});