moogallery 0.2.5

moogallery creates an interactive gallery of images, videos and audios. Given the thumbs paths and some information, the thumbs are loaded sequentially and inserted in a table structure automatically sized according to the size of the container, then events are added in order to manage tips, lightbox widget (and navigation through media) and show media' meta information. Videos can be hosted on youtube or vimeo, audio files are inserted following html5 specifications. If used with cpoyer's mootools-mobile (https://github.com/cpojer/mootools-mobile) supports swipe gestures on mobile (android, ios) to change media in the lightbox view.



Details

Author
abidibo
Current version
0.2.5
GitHub
abidibo/moogallery
Downloads
3852
Category
Widgets
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.3

How to use

moogallery requires

  • core/1.4.4

Include mootools framework and moopopup plugin (include also mootools-mobile to add support for swipe events)

<script src="path-to-mootools-framework" type="text/javascript"></script>
<script src="path-to-moogallery-js" type="text/javascript"></script>

Include moogallery stylesheet

<link href="path-to-moogallery-css" type="text/css" rel="stylesheet" />

Example code

Javascript:

window.addEvent('domready', function() {
    var mg_instance = new moogallery('mycontainer', [
        {
            thumb: 'http://my/thumb/path', 
            img: 'http://my/img/path', 
            title: 'image title', 
            description: 'image description'
            credits: 'image credits'
        },
        {
            thumb: 'http://my/thumb/path2', 
            youtube: 'youtube_video_code',
            video_width: 640,
            video_height: 400, 
            title: 'youtube video title', 
            description: 'youtube video description'
            credits: 'youtube video credits'
        },
        {
            thumb: 'http://my/thumb/path3', 
            vimeo: 'vimeo_video_code',
            video_width: 640,
            video_height: 400, 
            title: 'vimeo video title', 
            description: 'vimeo video description'
            credits: 'vimeo video credits'
        },
        {
            thumb: 'http://my/thumb/path4', 
            mpeg: 'path/to/mpeg/file',
            ogg: 'path/to/ogg/file',
            title: 'audio title', 
            description: 'audio description'
            credits: 'audio credits'
        }
        // ...
    ]);
}

For more demos please visit the moogallery demo page at http://www.abidibo.net/projects/js/moogallery/demo


Links

The project page: http://www.abidibo.net/projects/js/moogallery
The documentation page: http://www.abidibo.net/projects/js/moogallery/doc
The demo page: http://www.abidibo.net/projects/js/moogallery/demo

Please report bugs, errors and advices in the github project page: http://github.com/abidibo/moogallery


Screenshots


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus