PhotoSwipe.js官網(wǎng)：http://photoswipe.com/ ，在這個(gè)網(wǎng)站上可以下載到PhotoSwipe的文件以及相關(guān)的例子。 

這個(gè)組件主要是用來(lái)展示圖片、相冊(cè)用的，還是很實(shí)用的。 

一、使用這個(gè)組件需要引入兩個(gè)js文件 
1 <script type="text/javascript" src="simple-inheritance.min.js">
2 <script type="text/javascript" src="code-photoswipe-1.0.11.min.js"> <!--當(dāng)前最新版的應(yīng)該是1.0.11 -->

二、然后頁(yè)面結(jié)構(gòu)可以是這樣子的 

<div id="Gallery">
  <div class="gallery-row">
    <div class="gallery-item"><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></div>
    <div class="gallery-item"><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></div>
    <div class="gallery-item"><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></div>
  </div>
  <div class="gallery-row">
    <div class="gallery-item"><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></div>
    <div class="gallery-item"><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></div>
    <div class="gallery-item"><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></div>
  </div>
</div>

其實(shí)在這段html代碼中除了頁(yè)面結(jié)構(gòu)外，真正有用的只有 id="Gallery"和<a href="圖片路徑"></a>（在后面會(huì)有說(shuō)明），其他的class神馬的只是起到美化最初的頁(yè)面結(jié)構(gòu)的作用（和你真正想要的效果的頁(yè)面不同，也就是說(shuō)，你只要按照上述頁(yè)面的結(jié)構(gòu)進(jìn)行排版，你想要的頁(yè)面效果是插件js自身完成的，是不需要你寫(xiě)效果布局的）。 

頁(yè)面需要的js和頁(yè)面結(jié)構(gòu)都有了，下面就是使用插件了。 

三、你可以采用兩種方式進(jìn)行插件的聲明 

1、是用瀏覽器默認(rèn)的方式addEventListener()的方式進(jìn)行 

document.addEventListener("DOMContentLoaded",function(){
  Code.photoSwipe('a','#Gallery');

//此處就涉及到上述頁(yè)面結(jié)構(gòu)中的 id="Gallery"和<a href="..."></a>，其中id="Gallery"是容器　　

//<a href="圖片路徑"></a>,此處href中一定是當(dāng)前所指向的圖片的路徑
},false);

2、使用Jquery的方式： 

$(document).ready(function(){
  $("#Gallery a").photoSwipe();
}); 

四、通過(guò)這樣的設(shè)置你的頁(yè)面大概會(huì)是這樣的 
一開(kāi)始的頁(yè)面效果：

點(diǎn)擊任意一張圖片后頁(yè)面的形式變成如下（這個(gè)頁(yè)面其實(shí)才是我真正想要的頁(yè)面）：

可以明顯的看到頁(yè)面上方<img />中的alt中的內(nèi)容，下方會(huì)有四個(gè)按鈕，依次代表：關(guān)閉頁(yè)面回到最初顯示的樣子（就是上上圖）、自動(dòng)播放、上一頁(yè)圖片、下一頁(yè)圖片。 

這樣一個(gè)相冊(cè)的效果就出現(xiàn)了。當(dāng)然在這個(gè)頁(yè)面可以使用鼠標(biāo)左右滑動(dòng)進(jìn)行切換，如果在手持設(shè)備上還可以通過(guò)手指的左右滑動(dòng)進(jìn)行。 

這個(gè)插件還有很多自己的屬性： 

