Tạo Lightbox ảnh đẹp cho blogspot với jQuery

By Unknown

Thứ Sáu, 15 tháng 8, 2014

Lightbox ảnh hay còn gọi hiệu ứng hộp đèn cho ảnh trong blogspot khi click trực tiếp vào ảnh với jQuery kết hợp với CSS tạo hiệu ứng đẹp và chuyên nghiệp.

Các bạn đăng nhập vào Blogger.com sau đó các bạn chọn Cài đặt tiếp chọn Bài đăng và nhận xét ở mục Hiển thị hình ảnh với hiệu ứng hộp đèn các bạn chọn Có

DEMO

CSS Lightbox ảnh đẹp cho blogspot

Sau khi các bạn bật hiệu ứng hộp đèn tức Lightbox trong blogspot lên các bạn vào Mẫu >> Chỉnh sửa HTML >> Các bạn bấm Ctrl+F tìm đến thẻ]]></b:skin> và CSS trên nó.

/* CSS Image Lightbox */
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#222;width:250px;height:250px;margin:0 auto;}
#lightbox-container-image{padding:10px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box &gt; #lightbox-nav{left:0;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;display:block}
#lightbox-nav-btnPrev{left:10%;float:left}
#lightbox-nav-btnNext{right:10%;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#222;margin:0 auto;line-height:1.4em;overflow:auto;max-width:100%;padding:0 10px 0;}
#lightbox-container-image-data{padding:0 10px;color:#acacac}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}

Code jQuery Lightbox ảnh cho blogspot

Sau khi chèn đoạn CSS xong các bạn code  jQuery này trước thẻ </body> Sau đó lưu lại và xem kết quả

<script src="https://googledrive.com/host/0B1ap438NTONXZ24yaVU4ckVFNEk " type="text/javascript"></script>

Lưu ý : Các bạn tải ảnh trực tiếp ở mục chèn ảnh trong trong blogspot nhé để có hiệu ứng như demo

Tag : Chia sẻ, CSS