mjGallery

mjGallery Examples

Example 1 — Basic Gallery

• 
• 
• 
• 
• 
• 

  This is description of photo #6.

• 

  This is description of photo #7.

• 

  This is invisible description of photo #8.

• 
• 

var example1 = new mjGallery({
    selector: ".example1__link" //items with source (with href or data-mjg-src attribute)
});

Example 2 — Random Images (non-gallery mode)

var example2 = new mjGallery({
    selector: ".example2__link", //items with source (with href or data-mjg-src attribute)
    gallery: false, //images will not be grouped to gallery
    zoomBtn: false, //zoom button will be hidden
    fullscreenBtn: false, //fullscreen button will be hidden
    info: false //info will be hidden, but can be turned on (infoBtn is not set to false), if there is something to show (see itam #5)
});

Example 3 — Gallery Openable By Button

• Subject #6

  
• Subject #7

  
• Subject #8

  
• Subject #9

  
• Subject #10

  

var example3 = new mjGallery({
    openBy: ".example3__button", //button for opening the gallery
    fullSize: true, //items can be as big as window
    cover: window.innerWidth > window.innerHeight, //items will cover the whole view/window (on landscape)
    maxWidth: "calc(100% - 20px)", //10px border around
    maxHeight: "calc(100% - 20px)", //10px border around
    title: ".title", //selector for title (not necesary — it will be detected automatically, because it has "title" in class attribute)
    description: function () { //generates description
        return this.getSrc();
    }
});

//use cover only on landscape
$(window).on("orientationchange", function () {
    example3.refresh({
        cover: window.innerWidth > window.innerHeight
    }, true); //true = merge options
});

Example 4 — Iframe

var example4 = new mjGallery({
    selector: ".example4__button", //items with source (with href or data-mjg-src attribute)
    counter: false, //current position and total count of items will be hidden
    info: false //info will be hidden, but can be turned on (infoBtn is not set to false), if there is something to show
});

Example 5 — YouTube & Vimeo

var example5 = new mjGallery({
    selector: ".example5__button" //items with source (with href or data-mjg-src attribute)
});

Example 6 — HTML5 Video

A markup for the video must be provided in the document. The <video> will be selected according to the data-mg-src="selector" attribute.

var example6 = new mjGallery({
    selector: ".example6__button", //items with source (with data-mjg-src attribute)
    autoplay: true //videos will be played automatically
});

Example 7 — HTML From The Document

var example7 = new mjGallery({
    selector: ".example7__button" //items with source (with data-mjg-src attribute)
});

Example 8 — Generated HTML

var example8 = new mjGallery({
    selector: ".example8__button", //items
    html: function (done, item) { //generates the html content

        var req = $.get("api.openweathermap.org/data/2.5/weather?q=Prague&units=metric&APPID=699e0132d2f7e3fea7a91128af7959e1");

        req.done(function (result) {

            var template = "<h1 class=\"example8__weather\"><div>Prague</div> <div>" + result.main.temp.toFixed(1) + " °C</div> <div>" + result.weather[0].description + "</div></h1>",

                sunrise = new Date(result.sys.sunrise),
                sunset = new Date(result.sys.sunset);

            item.setTitle("Weather In Prague")
                    .setDescription("Sunrise: " + sunrise.toLocaleTimeString() + "; Sunset: " + sunset.toLocaleTimeString() + ";");

            done(template); //function done must be called with html content (selectable with jQuery or jQuery object)
        });
    },
    counter: false //current position and total count of items will be hidden
});

Events

The default behavior on some events can be prevented by returning false or by calling preventDefault() on event object.

construct

When mjGallery is constructing. The default behavior can be prevented.

init

When mjGallery is initialized.

open

When mjGallery is opened, but before the animation is done.

beforeopen

Before mjGallery is opened. The default behavior can be prevented.

beforefirstopen

Before the first opening of mjGallery. The default behavior can be prevented.

afteropen

When mjGallery is opened and the animation is done.

close

When mjGallery is closed, but before the animation is done.

beforeclose

Before mjGallery is closed. The default behavior can be prevented.

afterclose

When mjGallery is closed and the animation is done.

change

When current item is changed by user interaction (or by calling next or prev method), but before the animation is done.

beforechange

Before current item is changed by user interaction (or by calling next or prev method). The default behavior can be prevented.

afterchange

When current item is changed by user interaction (or by calling next or prev method) and the animation is done.

currentitemchanged

When current item is changed.

beforedestroy

Before mjGallery is destroyed. The default behavior can be prevented.

afterdestroy

After mjGallery is destroyed.

beforerefresh

Before mjGallery is refreshed. The default behavior can be prevented.

afterrefresh

After mjGallery is refreshed.

load

When item is loaded.

youtubeready

When YouTube video is ready to play. The default behavior (autoplay) can be prevented.

vimeoready

When Vimeo video is ready to play. The default behavior (autoplay) can be prevented.

videoready

When HTML5 video is ready to play. The default behavior (autoplay) can be prevented.

event

When the default behavior of an event (scroll, mousemove, …) will be prevented. If this event (event) is prevented, the original event won't be used.

zoom

When item is zoomed in or out.

resize

When window is resized.