nanoGALLERY4 jQuery plugin - Custom Colorscheme

by Christophe Brisbois

HTML

<script src="http://nanogallery.brisbois.fr/jquery.nanogallery.js"></script>
<link rel="stylesheet" href="http://nanogallery.brisbois.fr/css/nanogallery.css">
<h2>nanoGALLERY - custom ColorSchemes</h2>

<div id="nanoGallery"></div>

CSS

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

JavaScript

$(document).ready(function () {
    var myColorScheme = {
        navigationbar: {
            background: '#f00',
            border: '1px dotted #555',
            color: '#ccc',
            colorHover: '#fff'
        },
        thumbnail: {
            background: '#f00',
            border: '0px solid #000',
            labelBackground: 'transparent',
            labelOpacity: '0.8',
            titleColor: '#fff',
            descriptionColor: '#eee'
        }
    };
    var myColorSchemeViewer = {
        background: 'rgba(1, 1, 1, 0.75)',
        imageBorder: '15px solid #f8f8f8',
        imageBoxShadow: '#888 0px 0px 20px',
        barBackground: '#222',
        barBorder: '2px solid #111',
        barColor: '#eee',
        barDescriptionColor: '#aaa'
    };

    jQuery("#nanoGallery").nanoGallery({
        kind: 'picasa',
        userID: '[email protected]',
        //album: '5852572882905112961',

        thumbnailHoverEffect: 'borderLighter',
        colorScheme: myColorScheme,
        colorSchemeViewer: myColorSchemeViewer
    });

});