Nếu bạn đã quá nhàm chán với hiệu ứng popup lightbox mặc định trong Blogger, có lẽ bạn nên thử sử dụng qua Fancybox vì suy cho cùng nếu bạn có sử dụng lightbox mặc định thì trang của bạn vẫn phải tải thư viện link css và js mặc định của Blogger. Với lại nếu đem so sánh thì Fancybox3 có ưu điểm vượt trội hơn rất nhiều.
Hãy thử hình dung khi nhấp chuột vào một ảnh bất kỳ có trong bài viết sẽ hiển thỉ lên popup lightbox tuyệt vời như ảnh minh họa bên dưới với nút chạy slide tự động, nút hiển thị tất cả các ảnh kế bên và chọn ảnh muốn xem.
Vậy lightbox là gì? Giải thích ngắn gọn nó là một thư viện JavaScript hiển thị hình ảnh và video bằng cách lấp đầy màn hình và làm mờ phần còn lại của trang web.
Tại sao bạn nên sử dụng Fancybox cho blog của mình? Đó là vì nó đã quá nổi tiếng và quen thuộc và rất nhiều trang web với các nền tảng sử dụng. Hơn tất cả là vì nó dễ dử dụng không phải cấu hình nhiều chỉ cần chèn link thư viện css và script của fancybox. Không làm ảnh nhiều hưởng đến tốc độ tải trang và vỡ bố cục trang web của bạn vì cơ chế khi bạn click vào ảnh thì thẻ body mới được thêm class của fancybox để hiện thị lightbox.
Ngoài ảnh ra Fancybox còn hỗ trợ cho video, iframe rất thích hợp cho các blog có chủ đề về ảnh, video hay ebook. Để tìm hiểu sâu hơn bạn có thể truy cập trang chính thức Fancybox tại đó có giới thiệu chi tiết kèm theo hướng dẫn luôn.
Nếu bạn vẫn chưa hình dung bạn có thể truy cập bài viết này click vào ảnh để xem demo trước nhé. Còn dưới đây là hướng dẫn chèn Fancybox3 vào Blog
Để chạy được lightbox bạn cần 2 yếu tố bắt buộc
+ Yếu tố cần: Thư viện Fancybox3 nằm trước thẻ đóng </body> hay trước </head> đều được
<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'/>
Fancybox sẽ không hoạt động nếu thiếu link thư viện jquery tối thiểu 1.9 trở lên và hoạt động tốt nhất với version 3 trở lên và lưu ý link js của jquery phải được đặt nằm trên link js của fancybox. Ngoài ra nếu bạn chỉ muốn sử dụng lightbox cho trang bài viết thôi thì có thể đặt điều kiện cho trang
<b:if cond='data:view.isSingleItem'>
<!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết -->
</b:if>
<b:if cond='data:view.isPost'>
<!-- Nội dung chỉ hiển thị trên trang bài viết -->
</b:if>
<b:if cond='data:view.isPage'>
<!-- Nội dung chỉ hiển thị trên trang tĩnh static page -->
</b:if>
+ Yếu tố đủ: lightbox sẽ chỉ hoạt động với mẫu sau:
<a href="Link ảnh" data-fancybox="">
<img src="Link ảnh" alt="" />
</a>
Ví dụ:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xfHFHue3BX5Qm8ldgBisFCMV0T6-ff5qE86C_MeiGrvkFFMfl5LYx37P1hZXYEYc7ZbR_Iiat8wZZa-AizKTpQBHuozuOCr98qpCDNGnG6KLCUOtQF9sMgBQ3asN4eHuk8DAuB2xXKM/s1600/dao-hon-noi-nha-trang-1-min.jpg" data-fancybox="image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xfHFHue3BX5Qm8ldgBisFCMV0T6-ff5qE86C_MeiGrvkFFMfl5LYx37P1hZXYEYc7ZbR_Iiat8wZZa-AizKTpQBHuozuOCr98qpCDNGnG6KLCUOtQF9sMgBQ3asN4eHuk8DAuB2xXKM/s1600/dao-hon-noi-nha-trang-1-min.jpg" alt="">
</a>
Nếu sử dụng ảnh đơn thì thêm thuộc tính data-fancybox="image" còn nếu sử dụng slide thì thêm thuộc tính data-fancybox="gallery" trong thẻ tag a của link ảnh. Tham khảo thêm >>
Ngoài ra nếu bạn muốn chèn lightbox cho video thì sử dụng mẫu sau:
<a data-fancybox="" href="link video">
<img alt='' src='Link ảnh'/>
</a>
Ví dụ:
<a data-fancybox="" href="https://www.youtube.com/watch?v=CbKEbx55Rdk">
<img alt="" src="https://img.youtube.com/vi/CbKEbx55Rdk/mqdefault.jpg"/>
</a>
Phần quan trọng nhất là xử lý với những bài viết cũ đã đăng không có thuộc tính data-fancybox="gallery" trong link ảnh hoặc khi soản thảo bài viết mới nhưng lười không thêm. Lúc này bạn cần thêm một đoạn script nhỏ nửa để thêm thuộc tính data-fancybox="gallery" vào link ảnh tự động.
Trong Blogger khi bạn chèn ảnh bằng cách tải ảnh lên thì cấu trúc của link ảnh có 2 dạng: Dạng không có chú thích và dạng có chú thích
+ Dạng không có chú thích:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWsa4RdmbByIkmrIoxmANDx24csCZ9CIy_pSlF1MMXAJy_XrSgu-yldvZH954VmvuuVkgZOvaSsYB_Pw_u8hy7-N9P8Huw1qL79kis-gyP-0TrZYyARYqR8gdohVg30PABd-us6-quK8/s1600/dao-hon-noi-nha-trang-12-min.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="">
<img border="0" data-original-height="810" data-original-width="1080" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWsa4RdmbByIkmrIoxmANDx24csCZ9CIy_pSlF1MMXAJy_XrSgu-yldvZH954VmvuuVkgZOvaSsYB_Pw_u8hy7-N9P8Huw1qL79kis-gyP-0TrZYyARYqR8gdohVg30PABd-us6-quK8/s1600/dao-hon-noi-nha-trang-12-min.jpg" alt=""/>
</a>
</div>
+ Dạng có chú thích:
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;">
<tbody>
<tr>
<td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxAz6tKu9nvPNUuH57kArQu31s225nSWFfszgwhtNTvZoVtYWi1XJdFMc5oOL8Ave03C6XfOHPJbG8Y6iPamf4-H6NdyFyi7qNvbYz2gY0g7SU7CKTzRBmZs7abhhBduL9aRu9z990KcE/s1600/dao-hon-noi-nha-trang-2-min.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;" title=""><img border="0" data-original-height="620" data-original-width="620" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxAz6tKu9nvPNUuH57kArQu31s225nSWFfszgwhtNTvZoVtYWi1XJdFMc5oOL8Ave03C6XfOHPJbG8Y6iPamf4-H6NdyFyi7qNvbYz2gY0g7SU7CKTzRBmZs7abhhBduL9aRu9z990KcE/s1600/dao-hon-noi-nha-trang-2-min.jpg" alt=""/></a></td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">Còn gì tuyệt vời hơn khi đứng ở cầu thang đá ngắm nhìn xuống dưới.</td>
</tr>
</tbody>
</table>
Như vậy bạn cần chèn thuộc tính data-fancybox="gallery" trong các phần tử: .separator a và .tr-caption-container a, cụ thể ta có thêm đoạn script nhỏ sau để thêm tự động:
<script>//<![CDATA[
$('.separator a,.tr-caption-container a').attr('data-fancybox','gallery')
//]]></script>
Để thêm chú thích vào ảnh hiển thị trong lightbox bạn thêm đoạn script sau:
<script>//<![CDATA[
$('.tr-caption-container').each(function() {
var caption = $(this).find('.tr-caption').text()
$(this).find('a').attr('data-caption',caption)
})
//]]></script>
Đến đây lại nảy sinh ra hai vấn đề đó là link ảnh đó chỉ có thẻ tag a mà không có thẻ div với class separator và tr-caption-container bao quanh hoặc trong bài viết chỉ sử dụng mỗi link ảnh img mà không có thẻ div hay thẻ a bao quanh. Để giải quyết điều đó bạn sử dụng đoạn script sau thêm thẻ a với thuộc tính tự động
<script>//<![CDATA[
$('.post-body img').each(function() {
var img_link = $(this).attr('src')
$(this).wrap('<a href='+ img_link +' data-fancybox="gallery"></a>')
})
//]]></script>
Bạn lưu ý .post-body mình in đậm đó là thẻ div bao quanh nội dung bài viết thường thì Blogger vẫn hay sử dụng nhưng có theme sẽ không có như vậy bạn cần kiểm tra thay cho phù hợp.
Kết luận: Nếu bạn đọc đến đây mà bạn vẫn chưa biết cách làm thế nào thì bạn cứ chèn tất cả đoạn code sau trước thẻ đóng </body> là xong
<!-- Lightbox with Fancybox3 -->
<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 with Fancybox3 -->
Sau này nếu không sử dụng nữa bạn vào theme xóa đoạn code đã chèn đi là xong. Và lưu ý quan trọng nếu dã sử dụng lightbox trình chiếu ảnh bằng Fancybox, ban đừng quên tắt hiệu ứng hộp đèn mặc định của Blogger trong phần Cài đặt > Bài đăng, nhận xét và chia sẻ > Hiển thị hình ảnh với hiệu ứng Hộp đèn chọn Có thành Không.