allowUserZoom: 允許用戶(hù)雙擊放大/移動(dòng)方式查看圖片. 默認(rèn)值 = true
autoStartSlideshow: 當(dāng)PhotoSwipe激活后,自動(dòng)播放幻燈片. 默認(rèn)值 = false
allowRotationOnUserZoom: 只有 iOS 支持 - 允許用戶(hù)在縮放/平移模式下 用手勢(shì)旋轉(zhuǎn)圖像. 默認(rèn)值 = false
backButtonHideEnabled: 按返回鍵隱藏相冊(cè)幻燈片. 主要是 Android 和 Blackberry使用. 支持 BB6, Android v2.1, iOS 4 以及更新版本. 默認(rèn)值 = true
captionAndToolbarAutoHideDelay: 標(biāo)題欄和工具欄自動(dòng)隱藏的延遲時(shí)間. 默認(rèn)值為 = 5000(毫秒). 如果設(shè)為 0 則不會(huì)自動(dòng)隱藏(tap/單擊切換顯隱)
captionAndToolbarFlipPosition: 標(biāo)題欄和工具欄切換位置(讓 caption顯示在底部而 toolbar顯示在頂部). 默認(rèn)值 = false
captionAndToolbarHide: 隱藏 標(biāo)題欄和工具欄. 默認(rèn)值 = false
captionAndToolbarOpacity: 標(biāo)題欄和工具欄 的透明度(0-1). 默認(rèn)值 = 0.8
captionAndToolbarShowEmptyCaptions: 即使當(dāng)前圖片的標(biāo)題是空,也顯示標(biāo)題欄. 默認(rèn)值 = true
cacheMode: 緩存模式,Code.PhotoSwipe.Cache.Mode.normal (默認(rèn),正常) 或者 Code.PhotoSwipe.Cache.Mode.aggressive(激進(jìn),積極). 決定 PhotoSwipe 如何管理圖片緩存 cache.
Aggressive 模式將會(huì)積極地地設(shè)置非 "當(dāng)前，上一張,下一張"的圖片為空的類(lèi)型. 對(duì)于老版本iOS 瀏覽器下的大圖片內(nèi)存溢出將會(huì)很有用. 大多數(shù)情況下，normal模式就可以了。
doubleTapSpeed: 雙擊的最大間隔. 默認(rèn)值 = 300(毫秒)
doubleTapZoomLevel: 當(dāng)用戶(hù)雙擊的時(shí)候,放大的倍數(shù), 默認(rèn)的 "zoom-in"(拉近) 級(jí)別. 默認(rèn)值 = 2.5
enableDrag: 允許拖動(dòng)上一張/下一張圖片到當(dāng)前界面. 默認(rèn)值 = true
enableKeyboard: 允許鍵盤(pán)操作(左右箭頭切換，Esc退出,Enter自動(dòng)播放,空格鍵 顯/隱標(biāo)題欄/退出). 默認(rèn) = true
enableMouseWheel: 允許鼠標(biāo)滾輪操作. 默認(rèn) = true
fadeInSpeed: 淡入效果元素的速度(持續(xù)時(shí)間),毫秒. 默認(rèn) = 250
fadeOutSpeed: 淡出效果元素的速度(持續(xù)時(shí)間),毫秒. 默認(rèn) = 250
imageScaleMethod: 圖片縮放方法(模式). 可選值: "fit", "fitNoUpscale" 和 "zoom". 模式"fit" 保證圖像適應(yīng)屏幕. "fitNoUpscale" 和 "fit"類(lèi)似但是不會(huì)放大圖片. "zoom"將圖片全屏, 但有可能圖片縮放不是等比例的. 默認(rèn) = "fit"
invertMouseWheel: 反轉(zhuǎn)鼠標(biāo)滾輪。默認(rèn)情況下,鼠標(biāo)向下滾動(dòng)將切換到下一張,向上切換到上一張 . 默認(rèn) = false
jQueryMobile: 指示 PhotoSwipe 是否集成進(jìn)了 jQuery Mobile 項(xiàng)目. 默認(rèn)情況下, PhotoSwipe will try and work this out for you
jQueryMobileDialogHash: jQuery Mobile的window,dialog頁(yè)面 所使用的hash標(biāo)簽。 默認(rèn)值 = "&ui-state=dialog"
loop: 相冊(cè)是否自動(dòng)循環(huán). 默認(rèn) = true
margin: 兩張圖之間的間隔,單位是像素. 默認(rèn) = 20
maxUserZoom: 最大放大倍數(shù). 默認(rèn) = 5.0 (設(shè)置為0將被忽略)
minUserZoom: 圖像最小的縮小倍數(shù). 默認(rèn) = 0.5 (設(shè)置為0將會(huì)忽略)
mouseWheelSpeed: 響應(yīng)鼠標(biāo)滾輪的靈敏度. 默認(rèn) = 500(毫秒)
nextPreviousSlideSpeed: 當(dāng)點(diǎn)擊上一張,下一張按鈕后,延遲多少毫秒執(zhí)行切換. 默認(rèn) = 0 (立即切換)
preventHide: 阻止用戶(hù)關(guān)閉 PhotoSwipe. 同時(shí)也會(huì)隱藏 工具欄上的"close"關(guān)閉按鈕. 在獨(dú)享的頁(yè)面使用 (示例是源碼中的 examples/08-exclusive-mode.html). 默認(rèn) = false
preventSlideshow: 阻止自動(dòng)播放模式. 同時(shí)也會(huì)隱藏工具欄里的播放按鈕. 默認(rèn) = false
slideshowDelay: 自動(dòng)播放模式下，多長(zhǎng)時(shí)間播放下一張. Default = 3000(毫秒)
slideSpeed: 圖片滑進(jìn)視圖的時(shí)間. 默認(rèn) = 250(毫秒)
swipeThreshold: 手指滑動(dòng)多少像素才觸發(fā)一個(gè) swipe 手勢(shì)事件. 默認(rèn) = 50
swipeTimeThreshold: 定義觸發(fā)swipe(滑動(dòng))手勢(shì)的最大毫秒數(shù),太慢了則不會(huì)觸發(fā)滑動(dòng)，只會(huì)拖動(dòng)當(dāng)前照片的位置. 默認(rèn) = 250
slideTimingFunction: 滑動(dòng)時(shí)的 Easing function . 默認(rèn) = "ease-out"
zIndex: 初始的zIndex值. 默認(rèn) = 1000
enableUIWebViewRepositionTimeout: 檢查設(shè)備的方向是否改變。默認(rèn) = false
uiWebViewResetPositionDelay: 定時(shí)檢查設(shè)備的方向是否改變的時(shí)間 默認(rèn) = 500(毫秒)
preventDefaultTouchEvents: 阻止默認(rèn)的touch事件，比如頁(yè)面滾動(dòng)。 默認(rèn) = true
target: 必須是一個(gè)合法的DOM元素(如DIV)。默認(rèn)是window(全頁(yè)面)。而如果是某個(gè)低級(jí)別的DOM，則在DOM內(nèi)顯示，可能非全屏。

 如果不需要展示第一個(gè)頁(yè)面直接展示第二個(gè)頁(yè)面，可以這樣設(shè)置： 

