snippets.emlogic.pl - jQuery plugins and snippets to improve any website

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

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.

• Easy to use - no programming skills required, just copy, paste and have fun
• HTML5 compatibility
• SEO friendly!
• 20 unique transition effects
• No limits to the number of slightBoxes per page
• Doesn't need cofiguration to work - it works "out of the box", but you can change what you want - speed, slices etc
• Simple configuration
• Valid HTML / CSS
• Keyboard support
• Touch navigation support for iOS, Android, IE10 (Windows 8, Blackberry and other)
• Compatible with all major browsers (IE, Chrome, Firefox, Safari and Opera)
• Very easy to integrate into any existing website

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>

• open season
• wall-e
• toy story
• finding nemo
• puss in boots
• ice age
• lady bug
• old jetty

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:

• contact form from hidden layer
• div loaded from hidden layer (inline HTML)

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

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>

Welcome!

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

Look, I am plain text. You can select me if you want.

And this is image:

Options

function(){
                            // do something
                        }

function(){
                            // do something
                        }

function(){
                            // do something
                        }

{
    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'
    }
}

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!

emloSlightBox - super lightbox with slices

copyright 2024 emlogic - webdesign, programming. contact: kontakt(at)emlogic.pl / www.emlogic.pl.