Hướng dẫn thiết lập HTML5 LightBox - Plugin jQuery Image và Video LightBox cho website của bạn
HTML5 Lightgox thêm các hiệu ứng hộp đèn phong cách cho hình ảnh, video YouTube, Vimeo, mp4, m4v, flv, ogg, ogv và webm trên trang web của bạn. Thật dễ dàng để cài đặt, xây dựng thương hiệu dễ dàng và hoạt động trên Windows, Linux, Mac, Android, iPhone, iPad và tất cả các trình duyệt web hiện đại.
Cài đặt nhanh
-
Tải xuống phiên bản miễn phí HTML5 LightBox, giải nén tệp đã tải xuống, sao chép hoặc tải thư mục
html5lightboxlên máy chủ web của bạn -
Đặt các file
jquery.jsvàhtml5lightbox.jsnằm trong thư mục html5lightbox trước </head> của trang web của bạn. Nếu bạn đã có tập lệnh jQuery trong trang web của mình, bạn cần thêmhtml5lightbox.jssau tệp jQuery của mình. Phiên bản yêu cầu tối thiểu của jQuery là 1.6.
<script type="text/javascript" src="html5lightbox/jquery.js"></script>
<script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>
Nếu website của bạn đã có jQuery thì đừng thêm dòng jquery.js, chỉ thêm dòng html5lightbox.js SAU dòng jquery hiện có trên website của bạn:
<script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>
- Thêm thuộc tính
class="html5lightbox"vào bất kỳ thẻ liên kết nào để kích hoạt hiệu ứng Hộp đèn như ví dụ các liên kết ở dưới
<a href="images/Toronto_1024.jpg" class="html5lightbox" title="Toronto">Image</a>
<a href="images/carousel.mp4" class="html5lightbox" data-width="480" data-height="320" title="WordPress Carousel">Video</a>
Để hiển thị chú thích, bạn có thể sử dụng thuộc tính tiêu đề, để xác định kích thước của tệp video hoặc Flash SWF, bạn có thể sử dụng thuộc tính data-width và data-height. Nếu bạn có một nhóm hình ảnh và video, bạn có thể sử dụng thuộc tính data-group để tạo thư viện. Bạn có thể sử dụng data-thumbnail để thêm điều hướng hình thu nhỏ vào thư viện.
<a href="images/Toronto_1024.jpg" class="html5lightbox" data-group="mygroup" data-thumbnail="images/Toronto_96.jpg" title="Toronto">Image1</a>
<a href="images/Sunrise_1024.jpg" class="html5lightbox" data-group="mygroup" data-thumbnail="images/Sunrise_96.jpg" title="Sunrise">Image2</a>
<a href="images/carousel.mp4" class="html5lightbox" data-group="mygroup" data-thumbnail="images/wordpresscarousel_120.jpg" data-width="480" data-height="320" title="Wordpress Carousel">Video</a>
Dễ dàng xây dựng watermark
Thật dễ dàng để thêm watermark hình ảnh vào HTML5 LightBox, tất cả những gì bạn cần làm là thêm các tập lệnh sau vào phần <head> trên trang web của mình.
<script type="text/javascript">
var html5lightbox_options = {
watermark: "http://html5box.com/images/html5boxlogo.png",
watermarklink: "http://html5box.com"
};
</script>
Nếu bạn không thích liên kết trên hình mờ, bạn có thể thay đổi mã như sau:
<script type="text/javascript">
var html5lightbox_options = {
watermark: "http://html5box.com/images/html5boxlogo.png",
watermarklink: ""
};
</script>
Các bạn có thể xem demo trước ở đây
All rights reserved
