Tạo hiệu ứng lightbox cho hình ảnh trên Blogger

Lightbox là một trong những hiệu ứng khá phổ biến trên wordpress và có nhiều thể loại và cách hiển thị khác nhau tùy vào sở thích của mỗi cá nhân. Các blogger sử dụng wordpress chẳng khó gì khi chọn một plugin mà mình yêu thích để tạo một album ảnh. Tuy nhiên, với blogger thì quả thật là một quá trình khó khăn.

Trước đây, blogviet đã tìm tòi nhưng không tìm được một hướng dẫn nào phù hợp để sử dụng tính năng này trên một blog tại blogger. Vô tình lướt qua các gadgets có sẵn trong blogger dashboard và thấy có vài tác giả, một trong số đó là Blogger Plugins – người đã có thủ thuật giúp các blogger có thể dễ dàng vận dụng hiệu ứng Lightbox cho các hình ảnh trên blogspot một cách đơn giản như trên wordpress.

Để triển khai được thủ thuật này, bạn đăng nhập vào blogger, tìm đến chỗ Edit HTML, chọn Expand full templates rồi dán đoạn code sau vào trước thẻ</head>

01

<style>

02	#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

03	#lightbox img{ width: auto; height: auto;}

04	#lightbox a img{ border: none; }

05

06	#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

07	#imageContainer{ padding: 10px; }

08

09	#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

10	#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

11	#imageContainer>#hoverNav{ left: 0;}

12	#hoverNav a{ outline: none;}

13

14	#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

15	#prevLink { left: 0; float: left;}

16	#nextLink { right: 0; float: right;}

17	#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigkl3h8-B__vHI9GehFC1JSGkqA3wAibAbU7hAsUvEsyzR9JjJ_3TlvUWxITrRZvYjSot1mz3mVeivpbYonLthnIuMnxL5PUPRfkmvvsuyRyRbKb8xtQdKtHUrL5eMwaaRThI2naOhMjo/) left 15% no-repeat; }

18	#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFrvxzUhIpU0eXUGbq0dkDx2YvYXFeRWurPsBRRsa-2kNgBBDiuhKpVbNWygqzW28-7hhi0S2BTK-7qQsSWr2BwpNAnJKvyVRqoNCeArjjwnhqje8vskCxVGQ9X-hxlHz83RZElAVxQlA/) right 15% no-repeat; }

19

20	#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

21

22	#imageData{ padding:0 10px; color: #666; }

23	#imageData #imageDetails{ width: 70%; float: left; text-align: left; }

24	#imageData #caption{ font-weight: bold; }

25	#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }

26	#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

27

28	#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

29	round-color: #000; }

30	lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

31	round-color: #000; }

32

</style>

33	<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>

34	<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>

35	<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>

Sau đó Save changes là xong phần chèn code. Bước tiếp theo là làm việc với các hình ảnh khi bạn upload lên.

Sau khi đã upload hình ảnh, bạn làm như hướng dẫn trong hình sau:

Lightbox viewer for blogspot

Sau khi đã làm xong, bạn chỉ việc đăng bài có hình ảnh và kiểm chứng. Mình đã test thử và thành công ngay trên bài này cho hình ảnh riêng lẻ. Nếu muốn tạo hình ảnh album thì các bạn xem bài này nhé.

Để tạo hình ảnh riêng lẻ thì bạn dùng thẻ sau theo hình minh họa ở trên:

rel=”lightbox” title=”ten_hinh_anh”

Để tạo các hình ảnh của một album thì chúng ta dùng thẻ sau:

rel=”lightbox[ten_album]” title=”ten_hinh_anh”

Thật đơn giản đúng không các bạn? Đây phải nói là một trong những tính năng vượt trội mà blogviet mới biết khi tìm kiếm trên mạng và hy vọng nó giúp ích chi các bạn ít nhiều.

Chúc các bạn thành công nhé.