photopile.js jquery照片墙插件

photopile.js jquery照片墙插件

photopile.js jquery照片墙插件。点击缩略图,照片会弹出放大,左右的箭头可以查看“上一张”、“下一张”,再次点击会返回。缩略图可以拖动,所以即使被叠在非常后面的照片也能够轻松的找到。

使用方式

第一步引入bfwone 加载依赖项jquery及ui

第二步use插件

第三步将ul 的class设为photopile

示例如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jquery-ui.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["photopile", "photopile"], function() {});
        });
    </script>
    <style>
        .photopile-wrapper {
            width: 900px;
            margin: 50px auto;
            padding: 50px;
        }
        ul.photopile li a img {
            border: 0 none;
        }
    </style>
</head>
<body>
    <h1 style="margin: 40px auto; font: 32px 'Microsoft Yahei'; text-align: center;">jQuery照片堆叠效果插件Photopile JS演示</h1>

    <!-- Demo  -->
    <div class="photopile-wrapper">
        <ul class="photopile">
            <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
             <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
                <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
             <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
               <li>
                <a href="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg">
                    <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
                </a>
            </li>
        </ul>
    </div>
</body>
</html>


立即下载photopile.js查看所有js插件

网友评论0

程序员在线工具箱