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ẽ.
Đang định mua Hosting, VPS?
Để duy trì blog, nên blog có làm affiliate cho một số nhà cung cấp hosting. Đây đều là những bên uy tín về chất lượng và đội ngũ support nên mọi người cứ yên tâm.
Bạn click vào link bên dưới trước khi mua là đã ủng hộ mình rồi, giá vẫn giữ nguyên. Mình cảm ơn nhiều!
- AZDIGI
- Tino
- iNET
- Tenten
- Nước ngoài
Cảm ơn bạn đã ủng hộ blog ❤️
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.
