This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Sunday, 4 February 2018

[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

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
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
Để 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 !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Zstip Blogger 2/07/2018 06:45:00 PM
    Chào bạn mình vừa tham gia blog mong bạn qua blog mình ủng hộ mình nhé. Cảm ơn bạn <3
    Link blog: https://zstip.blogspot.com/
    Niệm Style Blog 2/10/2018 08:40:00 AM
    Mấy cái này quá nhiều Js làm nặng Blog lắm ông ơi. Mà Blog ông cũng đang có nhiều Js lắm, mỗi khi tui vào Blog ông là phần mềm cảnh báo Viruss tự động bật lên :v
    Admin Quảng Bình IT 2/28/2018 08:22:00 PM

    Very nice, thank you very much.. |$4 |-2
    Phan Quốc Bảo ✔ 8/25/2018 08:55:00 PM
    em thêm nhưng sao nó vẫn bình thường nhỉ www.quocbaoblog.xyz
    Please wait while i am loading Facebook SDK js