Turn on lightbox outside the slider

Our lightbox option can be used in your website outside our slider too, if our slider's code is loading on your page. The first code you need is this:

<?php
if(class_exists('N2AssetsPredefined')){
    N2AssetsPredefined::frontend();
    N2AssetsPredefined::loadLiteBox();
}
?>

which is turning on the lightbox file incalling. You need to put this code before the js and css files are called in to your website, probably the best would be, if you would just put it before the starting <html> tag.

Then you will need the javascript code, which will make lightboxes from your content:

<script>
window.n2jQuery.ready(function($){
    $('.litebox').liteBox();
});
</script>

This has to go after our files are called in, so it could be for example right in front of the </body> part.

Then you will be able to use this html code to make lightboxes:

<a data-litebox-group="somegroup" class="litebox" href="https://example.org">
    Some content
</a>

The data-litebox-group can be used for the lightboxes to group them; as you open up a lightbox, you can switch to the next and previous lightboxes, which are in the same group. This attribute is not necessary, so you can skip it, if you don't want to use it:

<a class="litebox" href="https://example.org">
    Some content
</a>

then the litebox class will identify your links, where you want to have lightboxes. This is the same class, which was used at the javascript code, so it could be anything. And lastly, the content of the lightbox is what you have in the href attribute. It can be the same, what you saw at our slider too, it can be a link to a website, an image, and a youtube or vimeo video. The "Some content" can be anything.