nanoGALLERY jQuery plugin - image toolbar callbacks

Callbacks: fnImgToolbarCustInit, fnImgToolbarCustDisplay, fnImgToolbarCustClick

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 - image toolbar callbacks</h2>
<h3>more details: <a href="http://nanogallery.brisbois.fr">see nanoGALLERY homepage</a></h3>
<div id="nanoGallery"></div>

CSS

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

JavaScript

function myImgToolbarCustInit(elementName) {
    if (elementName == 'custom1') {
        return 'ELT1';
    }
}

function myImgToolbarCustDisplay($elements, item, data) {
    if (item.customData.myCounter == undefined) {
        item.customData.myCounter = 0;
    }
    // second custom element
    $elements.eq(1).html('photo ID: ' + item.GetID() + '<br>Clicks: ' + item.customData.myCounter );
}

function myImgToolbarCustClick(elementName, $element, item, data) {
    switch (elementName) {
        case 'custom1':
            alert('click on custom element 1');
            break;
        case 'custom2':
            item.customData.myCounter++;
            $element.html('photo ID: ' + item.GetID() + '<br>Clicks: ' + item.customData.myCounter);
            break;
    }
}


$(document).ready(function () {
    jQuery("#nanoGallery").nanoGallery({
        kind: 'picasa',
        userID: '111186676244625461692',
        album: '5856259539659194001',
        viewerToolbar: {
            autoMinimize: 0,
            standard: 'closeButton,previousButton,custom1,nextButton,label,custom2'
        },
        fnImgToolbarCustInit: myImgToolbarCustInit,
        fnImgToolbarCustDisplay: myImgToolbarCustDisplay,
        fnImgToolbarCustClick: myImgToolbarCustClick
    });
});