PhotoSwipe - Gallery ảnh cho điện thoại và thiết bị cảm ứng

Đăng bởi Neo trong mục Hướng dẫn vào 27 tháng 5, 2011 | Comments

PhotoSwipe là một thư viện đầy đủ tính năng để làm gallery ảnh chạy được trên các máy tính bảng và điện thoại hiện đại. Photoswipe hoạt động độc lập không phụ thuộc vào một frameworks nào. (tuy nhiên có một phiên bản dành riêng cho jQuery)

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

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter