• 使用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

    人生短短几十年,要在有限的生命里多做店有意义的事情。莫要让自己迎合别人的眼光活着。随心而为,听从心的声音。讨好自己,悠哉悠哉!
  • 相关阅读:
    spring boot整合quartz存储到数据库
    java多线程定时器和java判断一个时间是否在时间区间内和用正则表达式获取String字符串之间的数据
    maven项目通过java加载mqtt存储到mysql数据库,实现发布和接收
    java往MongDB导入大量数据
    SSH面试题收藏
    Spring面试题
    Hibernate面试题收藏
    Spring MVC
    浅谈 Struts2 面试题收藏
    JSP 新闻发布会
  • 原文地址:https://www.cnblogs.com/jiaojiaome/p/3494138.html
Copyright © 2020-2023  润新知