Hướng dẫn sử dụng fancyBox để làm image Gallery

Dưới đây là các bước hướng dẫn sử dụng fancyBox để làm image Gallery

  • Search google bằng từ khóa FancyBox hoặc truy cập trực tiếp web site fancyapps.com
  • Download và giải nén file, sau đó copy 2 thư mục: lib và source vào trong thư mục gốc của website
  • Tích hợp vào trang web với các bước sau:

Copy đoạn code sau vào tài liệu HTML, để ngay trước thẻ đóng </body>

 type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
 type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5">
 type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});

</body>
Thiết lập class cho các thẻ imgae như sau

<ul>
<li><a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt=""/></a></li>
</ul>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s