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