PhotoSwipe

昨天強者阿當問我如何在Mobile Web上做出像原生程式一樣的照片瀏覽功能,
我們討論到了之前柯南介紹的iScroll framework
不過阿當的需求除了照片可以用手勢滑動外,
還要可以用雙手指的手勢放大與縮小照片,
雖然理論上可以手工硬刻出這個功能,
不過如果有現成的 framework 可以使用,
應該也是開發者不錯的選擇,
此時,
我發現了 Photo Swipe!



上面這個短片,
很快速但精要地介紹使用 Photo Swipe可以產生的效果。

Photo Swipe很容易上手,
我們可以直接下載這個framework的zip檔,
就可以取得對應的js檔案。
當然我們也可以直接到github上的位置取得最新的程式碼,
Photo Swipe github的位置是 https://github.com/codecomputerlove/PhotoSwipe

<script type="text/javascript" src="simple-inheritance.min.js">
<script type="text/javascript" src="code-photoswipe-1.0.9.min.js">

include以上兩個主要的js檔案,
並結合 jquery framework ,
就可以使用類似下面語法,
讓相片瀏覽的功能生效。

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

當然別忘了對應的HTML程式

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

PhotoSwipe還有一些屬性可以設定,
例如 allowRotationOnUserZoom 這個屬性,
可以開啟或關閉雙指手勢放大縮小照片時,
也可以一併對照片轉角度的動作。
要讓屬性生效的語法也很簡單,
基本上在呼叫photoSwipe的函式中加上屬性設定即可,
例如:

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

有興趣的朋友,
可以試試看這個framework,
它的官方網址是 http://www.photoswipe.com/

Technorati Tags: , , ,

arrow
arrow

    賽拉維‧柯南 發表在 痞客邦 留言(0) 人氣()