Loading post navigation ...
 
 

Pro page

21
Nhận xét

Plugin Lightbox cho blogspot (Phần II)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Ở phần 1 mình đã giới thiệu cho các bạn cách sử dụng chung của plugin lightbox khi bạn muốn tạo 1 slide ảnh nào đó thì có thể tham khảo ở phần 1. Ở phần 2 này mình sẽ hướng dẫn các bạn chèn thẳng nó vào bài viết, tức là mỗi khi bài viết có ảnh nào đó thì khi bạn nhấp vô ảnh thì nó sẽ tự động hiển thị lightbox ra. Các này sẽ dễ dàng hơn rất nhiều nếu bạn dùng cách ở Phần 1 mình hướng dẫn.

Xem demo mình test trên blogspot : DEMO

Hình ảnh minh họa :


* Sau đây là cách thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích (Expand Widget Templates)
4. Chèn đọan code bên dưới vào trước dòng code </head> hoặc sau dòng ]]></b:skin>


<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'></script>
<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/b-jquery.lightbox-0.5.js' type='text/javascript'></script>
<link href='http://data.fandung.com/blog/demo/jquery-lightbox/css/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>

$(function() {
$('#lightbox a[href$=.jpg]').lightBox();
$('#lightbox a[href$=.JPG]').lightBox();
$('#lightbox a[href$=.jpeg]').lightBox();
$('#lightbox a[href$=.JPEG]').lightBox();
$('#lightbox a[href$=.gif]').lightBox();
$('#lightbox a[href$=.GIF]').lightBox();
$('#lightbox a[href$=.bmp]').lightBox();
$('#lightbox a[href$=.BMP]').lightBox();
$('#lightbox a[href$=.png]').lightBox();
$('#lightbox a[href$=.PNG]').lightBox();
$('#lightbox a[href$=.tif]').lightBox();
$('#lightbox a[href$=.TIF]').lightBox();
});
</script>


- Ở phần 2 này có nhiều hàm gọi hơn ở phần 1 . Ở đây mình sử dụng hàm để gọi tất cả thẻ a trong link có các kí tự như “.png“, “.gif“, “.jpg“, … trong id lightbox. Tức là các link hình ảnh. Ở đây nó không phân biệt được chữ hoa chữ thường nên mình mới phải làm nhiều hàm gọi như vậy, và ở trên mình chỉ liệt kê 1 số đuôi ảnh thường dùng, nếu ai muốn đầy đủ thì cứ add thêm.

5. Sau khi chèn xong code ở bước 4, các bạn khoan save template lại, tiếp tục xuống dưới tìm đọan code như bên dưới :
<data:post.body/>

và thêm đọan code đánh dấu highlight như bên dưới :
<div id='lightbox'>

<data:post.body/>

</div>


Ở bước này mình ép cho tòan bộ phần nội dung của blog mang id là “lightbox” để đọan mã javascript trên có thể dễ dàng tìm đến các thẻ a trong bài viết.

6. Cuối cùng là save template lại.

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


Enter your mail address:

21

Độc chiêu Blog

Hay quá, hồi trước cũng đi tìm cái này mà ko thấy!

MoigioiForex.Com

Tương tự như hiệu ứng Pretty phto nhưng hiện đại hơn ở phần: Cấu trúc link vẫn là đia chi bài viết khi có hiệu ứng và vẫn load ảnh khi load chưa xong bài viết

Du Phương

thích nhứt cái này nè :D

LeeDoong

Sao mình làm không đc !

Phạm Công Khiên

mình tìm kiếm cái này đã bao lâu nay
thanks bạn nhiều

Phạm Công Khiên

bạn ơi/! có thể xem lại được ko? mình cũng làm đi làm lại mấy lần, nhưng mãi vẫn không được
thanks

RCT group

mình làm cũng không được nè
của mình nó là thế này
...<data:post.body/...

chứ nó không xuống dòng như bài hướng dẫn
giúp mình với

Nguyen Van Quyet

Anh Dũng ơi Cái này khiến Tiện ích "Related Posts" với hiệu ứng mô tả bài viết không hoạt động được.

Blogging

8-} cuối cùng cũng tìm đc cách để Lighbox tự động cho Blogspot

[SeS] St0Rm

anh Dũng ơi, cho em hỏi : có thể chèn thêm hiệu ứng di chuyển ảnh 1->2 đc ko? cách này hình như chỉ xem được độc 1 ảnh, ko xem được cái tiếp theo

xArt!

- Anh FD ới hết Bandwitdh mấy file js này rồi , trước em chủ quan không up lên host riêng , anh có thể gửi em mấy file js của thủ thuật này dược không anh . Cảm ơn anh rất nhiều

[SeS] St0Rm

FD ko quan tâm tới blogspot nữa rồi, bạn vào trang này nhé, mình đã up sẵn file lên host rồi
http://www.thanchemgio.tk/2011/09/lightbox-2-cho-blogspot.html

nhocboy

sao mình làm hok được nó báo lỗi java

Mr. Lucky

Bác FD ơi, bác update lại plugin này với. Hình như là không chạy được rồi, em cài thì nó báo lỗi. Plugin hay nhưng tiếc là không dùng được

Phan Dũng

@Mr. Lucky : hiện tại cái plugin này xem ra ko cần thiết rồi bạn à, blogspot có sẵn cái plugin xem anh rồi, bạn dùng nó luôn đi, cho nhẹ blog, và tiện lợi hơn

Mr. Lucky

Bác hướng dẫn em kích hoạt plugin lightbox trong blogspot được không? em không biết vào đâu để kích hoạt cả. Thanks bác nhiều

SMGoddess9

Anh Phan Dũng ơi....Blog dạo này ra giao diện mới....Em làm cái này được nhưng làm xong nó lại ĐÈ LÊN CÁI ZOOM ẢNH CỦA CỦA BLOG (rốt cục 2 cái Zoom cùng lúc đè lên nhau ) EM MÚN XÓA CÁI CÓ SẲN CỦA BLOGSPOT thì làm sao ?
Blog của em: www.smgoddess9.blogspot.com
Email: YulTaeSun@gmail.com

Mode Việt

cái này mình dùng bị sung đột với cái slide show. Demo: http://mypham.thoitrangtre.in/

Admin

http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js

Die rồi bác ới :D

Admin

http://fandung.googlecode.com/svn/trunk/js/jquery.js
http://fandung.googlecode.com/svn/trunk/js/b-jquery.lightbox-0.5.js
http://fandung.googlecode.com/svn/trunk/css/jquery.lightbox-0.5.css

Lấy thay 3 link trên :))

Kim Duy

anh cho em hỏi tí :
Hiệu ứng lightbox của em nó vì sao không hoạt động - mặc dù em đã chuyển từ No qua Yes trong cài đặt bài viết rồi - nên chèn code gì vào trong tem mới được anh - nhờ anh qua check hộ em tí :
site : http://xinh3d.blogspot.com/
Thanks ạ



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home