zoukankan      html  css  js  c++  java
  • 使用photowap插件

    使用photowap插件时,需要注意class.js,photowap.js,jquery.js这三个文件引入的先后顺序。

    正确顺序如下:

    <script type="text/javascript" src="js/outerJS/lib/klass.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/outerJS/code.photoswipe-3.0.5.min.js"></script>

    使用的话只需要在document.ready函数里加上

     var myPhotoSwipe = $("#gallery a").photoSwipe({ enableMouseWheel: true , enableKeyboard: false });  //创建photoswipe实例

    中括号里的参数根据自己的选择写。

       <ul id="gallery" class="portfolioUl">
                    <li>
                        <a href="images/portfolio/001.jpg" rel="external"><img src="images/portfolio/001 (1).jpg"/></a>
                    </li>
                    <li>
                        <a href="images/portfolio/002.jpg" rel="external"><img src="images/portfolio/002 (1).jpg"/></a>
                      </li>
                       <li>
                           <a href="images/portfolio/003.jpg" rel="external"><img src="images/portfolio/003 (1).jpg"/></a>
                         </li>
                        <li>
                              <a href="images/portfolio/004.jpg" rel="external"><img src="images/portfolio/004 (1).jpg"/></a>
                          </li>
                        <li>
                             <a href="images/portfolio/005.jpg" rel="external"><img src="images/portfolio/005 (1).jpg"/></a>
                        </li>
                        <li>
                            <a href="images/portfolio/006.jpg" rel="external"><img src="images/portfolio/006 (1).jpg"/></a>
                          </li>
                         <li>
                             <a href="images/portfolio/007.jpg" rel="external"><img src="images/portfolio/007 (1).jpg"/></a>
                           </li>
                        <li>
                           <a href="images/portfolio/008.jpg" rel="external"><img src="images/portfolio/008 (1).jpg"/></a>
                         </li>
                        <li>
                            <a href="images/portfolio/009.jpg" rel="external"><img src="images/portfolio/009 (1).jpg"/></a>
                        </li>
                  
                </ul>

    想要了解photoswipe的更多用法,参考http://blog.csdn.net/renfufei/article/details/10360855

    人生短短几十年,要在有限的生命里多做店有意义的事情。莫要让自己迎合别人的眼光活着。随心而为,听从心的声音。讨好自己,悠哉悠哉!
  • 相关阅读:
    iOS 索引列 使用详解
    iOS 搜索条使用详解
    iOS 百度地图使用详解
    在iOS中使用ZBar扫描二维码和条形码
    自学html-five(锚点、伪类、字符实体)
    自学html-four(css初始化及html语义标签 -> h标签 p标签 img标签 有序列表 无序列表 表格 超链接)
    自学html--htree(CSS)
    自学html--two(盒模型)
    自学html--one(div布局)
    常用控件补充(UIDatePicker、UIWebView)
  • 原文地址:https://www.cnblogs.com/jiaojiaome/p/3494138.html
Copyright © 2011-2022 走看看