photoswipe.js插件
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/01.jpg"><img src="images/thumb/01.jpg" alt="01" /></a></div><div class="gallery-item"><a href="images/02.jpg"><img src="images/thumb/02.jpg" alt=" 02" /></a></div><div class="gallery-item"><a href="images/03.jpg"><img src="images/thumb/03.jpg" alt=" 03" /></a></div></div><div class="gallery-row"><div class="gallery-item"><a href="images/04.jpg"><img src="images/thumb/04.jpg" alt="04" /></a></div><div class="gallery-item"><a href="images/05.jpg"><img src="images/thumb/05.jpg" alt="05" /></a></div><div class="gallery-item"><a href="images/06.jpg"><img src="images/thumb/06.jpg" alt=" 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è)插件還有很多自己的屬性:
如果不需要展示第一個(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è)面信息。
六.下面是自己簡(jiǎn)單列表事列
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>測(cè)試</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="apple-touch-fullscreen" content="yes" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><link href="css/styles.css" rel="stylesheet" type="text/css" /><link href="css/photoswipe.css" rel="stylesheet" /> </head> <body><ul id="Gallery"><li><a href="images/full/001.jpg"><img src="images/full/001.jpg" alt="獅子巖觀光留影" ></a></li><li><a href="images/full/003.jpg"><img src="images/full/003.jpg" alt="獅子巖觀光留影" ></a></li><li><a href="images/full/008.jpg"><img src="images/full/008.jpg" alt="獅子巖觀光留影" ></a></li><li><a href="images/full/009.jpg"><img src="images/full/009.jpg" alt="獅子巖觀光留影" ></a></li></ul> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script src="js/simple-inheritance.min.js"></script> <script src="js/code-photoswipe-1.0.11.min.js"></script> <script type="text/javascript">document.addEventListener('DOMContentLoaded', function () {Code.photoSwipe('a', '#Gallery');}, false); </script> </body> </html> css body,ul,li{ padding: 0; margin: 0; } img { border: none; } ul,li{list-style: none; }#Gallery li{ float: left; width: 33.33333333%; } #Gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c; } #Gallery li img { display: block; width: 100%; height: 100px; }總結(jié)
以上是生活随笔為你收集整理的photoswipe.js插件的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: NGINX负载均衡+监控
- 下一篇: 橡皮擦的英语_多省停考全国英语等级考试!