Tạo hiệu ứng popup lightbox cho ảnh bài viết trong blogspot với lightgallery

Bài viết cũ trong blog, mình có giới thiệu plugin fancybox3 để tạo hiệu ứng popup lightbox cho ảnh bài viết, bài hôm nay mình giới thiệu thêm một plugin khác cũng có tính năng tương để các bạn có thêm lựa chọn chèn vào blog của mình.

Plugin mình giới thiệu tên lightgallery, bạn có thể xem demo và các tùy chọn theo địa chỉ https://sachinchoolur.github.io/lightGallery. Để cà đặt và sử dụng plugin này làm hiệu ứng popup lightbox cho ảnh bài viết, bạn cần tắt "Hiển thị hình ảnh với hiệu ứng Hộp đèn" trong Cài đặt bài đăng, nhận xét và chia sẻ hoặc blog đã tắt hoặc chặn js mặc định.

Dưới đây là đoạn script mình build sẵn dạng mì ăn liền, để các bạn không biết code chỉ việc chèn vào blog thôi, script được chèn trước thẻ đóng </body> trong theme

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

<b:if cond='data:view.isPost'>

<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/vietblogdao/css/lightgallery.min.css','css')

          loadCSS('https://cdn.jsdelivr.net/gh/vietblogdao/css/lg-transitions.min.css','css')

          $.getScript('https://cdn.jsdelivr.net/gh/vietblogdao/js/lightgallery.min.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>

Riêng cái tùy chọn hiểu ứng chuyển ảnh mình đánh dấu màu xanh, các bạn xem demo https://sachinchoolur.github.io/lightGallery/demos/transitions.html và thay các bằng hiệu ứng mà mình cảm thấy ưng ý

Ngoài ra bạn có thể sử dụng plugin này làm hiệu ứng lightbox chính cho các thư viện ảnh element khác trong blog nếu bạn muốn tìm hiểu sâu. Ngoài tùy chọn xem ảnh còn tùy chọn cho video, bản đồ đó các bạn. Các bạn cứ tìm hiểu tại trang chủ plugin thôi còn plugin css va js mình đã tạo sẵn link cho các bạn rồi đó.