Tạo Hiệu Ứng Popup LightBox Ảnh Với Thư Viện LightGallery - Luviet

Cách Tạo Hiệu Ứng Popup LightBox Ảnh Với Thư Viện LightGallery

Trong bài viết này, dịch vụ thiết kế website chuyên nghiệp tại Đồng Nai chỉ hướng dẫn trên website blogspot thôi các bạn nhé. Nếu bạn cần cài đặt nó trên wordpress hay các nền tảng khác thì hãy ib cho chúng tôi.

Hiệu ứng Lightbox là gì?

Lightbox là một lớp phủ hoặc một cửa sổ bật lên đi qua trang web và hiển thị một bức ảnh. Chúng hiển thị bức tranh và làm tối phần còn lại của trang, nhưng vẫn cho phép nó hiển thị xung quanh các cạnh.

Đây là một cách vô cùng tuyệt vời để giới thiệu ảnh và sản phẩm của bạn một cách chuyên nghiệp. Chúng được sử dụng cho hình ảnh, biểu mẫu chọn tham gia, video, trình chiếu và hơn hết là có thể trỏ link liên kết vào nơi bạn mong muốn.

Chúng thanh lịch, dễ thực hiện và chúng mang lại cho trang web của bạn một giao diện đẹp mắt cũng như chuyên nghiệp.

Thư viện Lightgallery là gì?

LightgalleryJS là một thư viện Javascript giúp bạn tạo ra hiệu ứng lightbox cho trang web của bạn một cách nhanh chóng và dễ dàng. Và việc cài đặt nó vô cùng đơn giản.

Hãy xem kỹ hướng dẫn của Thiết Kế Website Luviet Tại Đồng Nai nhé bạn.

Xem lại:

Blogspot-Blogger là gì?

Làm quen với giao diện Blogger?

Bước 1: Tắt hiệu ứng hộp đèn mặc định của Blogger

- Vào trang quản trị Blogger -> Cài đặt -> Bài Đăng -> Tắt nút "Hộp đèn hình ảnh"

Bước 2: Cài thư viện Light Gallery

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 chữ đỏ dưới đây vào trước thẻ </body> nhé. Nhớ sao lưu code trước khi đụng vào nó nhé, lỡ sai còn có cái mà gỡ.

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

Nhớ lưu lại.

Bước 4: Đưa thư viện ảnh vào trang hoặc bài đăng.

Chuyển sang chế độ HTML và Copy đoạn code màu xanh dưới đây vào nơi cần đặt.

<h3 style="text-align: center;">Tiêu đề cho Album ảnh</h3>

<section id="ruby-photogallery">

Thêm ảnh vào đây

</section>

<style>

h3{ text-align:center; text-shadow: 0px 5px 10px #234D3C; }

#ruby-photogallery{line-height:0;-webkit-column-count:4;-webkit-column-gap:0;-moz-column-count:4;-moz-column-gap:0;column-count:4;column-gap:0}

#ruby-photogallery img{width:97%!important;height:auto!important;padding:2px;margin:2px;box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);}

</style>

Load ảnh như bình thường vào chỗ Thêm ảnh vào đây nhé.

Bước 5: Lưu lại và xem kết quả.