Cấp bậc tác giả:

HTML

Ad Gallery-jQuery Gallery Plugin-slideshow: Hiển thị bộ sưu tập hình ảnh với Thickbox và Lightbox

Được viết bởi QuangIT ngày 22/07/2013 lúc 04:40 PM
Ad Gallery là plugin của jQuery giúp bạn nhanh chóng tạo các gallery ảnh, các trang showcase.
  • 0
  • 2237
Tải tệp tin: Click ở đây

Ad Gallery-jQuery Gallery Plugin-slideshow: Hiển thị bộ sưu tập hình ảnh với Thickbox và Lightbox


jquery-ad-gallery.jpg

Tất cả những gì bạn cần là sử dụng unordered lists HTML, phần còn lại là của Ad Gallery. Bạn cũng có rất nhiều sự lựa chọn để tùy biến, dưới đây là một vài chức năng chính:
  • Tự động bắt đầu từ bất kỳ ảnh nào
  • Hỗ trợ ấn phím để chuyển ảnh
  • Tùy chọn hiệu ứng (slide, fade..)
  • Hiển thị mô tả cho từng ảnh
  • clicking the images close to the next-prev buttons will call more thumbnails
  • Có thể làm việc như một slideshow ảnh với nút start và stop
  • & nhiều tính năng khác...
Ad Gallery có thể tải trước ảnh giúp cho việc thể hiện mượt mà hơn, nếu ảnh chưa được tải, Ad Gallery sẽ hiển biểu tượng loading và chờ tới khi ảnh được tải xong. Ad Gallery còn có thể tự động điều chỉnh kích thước thẻ <div> bao quanh ảnh theo kích thước của ảnh.

Cách sử dụng

Trước tiên, bạn cần download jQuery, Ad GalleryCSS. Sau đó thêm vào trong thẻ <head> như sau:

<!-- Ad Gallery CSS -->
<link rel="stylesheet" type="text/css" href="css/jquery.ad-gallery.css" media="screen" /> 
<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script> 
<!-- Ad Gallery plugin -->
<script type="text/javascript" src="js/jquery.ad-gallery.js"></script>

Mã HTML như sau:

<div class="ad-gallery">
    <div class="ad-image-wrapper"></div>
    <div class="ad-controls"></div>
    <div class="ad-nav">
        <div class="ad-thumbs">
            <ul class="ad-thumb-list">
                <li>
                    <a href="images/1.jpg">
                        <img src="images/thumbs/t1.jpg" title="Title for 1.jpg">
                    </a>
                </li>
                <li>
                    <a href="images/2.jpg">
         <img src="images/thumbs/t2.jpg" longdesc="Description of the image 2.jpg">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Và gọi plugin Ad Gallery

$(document).ready(function() {
    $('.ad-gallery').adGallery();
});

Bạn có thể xem thêm các lựa chọn tùy biến trên trang chủ của plugin.

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML