Lightbox Templates

This short article let you create custom lightbox templates.

Lightbox Template Structure

The template object has the following structure:

// The general template object
MMG.Lightboxes.Name = {};
// It contains a string of template markup
MMG.Lightboxes.Name.template = "";
// and a callback function
MMG.Lightboxes.Name.callback = function(){};
// The template object for mobile devices. Can be undefined.
MMG.Lightboxes.Name.mobile = {};
MMG.Lightboxes.Name.mobile.template = "";
MMG.Lightboxes.Name.mobile.callback = function(){};
// The template object for IE9 and IE8. Can be undefined.
MMG.Lightboxes.Name.ie9 = {};
MMG.Lightboxes.Name.ie9.template = "";
MMG.Lightboxes.Name.ie9.callback = function(){};
// The template object for IE8. Can be undefined.
MMG.Lightboxes.Name.ie8 = {};
MMG.Lightboxes.Name.ie8.template = "";
MMG.Lightboxes.Name.ie8.callback = function(){};

'Name' is a name of the lightbox template, that must be specified in lightbox options.

But you can choose only the 'default' template, because there is no other templates.

The Example of the default template usage

new MMG.Grid.Grid({
  retina: 2,
  grid: '#container-default-1',
  url: 'assets/json/lightbox-1.json',
  templateName: 'Simple',
  height: 200,
  lightbox: {
    retina: true, //the Retina mode is switched on
    name: 'default', // default caption template
    simpleClick: false, // the 'simple click' mode is switched off
    captionHideAfter: 4000 // the caption will be hidden after 4s.
  }
});

So you must create a custom template or to use the default one.

The example of a custom template

Let's take an example.

/*
CUSTOM LIGHTBOX TEMPLATE
SOCIALS
if you need to create your own caption you must define
a special object which will contain the template and 
the callback (optional)
*/
MMG.Lightboxes.socials = {}; // the special object
//the general template
MMG.Lightboxes.socials.template =
"<% var title %>"+
"<% if (data.lb && data.lb.title) { title = data.lb.title %>"+
"<% } else if (data.face && data.face.title) { title = data.face.title %>"+
"<% } else { title = data.title } %>"+
"<div class='<%=meta.NS %>-lb-caption <%=meta.NS %>-lb-social'>"+
"<div class='<%=meta.NS %>-lb-socials'>"+
"<a href='http://www.facebook.com/sharer.php?"+
"u=<%= location.href %>&t=<%= title %>'"+
"class='icon-facebook' target='_blank' title='facebook'></a>"+
"<a href='http://twitter.com/home?status=<%= title %>%20<%= location.href %>'"+
"class='icon-twitter' target='_blank' title='twitter'></a>"+
"<a href='https://plus.google.com/share?url=<%= location.href %>' "+
"class='icon-google-plus' target='_blank' title='google+'></a>"+
"<a href='http://www.blogger.com/blog_this.pyra?t=&"+
"u=<%= location.href %>&n=<%= title %>' "+
"class='icon-blogger' target='_blank' title='blogger'></a>"+
"<a href='<%= data.href %>' class='icon-download' "+
"target='_blank' title='download'></a>"+
"</div>"+
"</div>";
/*
  We don't need any callback function for modern browsers
  because we use transition animation here.
  But for IE8, IE9 we can use jQuery animation.
  So we create the 'ie9' object, then we define the 'callback' parameter
*/
MMG.Lightboxes.socials.ie9 = {};
MMG.Lightboxes.socials.ie9.callback = function() {
  var meta, self;
  self = this;
  meta = this.model.meta;
  meta.root
    .on('timeForCaption',
        function(event, caption) {
          $('.mmg-lb-socials a, .mmg-lb-socials', caption)
            .stop(true)
            .delay(200)
            .animate({
              opacity: 1
            });
          });
  meta.root
    .on('timeForCaptionHide',
        function(event, caption) {
          $('.mmg-lb-socials a, .mmg-lb-socials', caption)
            .stop(true)
            .animate({
              opacity: 0
            });
          });
  $('body')
    .on('mouseenter',
        '#mmg-lb-' + self.gridId.substr(6) + ' .mmg-center',
        function(event) {
          $('.mmg-lb-socials a, .mmg-lb-socials', this)
            .stop(true)
            .delay(200)
            .animate({
              opacity: 1
            });
        });
  $('body')
    .on('mouseleave',
        '#mmg-lb-' + self.gridId.substr(6) + ' .mmg-center',
        function(event) {
          $('.mmg-lb-socials a, .mmg-lb-socials', this)
            .stop(true)
            .animate({
              opacity: 0
            });
          });
  };

new MMG.Grid.Grid({
  retina: 2,
  grid: '#container-socials',
  url: 'assets/json/lightbox-1.json',
  templateName: 'Simple',
  height: 200,
  lightbox: {
    retina: true, //the Retina mode is switched on
    name: 'socials', // the template name
    simpleClick: false, // the 'simple click' mode is switched off
    captionHideAfter: 2000 // the caption will be hidden after 2s.
  }
});

This template shows the 'socials' panel when the lightbox is shown or after the 'mouseenter' event, and hides it after 2 seconds or after the 'mouseleave' event.

MMG.Lightboxes.socials.template is a general template string

The template system is based on Underscore.js template function. So it uses <% and %> tags.

Several variable are passed to the template function:

data — an object with data of this item. Mainly it's data from the JSON file.

meta — an object with meta information.

You can wright 'mmg' or you own namespace string instead of <%=meta.NS %>.

When the grid is built, callback functions are executed. Mainly they are used to attach handlers of events.

We don't need the MMG.Lightboxes.socials.callback function because we use transition animation.

But we need MMG.Lightboxes.socials.IE9.callback for IE9, IE8.

Callback function is called from MMG.Grid.Grid class and it takes the 'this' variable from this class.

So you can do something like this:

var meta = this.model.meta;

to get an object with meta information.

The lightbox root element has class 'mmg-lb'. But it also has its personal ID.

In MMG.Lightboxes.socials.IE9.callback this id is culcilated:

'#mmg-lb-' + self.gridId.substr(6)

There are 4 events which have handlers: 'timeForCaption', 'timeForCaptionHide', 'mouseenter', 'mouseleave'.




You can see more examples of lightbox usage here

© Kremlianski 2016