[Blogger] Hướng dẫn tích hợp Light Gallery plugin cho blogspot

Hello xin chào các bạn, hôm nay hung1001 sẽ mang đến cho các bạn 1 plugin xem ảnh cực kì tuyệt vời thay thế cho trình xem ảnh lightbox do blogger cung cấp.

Bạn có thể xem review nhanh các chức năng của nó tại đây
YPH5MEha_Z4
Ok, thấy thích rồi đúng không, hãy cùng tôi tích hợp nó vào website của bạn nhé

Đồ nghề gồm

• Jquery: https://cdnjs.com/libraries/jquery
• Light Gallery: https://cdnjs.com/libraries/lightgallery
• Các plugin hỗ trợ sẽ trình bày ở bên dưới

Tại thời điểm viết bài jquery đang có version 3.3.1 và light gallery có version 1.6.6

Trước tiên bạn cần tắt chế độ xem ảnh của blogger.

Tiếp theo vào phần chỉnh sửa code HTML

I, Light Gallery không thêm Plugin

Tích hợp jquery và lightGallery dán code trước thẻ đóng </head> (bỏ qua jquery nếu bạn đã có)

<!-- Get lastest Jquery : https://cdnjs.com/libraries/jquery -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

<!-- Get lastest lightgallery : https://cdnjs.com/libraries/lightgallery -->
<script src='//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery.min.js'/>
<link href='//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css' rel='stylesheet' type='text/css'/>

Để bật light gallery bạn thêm đoạn js sau trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
$('#id_hoặc_.class').lightGallery({
    config1:value,
    config2:value,
    ......
});
//]]>
</script>

Nếu để config mặc định code có dạng

<script type='text/javascript'>//<![CDATA[
$('#id_hoặc_.class').lightGallery();
//]]>
</script>

Trong đó #id_hoặc_.class sẽ là phần nội dung chứa ảnh, theo như đó nó sẽ là phần post-body (chứa  toàn bộ nội dung bài viết). Các giá trị config bạn sẽ tham chiếu tại api của light gallery. Có thời gian bạn tự vọc vạch tìm hiểu thêm, trong trường hợp I này thuộc tính quan trọng nhất là selector (thẻ a chứa ảnh của blog), mặc định khi bạn upload bằng chế độ upload ảnh do blog cung cấp nó sẽ tự tạo ra thẻ a có thêm thuộc tính imageanchor nên code config sẽ có dạng

<script type='text/javascript'>//<![CDATA[
$(".post-body").lightGallery({selector:"a[imageanchor]"});
//]]>
</script>

Nếu khi viết bài bạn loại thẻ a đi thì bạn phải trỏ selector tới đúng vị trí thẻ chứa ảnh thì light gallery mới hoạt động đúng

Đến đây bạn đã tích hợp được light gallery vào blog, nhưng không có plugin thì nó cũng như lightbox thông thường mặc định blogger cung cấp. Vì thế hãy đi tiếp đến phần thêm các plugin hỗ trợ để tăng lực cho tiện ích này

II, Light Gallery thêm Plugin

Tại thời điểm viết bài light gallery có hỗ trợ 8 plugin gồm

• Thumbnail plugin: thêm list thumbnail ảnh
• Autoplay plugin: tự động chạy video trình chiếu
• Video plugin: tạo video trình chiếu ảnh
• Fullscreen plugin: thêm chế độ xem ảnh full màn hình
• Pager plugin: tạo phân trang
• Zoom plugin: thêm tiện ích zoom ảnh
• Hash plugin: history (hash) module for lightgallery.
• Share plugin: thêm nút share 

Để tích hợp plugin bạn sẽ tiếp tục thêm các đoạn script tương ứng vào trước thẻ đóng </head>, ví dụ ở đây tôi muốn tích hợp cả 8, code có dạng

<!-- Get lastest lg-thumbnail : https://cdnjs.com/libraries/lg-thumbnail -->
<script src='//cdnjs.cloudflare.com/ajax/libs/lg-thumbnail/1.1.0/lg-thumbnail.min.js'/>

<!-- Get lastest lg-autoplay : https://cdnjs.com/libraries/lg-autoplay -->
<script src='//cdnjs.cloudflare.com/ajax/libs/lg-autoplay/1.0.4/lg-autoplay.min.js'/>

<!-- Get lastest lg-video : https://cdnjs.com/libraries/lg-video -->
<script src='//cdnjs.cloudflare.com/ajax/libs/lg-video/1.2.0/lg-video.min.js'/>

<!-- Get lastest lg-fullscreen : https://cdnjs.com/libraries/lg-fullscreen -->
<script src='//cdnjs.cloudflare.com/ajax/libs/lg-fullscreen/1.0.1/lg-fullscreen.min.js'/>

<!-- Get lastest lg-pager : https://cdnjs.com/libraries/lg-pager -->
<script src='//cdnjs.cloudflare.com/ajax/libs/lg-pager/1.0.2/lg-pager.min.js'/>

<!-- Get lastest lg-zoom : https://cdnjs.com/libraries/lg-zoom -->
<script src='//cdnjs.cloudflare.com/ajax/libs/lg-zoom/1.1.0/lg-zoom.min.js'/>

<!-- Get lastest lg-hash : https://cdnjs.com/libraries/lg-hash -->
<script src='//cdnjs.cloudflare.com/ajax/libs/lg-hash/1.0.4/lg-hash.min.js'/>

<!-- Get lastest lg-share : https://cdnjs.com/libraries/lg-share -->
<script src='//cdnjs.cloudflare.com/ajax/libs/lg-share/1.1.0/lg-share.min.js'/>

Như vậy mỗi plugin thêm vào tôi sẽ cần chỉnh sửa lại file config như api cung cấp. Trong trường hợp này code sẽ có dạng

<script type='text/javascript'>//<![CDATA[
$(".post-body").lightGallery({selector:"a[imageanchor]",thumbnail:true,autoplay:true,autoplayFirstVideo:true,fullScreen:true,pager:true,zoom:true,hash:true,share:true});
//]]>
</script>

Tùy thuộc vào nhu cầu mà bạn thêm plugin và chỉnh sửa file config theo đúng api được cung cấp. Ngoài ra các plugin cũng không quá dài bạn có thể gom chúng vào 1 file js duy nhất để tránh load nhiều script, cái này chắc không cần hướng dẫn nữa

Nâng cao: Do chế độ xem ảnh chỉ áp dụng với trang tĩnh và trang bài viết, vì vậy bạn nên đặt đoạn code js config trong cặp thẻ if. Ví dụ

<b:if cond='data:blog.pageType in {"static_page","item"}'>
<script type='text/javascript'>//<![CDATA[
$(".post-body").lightGallery({selector:"a[imageanchor]",thumbnail:true,autoplay:true,autoplayFirstVideo:true,fullScreen:true,pager:true,zoom:true,hash:true,share:true});
//]]>
</script>
</b:if>

Như vậy khi bạn F12 thì tab console sẽ không báo lỗi không tìm thấy class .post-body

Kết luận: Với nhiều plugin hỗ trợ phong phú, js không quá cồng kềnh, trình xem ảnh tuyệt vời này nên được tích hợp vào website của bạn. Nếu bạn gặp khó khăn gì, vui lòng để lại bình luận để được trợ giúp nhé

Good Luck !