LiteBox

LiteBox is a versatile, auto detecting content, lightbox/modal window for use with images, embedded content (YouTube, Vimeo, Daily Motion and KickStarter), iframes and inline html.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link href="assets/css/litebox.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="assets/js/images-loaded.min.js" type="text/javascript"></script>
<script src="assets/js/litebox.js" type="text/javascript"></script>

2. HTML

<a href="001.jpg" target="_self" class="litebox"><img src="001-thumb.jpg" alt="Image 001" /></a>

For embedded content, you only need the URL to the page, not the embed code they provide, as the script will dynamically create the correct link to fetch the video.

<a href="https://www.youtube.com/watch?v=[token-id]" target="_self" class="litebox">YouTube</a>
<a href="https://www.youtu.be/[token-id]" target="_self" class="litebox">YouTube (Alt)</a>
<a href="http://vimeo.com/[token-id]" target="_self" class="litebox">Vimeo</a>
<a href="http://www.dailymotion.com/video/[token-id]" target="_self" class="litebox">Daily Motion</a>
<a href="https://www.kickstarter.com/projects/[token-id]/[token-name]/" target="_self" class="litebox">KickStarter</a>

To place a website in an iframe, just link to that particular page as you would do any other hyperlink. For inline content, create the element somewhere on your page, set its display to none, within there create your element and give it an unique id. Then place this id (with the hashtag) in the href attributes value.

<a href="http://www.bing.com" target="_self" class="litebox">Iframe</a>
<a href="#inline-html-1" target="_self" class="litebox">Inline HTML </a>

<div style="display: none;">
    <div id="inline-html-1">
        <h1 class="bm-large tm-large">Inline HTML Example</h1>
        <p class="bm-large">In here you can pull any elements from the page to display in the Litebox</p>
    </div>
</div>

You can also create a gallery/group where you can navigate through the content by adding the attribute data-litebox-group, this works for any type of content and can even have mixed content.

<a href="001.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="001-thumb.jpg" alt="Image 001" /></a>
<a href="002.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="002-thumb.jpg" alt="Image 002" /></a>
<a href="003.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="003-thumb.jpg" alt="Image 003" /></a>
<a href="004.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="004-thumb.jpg" alt="Image 004" /></a>

3. JAVASCRIPT

$('.litebox').liteBox();

4. OPTIONS