Julia Box

Responsive, mobile ready lightbox.

Image 1

Inline, missing element

Virtual gallery demo

Create gallery from javascript object.

Code examples

How to run

Julia BOX requires jQuery first.

<!-- CSS stylesheet -->
<link type="text/css" rel="stylesheet" media="all" href="julia-box/dist/css/julia-box.min.css">
<!-- jQuery lib -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- Julia Box -->
<script type="text/javascript" src="julia-box/dist/js/julia-box.min.js"></script>
...
<a href="image.png" class="gallery">Image link</a>

Basic implementation

Handle all tags. Minimalistic setup.

$('a.gallery').juliaBox();

Localization, videos autoplay

Localize UI, turn on video iframe autoplay.

$('a.gallery').juliaBox({
    videoAutoplay: true,
    i18n: {
        close: 'Close this layer',
        previous: 'Previous item',
        next: 'Next item'
    },
});

Virtual gallery

No DOM context, jQuery extension.

$('button').on('click', function(e){
    e.preventDefault();

    var gallery = $.juliaBox({
        sources: [
            {'src':'image1.jpg'},
            {'src':'image2.jpg'},
        ]
    });

    gallery.open();
});

Configuration options

Full list of configuration options

Option	Type	Default	Description
`autoplay`	Boolean	false	Play next collection item automaticaly, based on timeout option.
`attr`	String	href	Default data path DOM attribute.
`debug`	Boolean	false	Console debugging.
`i18n`	Object	Defaults see bellow	Default collection of translation strings.
`i18n.close`	String	Close	Close button title.
`i18n.next`	String	Next	Next button title.
`i18n.previous`	String	Previous	Previous button title.
`i18n.errorIframe`	String	Error, content not loaded	Show when iframe content cannot be loaded.
`i18n.errorImage`	String	Error, image not loaded	Show when image source cannot be loaded.
`i18n.errorInline`	String	Error, element not found	Show when DOM element cannot be found.
`iframeWidthLimit`	Integer	1280	Maximum iframe width.
`onClose`	Boolean\|Function\|String	false	Item close button (Esc\|Enter\|Space arrow key) callback method. If you are using typeof string, function must be callable globally (window context).
`onCreate`	Boolean\|Function\|String	false	Item "box created" callback method. If you are using typeof string, function must be callable globally (window context).
`onInit`	Boolean\|Function\|String	false	Item open callback method. If you are using typeof string, function must be callable globally (window context).
`onNext`	Boolean\|Function\|String	false	Item next button (right arrow key) callback method. If you are using typeof string, function must be callable globally (window context).
`onPrevious`	Boolean\|Function\|String	false	Item previous button (left arrow key) callback method. If you are using typeof string, function must be callable globally (window context).
`overlayActive`	Boolean	true	Close on overlay click.
`root`	Object	$('body')	DOM object used for append lightbox object and virtual gallery object.
`sources`	Object	{}	Source of media urls used with "Virtual gallery - no jQuery plugin context".
`timeout`	Integer	7	Autoplay timeout in seconds.
`videoAutoplay`	Boolean	true	Iframe video automatic play in desktop browsers. This option is ignored with Instagram and Facebook videos. Facebook video plays automaticaly in desktop browsers by default. Instagram video cannot be played automaticaly.

Methods

Api methods

Method	Description
`open`	Open gallery in jQuery extension mode.
`next`	Get next gallery item.
`prev`	Get previous gallery item.
`close`	Close gallery.

Download

Github

npm package

Composer package