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

    人生短短几十年,要在有限的生命里多做店有意义的事情。莫要让自己迎合别人的眼光活着。随心而为,听从心的声音。讨好自己,悠哉悠哉!
  • 相关阅读:
    数据结构与算法(二)(栈、队列)
    数据结构与算法(一)(数组、线性查找、二分查找)
    ssm项目中常用的上传文件
    安全防御之防xss、SQL注入、与CSRF攻击
    int i=i++;和i=++i;和i++
    关于@Autowired和@Resource注解区别
    通过idea创建Maven项目整合Spring+spring mvc+mybatis
    深入理解java虚拟机(一)
    java中栈,堆,方法区
    SpringBoot+mybatis配置pagehelper实现基础分页
  • 原文地址:https://www.cnblogs.com/jiaojiaome/p/3494138.html
Copyright © 2011-2022 走看看