PhotoSwipe : Image Gallery ใช้กับ Touch Screen

วันนี้มี Plugin ใช้ทำ Image Gallery สำหรับใช้กับ Touch Screen ได้ มาชมวิดีโอแนะนำตัว PhotoSwipe กันก่อนนะครับ

https://vimeo.com/24124859

PhotoSwipe

ในเว็บของ PhotoSwipe นั้นได้อธิบายเกี่ยวกับตัว Plugin ตัวนี้ไว้ว่า

What is it?PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.Who is it for?Developers and designers requiring an interactive image gallery on their mobile website with the look and feel of a native app.Why use it?PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

ใช้กับมือถือ platform ไหนได้บ้าง

สำหรับตัว PhotoSwipe นั้นสนับสนุน iOS, Android รวมถึง BlackBerry และใช้งานคู่กับ jQuery หรือ PhoneGap ได้ด้วยครับ

วิธีการใช้งาน PhotoSwipe

ดาวน์โหลดตัว PhotoSwipe ที่นี่เลยครับ Download PhotoSwipe หลังจากนั้นก็เพิ่ม code นี้ไปที่ส่วน head นะครับ

<script type="text/javascript" src="klass.min.js"></script>
<script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>

และเรียกใช้งานโดย

[javascript]
// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener('DOMContentLoaded', function(){

var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );

}, false);
[/javascript]

แต่ถ้าถนัดเป็น jQuery ก็เรียกใช้งานแบบนี้เลยครับ

[javascript]
//jQuery version
$(document).ready(function(){

var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

});
[/javascript]

และในส่วน HTML เพื่อใช้ประกอบให้ตัว PhotoSwipe ทำงานได้นั้น ก็มีลักษณะแบบนี้ครับ

<ul id="Gallery">
	<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
	<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
	<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
	<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
	<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
	<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>

ซึ่งตัว PhotoSwipe นั้น เราสามารถจะปรับแต่งลูกเล่นมันได้หลากหลายพอสมควร รายละเอียดเพิ่มเติมและตัวอย่างการใช้งาน PhotoSwipe นั้น ให้ไปดูที่เว็บของ PhotoSwipe เลยครับ

ที่มา : PhotoSwipe