PhotoSwipe入门（2）

原文地址，点击直达，阅读效果更佳

开始之前

• PhotoSwipe不像jquery插件那样简单。你需要有一些javascript基础。
• PhotoSwipe需要预定义图片的尺寸（more about this）
• 如果你在非响应式网站上使用PhotoSwipe,控制器将会被缩放（基于整个页面缩放）。因此你需要自己实现控制器（如右上角的关闭按钮）
• 插件中的所有代码是原汁原味的js并且支持IE8及其以上。如果你的网站或应用使用一些javascript框架（如jQuery或MooTools）或你不需要支持老的浏览器，你可以自由的简化插件代码。
• 避免为移动设备提供大的图片（大于2000X1500px），它们会非常灵异的降低动画性能，更有甚，会引起崩溃，特别是在IOS系统上的safari浏览器上。解决方案：提供响应式图片或在单独的页面打开图片或使用支持图片响应的库（像 Leaflet）
• 更多问题，请参照快问快答页面（more in FAQ）

初始化

第一步：引入JS和CSS文件

你可以在 dist 目录 或 Github仓库 中找到他们。sass 和 编译后的js文件在src目录下，如果你对默认的UI样式或代码结构或注释不满意，我推荐你使用sass。

<!-- Core CSS file -->
<link rel="stylesheet" href="path/to/photoswipe.css"> 

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 

<!-- Core JS file -->
<script src="path/to/photoswipe.min.js"></script> 

<!-- UI JS file -->
<script src="path/to/photoswipe-ui-default.min.js"></script> 

不管你怎么引入或在什么地方JS和CSS文件，代码执行仅仅需要new PhotoSwipe(),所以，你可以在你需要的时候加载文件。

PhotoSwipe也支持AMD加载方式（如：RequireJS）和CommonJS，你可以像下面这样使用他们：

require([
	'path/to/photoswipe.js',
	'path/to/photoswipe-ui-default.js',
],function(PhotoSwipe, PhotoSwipeUI_default){
   
 	//var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default ...
    //    gallery.init() 
    //      ...
})

你也可以通过Bower（bower install photoswipe）或NPM（npm install photoswipe）安装PhotoSwipe

第二步：添加PhotoSwipe（.pswp）元素到DOM结构中

你可以通过js动态的添加HTML代码（在PhotoSwipe初始化之前），或在页面加载的时候，就把photoswipe（.pswp）元素写在页面中随页面一起加载。这段代码可以在任何地方添加，比较理想的是放在body元素中。你可以在多个画廊中使用这段代码，但是必须保证有相同的CSSclass，

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"