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

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.

bloggeg lightgallery

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 ý

blogger_lightgallery_transitions

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 đó.

7 Nhận xét
  1. Bài viết rất hay. https://hatinhit.com

    Trả lờiXóa
    Trả lời
    1. Em muốn chèn liên kết vào nhận xét tạo backlink thì chèn như thế này: <a href="https://hatinhit.com">https://hatinhit.com</a>

      Xóa
  2. Very nice post bro, thank you for this.

    Sorry am speaking English, I cant speak vietnamese language.

    Trả lờiXóa
    Trả lời
    1. Thank you for commenting this article 😀

      Xóa
    2. Ok..... Hro I have send you a message via contact form.
      Please reply me🙏🙏

      Xóa
  3. Nó trờ thành xu thế rồi, đẹp mà nhẹ nữa. Mình đã làm theo cho web Vay tiền nhanh. Cảm ơn ad nha, hay lắm đó ah

    Trả lờiXóa