Hiệu ứng Popup Lightbox Cho ảnh Bài Viết Blogspot Với Thư Viện ...

Có thể bạn quan tâm

Hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Lightgallery Hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Lightgallery

Trang Chủ / Blogger / Hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Lightgallery Hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Lightgallery Bài trước mình chia sẻ Hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Fancybox3. Bài hôm nay mình chia sẻ thêm với các bạn thư viện Lightgallery để các bạn thêm sự lựa chon cho Blog của mình. Thư viện Lightgallery mình đã có chia sẻ cách tạo trang album ảnh cho Blogspot nhưng cách đó chỉ áp dụng cho trang mà các bạn tạo Album ảnh thôi. Bây giờ sẽ áp dụng nó cho tất cả các trang bài viết nhé.
Lưu ý:
Cũng như 2 bài trước, trường hợp Template đã có hiệu ứng Lightbox, các bạn đừng quên tắt hiệu ứng hộp đèn mặc định của Blogger tại trang quản trị Blogger -> Cài đặt -> Bài Đăng -> Tắt nút "Hộp đèn hình ảnh" Mình không nhắc lại hiệu ứng Lightbox là gì? và cũng không giới thiệu lại thư viện Lightgallery nữa mà chúng ta bắt đầu luôn.
Tạo hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Lightgallery
Các bạn vào trang quản trị Blogger -> Chủ đề -> Chỉnh sửa HTML sau đó copy và dán toàn bộ code dưới đây vào trước thẻ </body> . Lưu Template lại là xong.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>


<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>


Trong code có link 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 ý.Chúc các bạn thành công! Hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Lightgallery NTLRUBY tháng 8 17, 2021 Bài đăng Mới hơn Bài đăng Cũ hơn Trang chủ Blogger
NTLRUBY
Xin chào! Mình là Nguyễn Thành Long, mình tạo blog này như một không gian lưu trử tài liệu để tiện cho việc tìm lại sau này và chia sẻ chúng cho những ai cần đến. - Tất cả các bài trên blog một số mình tự viết và một số là copy từ nhiều nguồn trên internet (sẽ ghi rõ nguồn ở cuối bài đăng). - Thế nên: - Blog được xây dựng trên tinh thần chia sẻ và học hỏi. - Mong các bạn khi xem blog cũng trên tinh thần này và có thái độ văn minh lịch sự. Mình xin chân thành cảm ơn!