Hôm nay mình sẽ chia sẻ cách Tạo hiệu ứng popup lightbox cho ảnh bài viết trong blogspot cụ thể là mình sẽ áp dụng cho theme Median - Ui. Cảm ơn anh Trần Thế Ngọc đã giúp đỡ em làm hiệu ứng này
Hiệu ứng sẽ có dạng như ảnh bên dưới
Với chế độ của theme Median - Ui thì khi bạn nhấp vô một tấm hình nào đó trong blog nó sẽ chạy thẳng tới đường dẫn URL của tấm ảnh đó luôn giống hình bên dưới.
Thật bất tiện khi muốn xem nhiều bức hình.
Đối với một số theme khác, bạn chỉ cần vào Cài Đặt và bật chế độ Hộp đèn hình ảnh lên là được
Nhưng đối với theme Median-ui thì dù có bật chế độ Hộp đèn hình ảnh lên cũng vẫn không được, vì người viết theme đã chặn chế độ này. Để bật được chúng ta làm như sau:
Bước 1: Vào Cài Đặt và tắt chế độ Hộp đèn hình ảnh
Bước 2: Bạn vào Chỉnh sửa HTML và tìm thẻ đóng </body> sau đó copy đoạn mã bên dưới trước thẻ </body>
<!-- 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[
$('.postEntry 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 -->
giống hình bên dưới
Lưu lại là xong nhé!
Chú ý là code trên đang áp dụng cho theme Median -Ui nhé.
Đối với các theme khác nếu không bật được Light Box bạn hãy dùng đoạn mã sau
<!-- 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 -->Nhớ là vẫn phải tắt chế độ LightBox mặc định của blogger nhé!
Chúc các bạn thành công!
Video hướng dẫn !