Photoswipe có giao diện khá đơn giản, gần giống với photo gallery sẵn có trong iOS, và có khả năng tự điều chỉnh kích thước hình ảnh khi xoay thiết bị.

Photoswipe cung cấp cho bạn rất nhiều lựa chọn tùy biến gallery như tốc độ hiện/ẩn của hiệu ứng, hỗ trợ zoom, cách thức scale ảnh... PhotoSwipe làm việc tốt trên iPhone, iPad, Android, Blackberry và các trình duyệt trên máy tính.

Cách sử dụng

Tải photoswipe về và thêm vào website của bạn:

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

Gọi photoswipe lên làm việc

// Ví dụ cài đặt PhotoSwipe với tất cả các thẻ link ở trong #Gallery
document.addEventListener('DOMContentLoaded', function(){
	Code.photoSwipe('a', '#Gallery');
}, false);

Nếu sử dụng jQuery, bạn gọi photoswipe như sau:

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

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

Bạn có thể xem thêm các cấu hình khác tại trang chủ của photoswipe