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:

									<link rel="stylesheet" href="css/summit.css" />
									<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
									<script type="text/javascript" src="js/"></script>
									<script type="text/javascript" src="js/"></script>

Single Images


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.


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.


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

Video Ratio

To use a custom video ratio for videos launched in the lightbox we use the data attribute data-video-ratio. Default ratio is set to 1.78.


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.


Lightbox Aux Classes New

Summit Lightbox now has added support for custom classes. Use the data attribute data-aux-classes to specify custom classes that should be added to the lightbox wrapper. This is useful when you want to customize the look or feel of the lightbox.


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)
Example (zoom only)
Example (share only)
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.

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.

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.


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


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.

									$( 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 data-content-margin Attribute added to lightbox link. Represents margin around the lighbox from the device window, expressed as a percentage
videoRatio number 1.778 data-video-ratio Attribute added to lightbox link. Represents ratio used to calculate video width and height
navArrows boolean true Whether lighbox should have navigation arrows or not
navKeyboard boolean true Whether lighbox should be controlled by keyboard
navExit boolean true data-nav-exit Attribute added to lightbox link. 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
auxClasses string '' data-aux-classes Additional classes to be added to the lightbox wrapper. For custom styling on the fly.
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.


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' );
Moves to previous content
nextContent var lightbox = $( '.link' ).data( 'summitLightbox' );
Moves to next content
destroyLightbox var lightbox = $( '.link' ).data( 'summitLightbox' );
Removes lightbox
Theme Mountain

Current Version