proto-gallery-js

Usage

<link rel="stylesheet" type="text/css" href="proto-gallery.css"/>
<script type="text/javascript" src="jquery.proto-gallery.js"></script>

<!-- ... -->

<div id="proto-gallery">
    <!-- Static Photos -->
    <figure data-photo="<!-- Photo url -->">
        <a href="<!-- Photo link -->">
            <img src="<!-- Thumbnail url -->" alt="<!-- Photo title -->"/>
        </a>
        <figcaption><!-- Thumbnail description --></figcaption>
    </figure>
    
    <!-- More statis photos -->
</div>

$('#proto-gallery').protoGallery({
    'source' : 'selector',
    'selector': {
        'slide': 'figure',
        'thumbnail': 'img[src]',
        'photo': '[data-photo]',
        'title': 'img[alt]',
        'description': 'figcaption',
        'link': 'a[href]'
    }
});

Options

var protoGalleryOptions = {
    'source' : 'selector', // selector, query, collection
    'selector': {
        'slide': 'a',
        'thumbnail': 'img[src]',
        'photo': '[data-photo]',
        'title': 'img[alt]',
        'description': 'div',
        'link': '[href]'
    },
    'collection': null,
    'query': null,
    prevButton: '<',
    nextButton: '>',
    closeButton: 'X',
    onInit: function($dialog) {
    },
    onOpen: function($dialog) {
    },
    onOpened: function($dialog) {
    },
    onClose: function($dialog) {
    },
    onClosed: function($dialog) {
    },
    onResize: function($dialog) {
    },
    onAction: function(_action, $dialog) {
    },
    onChangeSlide: function(_slide, $dialog) {
        return true;
    },
    onShowSlide: function(_slide, $dialog) {
        return true;
    }
};

source

Type: String Default: selector Values: selector|query|collection

Selector Source

Define the source where the slides are going to bee looked for. Usually looked in $('#proto-gallery').find(settings.selector.slide)

var settings = {
    'source' : 'selector',
    'selector': {
        'slide': 'a',
        'thumbnail': 'img[src]',
        'photo': '[data-photo]',
        'title': 'img[alt]',
        'description': 'div',
        'link': '[href]'
    }
};

Query Source

Define the source where the slides are going to bee looked for. Usually looked in $('#proto-gallery').find(settings.selector.slide)

var settings = {
    'source' : 'query',
    'query': '#proto-gallery a',
    'selector': {
        'slide': 'a', // not used
        'thumbnail': 'img[src]',
        'photo': '[data-photo]',
        'title': 'img[alt]',
        'description': 'div',
        'link': '[href]'
    }
};

Collection Source

Define the source where the slides are going to bee looked for. Usually looked in $('#proto-gallery').find(settings.selector.slide)

var settings = {
    'source' : 'collection',
    'collection': [
        {
            'photo': 'photo url'
            [,'element': $( /*Slide object*/ )]
            [,'link': 'link value]
            [,'thumbnail': 'thumbnail url']
            [,'title': 'title text']
            [,'description': 'description text']
        }
        [, ...]
    ]
};