jQuery灯箱弹出窗口插件litebox V1.1

 查看演示  website  立即下载

使用方用法

链接两个'litebox.css '，'images-loaded.js'和'litebox.js'文件到您的文档。

只需将链接到内容的超链接href属性，给它一个类名，你就会用LiteBox 。

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

对于嵌入内容，你只需要添加URL到网页，而不是他们所提供的嵌入代码，因为该脚本将动态地创建正确的链接来获取视频。

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

要放置在网页的iframe ，只是链接到特定的页面，你会做任何其他的超链接。对于内嵌的内容，你的页面上的某个地方创建元素，将其显示为无，在那里创建你的元素，并给它一个唯一的ID 。然后将这个ID （与包括hashtag ）的href属性值。

<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>

您还可以创建一个画廊/组，您可以通过内容添加属性数据litebox组，这适用于任何类型的内容，甚至可以有混合的内容导航。

<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>

要调用的插件和设置选项：

$('.litebox').liteBox({
  revealSpeed: 400,
  background: 'rgba(0,0,0,.8)',
  overlayClose: true,
  escKey: true,
  navKey: true,
  callbackInit: function() {},
  callbackBeforeOpen: function() {},
  callbackAfterOpen: function() {},
  callbackBeforeClose: function() {},
  callbackAfterClose: function() {},
  callbackError: function() {},
  callbackPrev: function() {},
  callbackNext: function() {},
  errorMessage: 'Error loading content.'
});

PREVIOUS:
NEXT:
jQuery滚动执行动画插件FadeThis
jQuery单页视差效果网站源码