jQuery Image Gallery: Spacegallery

Đăng bởi Neo trong mục Miễn phí vào 26 tháng 7, 2008 | Comments

Spacegallery là 1 gallery ảnh rất đơn giản nhưng khá đẹp được xây dựng với jQuery. Gallery sử dụng hiệu ứng grow - fade out

Sử dụng như thế nào?

Các sử dụng Spacegallery khá dễ dàng, đầu tiên bạn cần thêm link tới file css và javascript, có 4 file như hình dưới (tất nhiên nếu trang của bạn chưa có jquery thì bạn phải thêm nó vào nhé)

  <link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
  <script type="text/javascript" src="js/eye.js"></script>
  <script type="text/javascript" src="js/utils.js"></script>
  <script type="text/javascript" src="js/spacegallery.js"></script>

Mã HTML:

<div id="myGallery" class="spacegallery">
  <img src="images/demo1.jpg" alt="" />
  <img src="images/demo2.jpg" alt="" />
</div>

Bạn cần khai báo đoạn javascript để id myGallery trở thành spacegallery như hình dưới (bạn có thể khai báo ở bất kỳ đâu trên trang)

$('#myGallery').spacegallery({loadingClass: 'loading'});

Bạn có thể tạo nhiều gallery trên 1 trang, với mỗi gallery bạn cần có 1 id khác nhau và khai báo như trên

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