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