Slightbox. Slightbox? Super Lightbox? Better! It's Super Lightbox with slices and a lot of configuration!

new lightbox

emloSlightBox is an improved version of the popular Lightbox. It can effectively open images, HTML content, maps, movies and even more.

emloSlightbox is easy to use and does not require configuration - just copy, paste and have fun. But if you do not like the default configuration, you can easily adjust all the options - change the animation speed and slices number, group elements, call functions such as onStart, onComplete, onClose and many more.

Enhance your website by adding a unique and attractive snippet!

On this website I will show you how to use emloSlightBox.

Demo and documentation

Images

Images with animated thumb caption from alt tag

<a href="big-image.jpg" title="full caption" class="emloSlightBox"><img src="small-image.jpg" alt="thumb caption"></a>
<script>
    $('a.emloSlightBox').emloSlightBox();
</script>

Images from text links

<a href="big-image.jpg" title="full caption" class="emloSlightBox">anchor</a>
<script>
    $('a.emloSlightBox').emloSlightBox();
</script>

HTML content

Your website - inline HTML

set ID of hidden layer in href attribute

<div id="inlinehtml">some content in hidden layer</div>
<a href="#inlinehtml" class="emloSlightBox">anchor</a>
<script>    
    $('a.emloSlightBox').emloSlightBox();
</script>

example:

Your website - ajax

set data attribute as type="ajax"

<a href="external.html" data-type="ajax" class="emloSlightBox">anchor</a>
<script>    
    $('a.emloSlightBox').emloSlightBox();
</script>

example: external.html file loaded with AJAX

Loading external websites using iframe

set data attribute as type="iframe", width="iframe width", height="iframe height"

<a href="http://www.domain.com" data-type="iframe" data-width="500" data-height="500" class="emloSlightBox">anchor</a>
<script>
    $('a.emloSlightBox').emloSlightBox({verticalSlices: 1, horizontalSlices: 1, boxLines: 1, boxesInLine:1, showSpeed: 1); 
</script>
                    

example:

you can leave width and height empty, then emloSlightBox will set sizes automatically

<a href="http://www.domain.com" data-type="iframe" class="emloSlightBox">anchor</a>
<script>
    $('a.emloSlightBox').emloSlightBox({verticalSlices: 1, horizontalSlices: 1, boxLines: 1, boxesInLine:1, showSpeed: 1);
</script>
                    

example:

Maps

<a href="http://maps.google.com/...&output=embed" data-type="iframe" data-width="700" data-height="500" class="emloSlightBox">anchor</a>
<script>
    $('a.emloSlightBox').emloSlightBox({verticalSlices: 1, horizontalSlices: 1, boxLines: 1, boxesInLine:1, showSpeed: 1);
</script>
                    

example: google maps

example: street view

Video

<a href="http://www.youtube.com/embed/gYFlq7s6BrY?autoplay=1" data-type="iframe" data-width="700" data-height="500" class="emloSlightBox">anchor</a>
<script>
    $('a.emloSlightBox').emloSlightBox({verticalSlices: 1, horizontalSlices: 1, boxLines: 1, boxesInLine:1, showSpeed: 1);
</script>

example:

Captions

Just add title attribute.

<a title="Our office" href="href" class="emloSlightBox">anchor</a>
<script>
    $('a.emloSlightBox').emloSlightBox({verticalSlices: 1, horizontalSlices: 1, boxLines: 1, boxesInLine:1, showSpeed: 1);
</script>
                    

example: google maps

Functions

You can add functions to be called when emloSlightBox is being started, closed or the content is loaded.

<a href="http://www.domain.com" class="emloSlightBox">anchor</a>
<script>
$('a.emloSlightBox3').emloSlightBox({
    onStart: function(){
      alert('Welcome!');
    },

    onClose: function(){
      alert('Goodbye.');
    },

    onComplete: function(){
        alert('Mission completed');
    }
});
</script>
                    

example: Do something!

Language

You can set language for buttons (default: en, but you can add your own in options)

<script>
$('a.emloSlightBox3').emloSlightBox({
    text: {
        fr: {
            next:  'le next',
            prev:  'le prev',
            close: 'le close',
            play:  'le play',
            pause: 'le pause'

        },
        en: {
            prev:   'prev',
            next:   'next',
            close:  'close',
            play:   'slideshow',
            pause:  'stop slideshow'
        }
    },
    language: $('html').attr('lang')
});
</script>

Grouping elements

You can group elements to different Lightboxes - just assign them a different class

<a href="big-image.jpg" class="emloSlightBox">anchor</a>
<a href="big-image.jpg" class="another-emloSlightBox">anchor</a>
<script>
    $('a.emloSlightBox').emloSlightBox();
    $('a.another-emloSlightBox').emloSlightBox();
</script>

Options

option description type posibilities default
slideShow start slideshowbooleantrue / falsefalse
slideShowSeconds speed of slideshow in secondsint5
backgroundOpacity background opacityfloat0-1.7
showSpeed speed of content showint400
delay delay beetween slicesint70
outOpacity opacity of thumb image on mouseoutfloat0-1.7
overOpacity opacity of thumb image on mouseoverfloat0-11
thumbCaptionOpacitySpeed speed of thumb opacity changeint400
showThumbCaptionSpeed speed of thumb caption opacity changeint 400
transitions transitionsarray1 ... 20[20, 18, 11, 13, 5, 4, 3, 1, 2, 17, 19, 16, 15, 14, 12, 10, 9, 8, 7, 6]
shuffleTransitions random transitions from arraybooleantrue / false true
verticalSlices number of vertical slicesint6
horizontalSlices number of horizontal slicesint 6
boxesInLine box slices in lineint 4
boxLines lines of box slicesint3
language languagestringpl, enen
onComplete function which is called after the loading of the contentfunction
function(){
                            // do something
                        }
onClose function which is called when emloSlightBox is being closedfunction
function(){
                            // do something
                        }
onStart function which is called when emloSlightBox is startedfunction
function(){
                            // do something
                        }
text text for buttonsobject
{
    en: {
        prev: 'prev',
        next: 'next',
        close: 'close',
        play:   'slideshow',
        pause:  'stop slideshow'
    },

    pl: {
        prev:   'poprzednie',
        next:   'następne',
        close:  'zamknij',
        play:   'autoodtwarzanie',
        pause:  'zatrzymaj
        autoodwtarzanie'
    }
}
backgroundClass class name for backgroundstringemloSlightBoxBG
contentClass class name for emloSlightBox content divstringemloSlightBoxContent
thumbCaptionClass class name for thumb captionstringaltTag
fullCaptionClass class name for full captionstringcaption
counterClass class name for counterstringcounter
closeClass class name for 'close' buttonstringclose
prevClass class name for 'prev' buttonstringprev
nextClass class name for 'next' buttonstringnext
slicesContainerClass class name for slices container divstringslices-container
sliceContentClass class name for slice content divstringslice-content
sliceClass class name for slicestringslice
playClass class name for 'play' buttonstringplay
pauseClass class name for 'pause' buttonstringpause
preloaderContainerClassclass name for preloader container divstringpreloader-container
preloaderClass class name for preloaderstringpreloader

If you have any questions, bugs or new ideas to improve emloSlightBox - tell me.

Please note the images (taken from: 1, 2, 3, 4, 5, 6, 7, 8, ) used in preview are for demo purpose only and are not included in the package!