ody>

Tạo Slide Image bằng jcarousel Plugin của jquery Nguồn bài viết: http://quangpro1610.blogspot.com/2011/11/tao-image-slide-bang-jcarousel-plugin.html#ixzz1mQFUy5cY

Thứ Ba, 14 tháng 2, 2012

Trong hướng dẫn này, mình sẽ sử dụng jQuery với Plugin jCarousel để  hiển thị slide các hình nhỏ và chú thích. Hình thu nhỏ có thể được cuộn với việc sử dụng các nút trước và sau khi bất kỳ hình ảnh thu nhỏ, các chú thích hoặc tiêu đề của hình nhỏ sẽ trượt lên.

Demo: Các bạn tải về chạy file index.html để xem trước slide.


Để thao tác bạn làm như sau: 

1. Tải jCarousel pulugin tại địa chỉ: http://sorgalla.com/projects/download-zip.php?jcarousel

2. Giải nén tập tin vừa tải, copy 2 thư mục lib(chứa thư viện javascript) và skins(chứa các giao diện cho slide) vào thư mục web của bạn.

3. Đặt đoạn mã sau vào thẻ <head> của trang web để load các thư viện javascript và css.

<!--jQuery library--><script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script><!--jCarousel library--><script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script><!--jCarousel skin stylesheet--><link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />

4. Đặt đoạn mã sau vào thẻ <head> để khởi tạo jCarousel.

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
visible: 4
});
});
</script>


5. Đặt đoạn mã sau vào thẻ <body> tại vị trí muốn hiển thị slide.

<ul id="mycarousel" class="jcarousel-skin-tango"><li><img src="images/image1.jpg" width="75" height="75" alt="" /></li><li><img src="images/image2.jpg" width="75" height="75" alt="" /></li><li><img src="images/image3.jpg" width="75" height="75" alt="" /></li><li><img src="images/image4.jpg" width="75" height="75" alt="" /></li></ul>
6. Và kết quả hiển thị slide trên trang web.


Nguồn: vnhow.

Tags: , ,

0 nhận xét: