JS的灯箱插件Shadowbox,支持图片、视频、网页、flash、FLV等媒体轮播
  • 分享到微信朋友圈
    X
立即下载 查看演示

Shadowbox是一款基于浏览器的应用程序，支持多种媒体格式。用户无需打开新页面即可直接在主流浏览器中浏览图片、SWF等媒体。

使用方法：

使用前您一定要引入css及本脚本

<link href="shadowbox/shadowbox.css" rel="stylesheet" type="text/css" /> 
<script src="shadowbox/shadowbox.js" type="text/javascript"></script>

html

<div id="gallery" >  
    <a href="images/gallery/1.jpg" rel="shadowbox[1]"><img src="images/thumb/1.jpg"   alt=" " title=" " /></a>
    <a href="images/gallery/2.jpg" rel="shadowbox[1]"><img src="images/thumb/2.jpg"   alt=" " title=" " /></a>
    <a href="images/gallery/3.jpg" rel="shadowbox[1]"><img src="images/thumb/3.jpg"   alt=" " title=" " /></a>
    <a href="images/gallery/4.jpg" rel="shadowbox[1]"><img src="images/thumb/4.jpg"   alt=" " title=" " /></a>
</div>

主要js

<script type="text/javascript">
    Shadowbox.init({
        handleOversize: "drag",
        modal: true,
        continuous: true,
        counterType: "skip",
        handleOversize: "resize"
    });
</script>

如果Gallery是由不用格式的内容组成的混合gallery，要用[Mixed]参数作为Gallery名称

<a rel="shadowbox[Mixed]" href="myp_w_picpath.jpg">jpg</a>
<a rel="shadowbox[Mixed]" href="myswf.swf">swf</a>
<a rel="shadowbox[Mixed]" href="mymovie.mp4">movie</a>
<a rel="shadowbox[Mixed]" href="mywebsite.html">iframe</a>