賽拉維的秋天

昨天強者阿當問我如何在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: Mobile Web, PhotoSwipe, Development, Framework