$(document).ready(function(){  
  // Set up PhotoSwipe, setting "preventHide: true"
  var thumbEls = Code.photoSwipe('a', '#Gallery', { preventHide: true });
  Code.PhotoSwipe.Current.show(0);
}); 

 當(dāng)然這個(gè)插件還有很多其他的監(jiān)聽(tīng)函數(shù)： 

document.addEventListener('DOMContentLoaded',function(){
  //onBeforeShow 在gallery將要展示之前調(diào)用該方法
 Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeShow,function(e){
  console.log("onBeforeShow");
})；
  
// onshow 在gallery展示的時(shí)候調(diào)用
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShow,function(e){
  console.log("onShow");
});

// onBeforeHide 在gallery隱藏之前
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeHide, function(e){      
　　console.log('onBeforeHide');      
});
      
// onHide 在Gallery隱藏的時(shí)候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onHide, function(e){
  console.log('onHide');      
});
      
// onShowNext 在展示下一個(gè)的時(shí)候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShowNext, function(e){
  console.log('onShowNext');
});
  
// onShowPrevious 在展示上一個(gè)的時(shí)候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShowPrevious, function(e){
  console.log('onShowPrevious');
});
      
// onDisplayImage 在圖片展示
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onDisplayImage, function(e){
  console.log('onDisplayImage');
});
      
// onResetPosition 當(dāng)Gallery的大小和位置發(fā)生變化時(shí)或者設(shè)備的方向或者窗口大小改變時(shí)，出發(fā)該方法
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onResetPosition, function(e){
  console.log('onResetPosition');
});
      
// onSlideshowStart 當(dāng)gallery開(kāi)始滑動(dòng)展示的時(shí)候（此方法可能是我理解有誤，實(shí)驗(yàn)過(guò)程中一直沒(méi)有觸發(fā)過(guò)
的），原文是：When the gallery has started the slideshow
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onSlideshowStart, function(e){
  console.log('onSlideshowStart');
});
      
// onSlideshowStop 當(dāng)Gallery活動(dòng)結(jié)束的時(shí)候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onSlideshowStop, function(e){
  console.log('onSlideshowStop');
});
      
// onBeforeCaptionAndToolbarShow 在頂部狀態(tài)欄和底部的工具欄展示之前觸發(fā)
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, function(e){
  console.log('onBeforeCaptionAndToolbarShow');
});

// onBeforeCaptionAndToolbarHide 在頂部狀態(tài)欄和底部的工具欄隱藏之前觸發(fā)
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, function(e){
  console.log('onBeforeCaptionAndToolbarHide');
});
      
// onViewportClick 在gallery中點(diǎn)擊屏幕的時(shí)候觸發(fā)，此時(shí)一般會(huì)觸發(fā)onBeforeCaptionAndToolbarShow
或者onBeforeCaptionAndToolbarHide 方法
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onViewportClick, function(e){
  console.log('onViewportClick');
});
    
},false);

由于在photoSwipe官網(wǎng)中沒(méi)有發(fā)現(xiàn)api接口的調(diào)用方式，且現(xiàn)在的js水平也不咋地，所以它的一些api接口基本上不是很了解，但是我在查看它的例子的時(shí)候發(fā)現(xiàn)有個(gè)變量會(huì)經(jīng)常出現(xiàn)，Code.PhotoSwipe或者Code.PhotoSwipe.Current,所有我就在控制臺(tái)中進(jìn)行了一些實(shí)驗(yàn)，當(dāng)我輸入Code.PhotoSwipe的時(shí)候，出現(xiàn)了如下內(nèi)容：

 雖然不能完全看懂里面是什么，但是能看到其中有Current這個(gè)元素，接著在控制臺(tái)輸入Code.PhotoSwipe.Current,得到下面的內(nèi)容：

在這里面可以發(fā)現(xiàn)更多的信息，比如:currentIndex表明當(dāng)前所處的圖片是在列表中的索引位置，整個(gè)連接起來(lái)就是 Code.PhotoSwipe.Current.currentIndex 代表當(dāng)前圖片所處的索引位置，這個(gè)信息對(duì)我來(lái)說(shuō)很重要，我們可以通過(guò)這個(gè)信息在不同的頁(yè)面中展示不同的頁(yè)面信息。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論