Giới thiệu
Bạn đang tìm kiếm một cách tối ưu hóa trải nghiệm người dùng trên trang web của mình? Trong bài viết này, chúng ta sẽ khám phá cách tạo hiệu ứng popup lightbox cho ảnh với sự giúp đỡ của Fancybox. Đây là một giải pháp hiệu quả để làm cho hình ảnh trang web của bạn trở nên sinh động và thu hút hơn.
Popup Lightbox là gì?
Popup Lightbox là một công nghệ hiển thị hình ảnh, video, hoặc nội dung multimedia khác trên một trang web một cách tương tác. Nó xuất hiện trên cùng một cửa sổ nhỏ, thường làm mờ phần nền, làm nổi bật nội dung chính và cung cấp một trải nghiệm người dùng tốt hơn.
Fancybox là gì?
Fancybox là một thư viện JavaScript dễ sử dụng giúp tạo và quản lý các hiệu ứng popup lightbox trên trang web. Nó được xây dựng trên jQuery, cho phép tích hợp một cách linh hoạt và mạnh mẽ.
Để duy trì blog ngoài link rút gọn & mình có làm aff cho 1 số bên hosting.
Các nhà cung cấp uy tín về mặt chất lượng & đội ngũ support nên mọi người cứ yên tâm.
Nếu bạn đang có ý định mua Hosting, VPS mình có list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino: Business Hosting, NVMe Hosting và NVMe VPS
- iNet: Cloud VPS và Web Hosting
Tạo hiệu ứng popup lightbox với Fancybox cho ảnh
Copy & dán đoạn code bên dưới và dán trên thẻ đóng </body>
<!-- Lightbox -->
<b:if cond='data:view.isSingleItem'>
<link href='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
<script src='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js'/>
<script>//<![CDATA[
$('.post-body img').each(function() {
var img_link = $(this).attr('src')
$(this).wrap('<a href='+ img_link +' data-fancybox="gallery"></a>')
})
$('.tr-caption-container').each(function() {
var caption = $(this).find('.tr-caption').text()
$(this).find('a').attr('data-caption',caption)
})
//]]></script>
</b:if>
<!-- Lightbox -->Tìm hiểu thêm: Tạo nút Like Share Facebook cho blogspot/blogger
Kết luận
Trong bài viết này, An Trần Digital hướng dẫn cách tạo hiệu ứng popup lightbox cho ảnh bằng cách sử dụng Fancybox. Điều này không chỉ làm cho trang web của bạn trở nên đẹp mắt hơn mà còn cung cấp một trải nghiệm người dùng tốt hơn. Hãy thử nghiệm và tận dụng sức mạnh của Fancybox để tạo ra một trang web độc đáo và thu hút.
