Lưu ý:
Tạo hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Lightgallery
</body> . Lưu Template lại là xong.<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<!-- Lightbox with lightGallery -->
<b:if cond='data:view.isSingleItem'>
<script>//<![CDATA[
function loadCSS(filename,filetype){
if(filetype=='css'){
var
fileref=document.createElement('link')
fileref.setAttribute('rel','stylesheet')
fileref.setAttribute('href',filename)
}
if(typeof
fileref!='undefined'){document.getElementsByTagName('head')[0].appendChild(fileref)}
}
$(function(){
if($('.separator
a,.tr-caption-container a').length!=''){
$('.separator
a,.tr-caption-container a').each(function(){
$(this).attr('href',$(this).attr('href')+'?dl=1')
})
$('.tr-caption-container a').each(function(){
$(this).attr('data-sub-html',$(this).parents('.tr-caption-container').find('.tr-caption').text())
})
var is_load=0
function loadpl(){
if(is_load==0){
is_load=1
loadCSS('https://cdn.jsdelivr.net/gh/ntlruby/css/lightgallery.css','css')
loadCSS('https://cdn.jsdelivr.net/gh/ntlruby/css/lg-transitions.css','css')
$.getScript('https://cdn.jsdelivr.net/gh/ntlruby/javascript/lightgallery.js').done(function(){
$('.post-body').lightGallery({
selector: '.separator a,.tr-caption-container a',
thumbnail:true,
showThumbByDefault: false,
subHtmlSelectorRelative: true,
mode:
'lg-zoom-out'
})
})
}
}
$(window).scroll(function(){loadpl()})
$(window).mousemove(function(){loadpl()})
setTimeout(function(){loadpl()},3000)
}
})
//]]></script>
</b:if>
<!-- Lightbox with lightGallery -->
jquery.min.js, các bạn kiểm tra nếu Template mình đã có rồi thì xóa bỏ link trong code của mình đi nhé. Và các bạn chú ý chỗ mình tô vàng, đó là hiệu ứng chuyển ảnh. Các bạn có thể xem qua demo tại https://www.lightgalleryjs.com/demos/transitions và thay bằng hiệu ứng mà mình ưng ý.
Facebook