Summit Lightbox

A Responsive Lightbox

Summit is 100% reponsive and CSS3 transitions driven with a simple JS fallback for browsers such as IE9. It supports images, YouTube videos, Vimeo videos, inline HTML, iframes and ajax content.


Resource Files

Summit requires the following resource files:

Css
<style rel="stylesheet" href="css/summit.css" />
Js
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tm.swipe.min.js"></script>
<script type="text/javascript" src="js/jquery.tm.summit.min.js"></script>

Single Images

Example
<a id="lightbox-link-1" class="tml-link" href="../images/img1.jpg">Image</a>

Galleries can be created by adding the attribute "data-content" to all links that should be grouped. Links that are within such a group do not require an id.

Example
<a data-group="gallery-1" class="tml-link" href="../images/img1.jpg">Image</a>
<a data-group="gallery-1" class="tml-link" href="../images/img2.jpg">Image</a>
<a data-group="gallery-1" class="tml-link" href="../images/img3.jpg">Image</a>

Important: If retina is supported (i.e. retinaSupport = true ), two images must be provided, the original and the retina version. For example, if your lightbox images are named "lightbox-image-1.jpg, lightbox-image-2.jpg" etc., the corresponding retina versions should be named "lightbox-image-1@2x.jpg, lightbox-image-2@2x.jpg" using the @2x suffix. Also ensure that the retina version should is twice the size of the original image.


Videos

To launch a video in the Summit Lightbox, simply add the iframe URL.

Example
<a data-group="gallery-1" class="tml-link" href="http://www.youtube.com/embed/v2k94HVvL6s">Image</a>
<a data-group="gallery-1" class="tml-link" href="http://player.vimeo.com/video/94614809">Image</a>

Various Types

The Summit Lightbox can effectively be used to load other content such as iframes, inline and ajax content. To load such content the plugin requires that we add the attribute "data-content" to our links and specifying the type.

Example
<a data-content="iframe" class="tml-link" href="http://www.google.com">Image</a>
<a data-content="inline" class="tml-link" href="#inline-content">Image</a>
<a data-content="ajax" class="tml-link" href="ajax-content.html">Image</a>

Lightbox Toolbar New

Summit Lightbox now supports zoom and social sharing (Facebook, Twitter and Pinterest) for lightbox content. The toolbar is added by default but can be customized through the data-attribute data-toolbar by specifying the toolbar elements to include (i.e. zoom, share or both).

Launch Lightbox

Example (no toolbar)
<a data-toolbar class="button tml-link" href="../images/img1.jpg">Launch Lightbox</a>
Example (zoom only)
<a data-toolbar"zoom" class="button tml-link" href="../images/img1.jpg">Image</a>
Example (share only)
<a data-toolbar"share" class="button tml-link" href="../images/img1.jpg">Image</a>
Facebook Open Graph

To share lightbox content on Facebook, four open graph tags need to be added to the head of the document where title, website, image and description are defined. Note: This means that only one image can be shared per page.

Example
<meta property"og:title" content="Yout-Title-Here"/>
<meta property"og:type" content="website"/>
<meta property"og:image" content="Yout-Image-Url"/>
<meta property"og:description" content="Yout-Description-Here"/>
Twitter Attributes

To share an image on Twitter you need to specify the absolute URL of the lightbox iamge using the attribute data-image-url. You can also specify your Twitter username that will be shared with the attribute data-twitter-username.

Example
<a data-image-url="http://yoursite.com/images/image-to-share.jpg" data-twitter-username="thememountain" class="tml-link" href="../images/img1.jpg">Image</a>
Pinterest Attributes

To share an image on Pinterest you need to specify the absolute URL of the lightbox iamge using the attribute data-image-url. You can also need to specify a caption that will be used for the Pinterest description using the attribute data-caption.

Example
<a data-image-url="http://yoursite.com/images/image-to-share.jpg" data-caption="Your Image Description" class="tml-link" href="../images/img1.jpg">Image</a>

Summit Lightbox now also supports modal mode. To launch the lightbox as a modal we add the data attribute data-modal-mode to the lightbox link. We can also specify the modal width through the data-attribute data-modal-width.

Launch Modal

Example
<a data-content="inline" data-modal-mode data-modal-width"600" class="button tml-link" href="../images/img1.jpg">Launch Lightbox</a>

Summit Usage Updated

To call the Summit Lightbox plugin on one or multiple links the following call should be added before the closing body tag on document ready.

Example
$( document ).ready( function(){
$( '.link' ).summitLightbox()
});
Attribute Values Default Data Attribute Description
lightboxAnimation fade, slideInTop, slideInRight, slideInBottom, slideInLeft fade data-lightbox-animation Attribute added to lightbox link. How the lightbox should transition in
contentAnimation slide, fade slide data-content-animation Attribute added to lightbox link. How the content should transition
slideAmount number 100 How much the content should transition on the X axis
easing For full list click here swing Sets the timing function of transitions, affects all elements
speed milliseconds 350 Sets the transition speed of all elements
overlay boolean true Whether the lightbox should have an overlay or not
maxWidth number 1140 Sets max width to which videos, iframe, inline and ajax content can scale
contentMargin number 15 Represents margin around the lighbox from the device window, expressed as a percentage
navArrows boolean true Whether lighbox should have navigation arrows or not
navKeyboard boolean true Whether lighbox should be controlled by keyboard
navExit boolean true Whether lighbox should have an exit button. Set to false if you are using the lighbox as a modal
overlayClickClose boolean true Whether overlay should close the lighbox upon clicking it
errorMessage string 'Please Check' Error message text
showErrorSrc boolean true Whether error message should show the source causing the error
retinaSupport boolean true Whether plugin should serve retina images for retina displays.
retinaSupportMobile boolean false Whether the plugin should swap images on mobile retina enabled devices. Set to false by default to save bandwidth usage on mobile devices.
retinaSuffix string '@2x' The suffix that will be added to the image url.

API

The Summit Lightbox plugin offers a few useful callbacks and methods for interacting with the lightbox.

Callback Description
onSetup Called upon lightbox creation, onSetup: function({})
onLoaded Called once content is loaded, onLoaded: function({})
onDestroy Called when lightbox is removed, onDestroy: function({})
3 Methods

The lighbox offers three public methods, namely .prevContent(), .nextContent(), and .destroyLightbox() which are particularly useful if the lightbox is used as a modal or self navigated projects. Use these medthods for controlling the lightbox from within the loaded content. Works best for inline and ajax loaded content.

Medthod Example Description
prevContent var lightbox = $( '.link' ).data( 'summitLightbox' );
lightbox.prevContent()
Moves to previous content
nextContent var lightbox = $( '.link' ).data( 'summitLightbox' );
lightbox.nextContent()
Moves to next content
destroyLightbox var lightbox = $( '.link' ).data( 'summitLightbox' );
lightbox.destroyLightbox()
Removes lightbox
Theme Mountain

Current Version