Áp dụng PrettyPhoto Plugin cho tất cả image

/
prettyphoto jqueryNếu đang áp dụng PrettyPhoto cho blog của mình thì bạn sẽ nhận ra là phải chèn thuộc tính rel="prettyphoto" cho từng ảnh, nay sự phiền hà đó không còn nữa, chỉ cần ảnh có anchor tag (a tag) là sẽ tự động kích hoạt lightbox. Cách làm này thật ra không có gì ghê gớm, tuy vậy cũng ghi ra đây cho những ai cần.




Đoạn code của thủ thuật là như thế này:
<link href='.../prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='.../jquery.min.js' type='text/javascript'/>
<script src='.../jquery.prettyPhoto.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery("a[rel^='prettyPhoto']").prettyPhoto();
</script>

Chỉ cần sửa đoạn màu đỏ thành thế này:
jQuery(".post-body a img").parent().prettyPhoto();
Kiểm tra kết quả, bạn nhận ra tất cả ảnh trong bài đăng đã tự động kích hoạt lightbox, bạn cảm thấy "sướng".
Add a Comment

48 comments

Bóc tem! cái này làm anh em thấy sướng thêm nè

9/28/2011 comment-delete

sướng thật ! nhìn mê con mắt !
mà cái đó có cho video luôn k ?

9/28/2011 comment-delete

mới test trên blog mình thấy cũng tiện ích nhưng khi nhấp vào cây bút chì (sửa bài viết) thì nó hiện PrettyPhoto Plugin lên mà k phải là vào sửa bài viết nửa ! cũng hơi bất tiện

9/28/2011 comment-delete

Noct ơi, mình có thử áp dụng nhưng cái này nó ko giống như cái cũ thì fải

@WeLovePhotoshop.Com Vì plugin này luôn được cập nhật liên tục mà, hiện nay là bản 3.1

9/28/2011 comment-delete

Àh, mình lại thích cái cũ hơn, cái mới nhìn đơn giản quá :D hì

Mà cho mình hỏi cái, xài cái này có làm chậm khi load bài đăng ko Noct?

Đã +1 cho bài post :D

NAD
9/28/2011 comment-delete

Còn cái Lighbox Blogger Widget này là thế nào hả các bác?
http://www.abu-farhan.com/2011/09/lightbox-blogger-widget/

9/28/2011 comment-delete

@D.N.H Lightbox của Blogger, hình như vẫn đang thử nghiệm, xấu và không hiển thị được video và flash :D

9/28/2011 comment-delete

mấy hôm nay blogger chả gỡ lightbox rồi nhỉ, trông chưa hay lắm

9/29/2011 comment-delete

Cái nỳ có làm giảm nhìu tốc độ không Noct. Mà cái này nó nhanh hơn hay chậm hơn so với jQuery vậy?

@Hiep Nguyen Minh nó là plugin của jquery, nhanh hay chậm thì tùy bạn đánh giá.

9/30/2011 comment-delete

Thanks Noct, thủ thuật rất hay và tiện lợi hơn rất nhiều

Chờ đợi cái này đã lâu rùi,hôm nay đã nó đã xuất hiện +1

10/01/2011 comment-delete

Đã làm thử rồi nhưng tải lên host riêng (DROPBOX0 thì lại ko đc là sao ý anh ạ?

10/01/2011 comment-delete

có làm tự dộng cho video chèn từ Youtube đc ko anh Noct/?

10/01/2011 comment-delete

@QuyetN không biết nữa, mà youtube nó cho code chèn vào blog rồi mà cần gì lightbox nữa.

10/01/2011 comment-delete

@QuyetN cái file .css phải up lại toàn bộ ảnh trong đó mới được

10/01/2011 comment-delete

Ngon lành rồi anh ạ>!

10/02/2011 comment-delete

BỊ LỖI ĐUÔI PRETTYPHOTO b-(

PRO
10/02/2011 comment-delete

vote bác 1 phiếu=d>

10/07/2011 comment-delete

rất đẹp và ấn tượng

10/09/2011 comment-delete

Thanks Noct nhiều nhé.Thủ thuật nhỏ nhưng đầy nội công :D

10/12/2011 comment-delete

bạn cho mình xin code của đoạn readmore mà bạn đang sử đụng được không ?

10/14/2011 comment-delete

@Neyurt blog này có dùng code auto gì đâu bạn ???

10/14/2011 comment-delete

anchor tag (a tag) là gì vậy anh >.< :(

10/27/2011 comment-delete

@Chíp Đẹp Zai là thẻ liên kết (link)

10/27/2011 comment-delete

anh ơi em làm được rồi
nhưng sao nó mất thanh trượt bên cạnh T____T
đây anh ạ
Pic 1: http://i1196.photobucket.com/albums/aa416/PuViDai/1.jpg
Pic 2: http://i1196.photobucket.com/albums/aa416/PuViDai/3.jpg

làm sao đây anh T___T

10/28/2011 comment-delete

cái này hấp dẫn thiệt

12/06/2011 comment-delete

Noct ơi, bạn nói "chỉ cần ảnh có anchor tag (a tag) là sẽ tự động kích hoạt lightbox". Mình không biết anchor tag (atag) bạn nói là gì?

1/11/2012 comment-delete

@Lâm Hoà Văna tag chính là link liên kết đó bạn

1/14/2012 comment-delete

@Noct Cám ơn bạn, mình còn rất gà.

1/17/2012 comment-delete

Noct cho hỏi, dùng pretty photo chèn album galery thì chèn thuộc tính nào?

1/21/2012 comment-delete

@Pinntham khảo : http://noct-land.blogspot.com/2011/01/prettyphoto-jquery-plugin-for-blogger.html

1/21/2012 comment-delete

Cám ơn pác Noct đã giới thiệu thêm 1 hiệu ứng xem ảnh mới ^^
Riêng mình thì đang dùng hiệu ứng Fancybox để hiển thị ảnh. Bạn nào thích hiệu ứng này thì tham khảo bài viết này của mình nhé http://itdl.w3solution.net/2012/01/cai-dat-fancybox-cho-blogspot.html

2/01/2012 comment-delete

Cái này chèn vào Javascript/HTML hay chèn vô template luôn hả Noct?
Nếu chèn template thì chỉ mình chèn ở thẻ nào luôn nhé! Thanks trước :D

3/03/2012 comment-delete

@Admin: Bạn vào http://noct-land.blogspot.com/2011/01/prettyphoto-jquery-plugin-for-blogger.html để xem cách chèn nhé

Anh noct oi anh co the dang bai viet chi cho em cai code author box dc ko a cai cua anh dep ưa ma blog e ko co

4/10/2012 comment-delete

Blog mình không hoạt động Noct ơi, giúp mình với : http://www.blogktv.net/ .Cảm ơn Noct.

4/14/2012 comment-delete

@Việt Namsite bạn dùng nhiều thủ thuật jquery nên gây xung đột

4/14/2012 comment-delete

nghe bác nói thì em cũng đã xóa hết các code jquery trong blog rồi, ngoại trừ của pretty nhưng vẫn không được, bác Noct giúp với.

4/22/2012 comment-delete

Vừa test trên template này thấy vẫn ok

4/22/2012 comment-delete

Phát hiện ra là do bài viết blog em nằm trong thẻ post-view nên phải sửa code của bác lại, giờ thì đc rồi. Cảm ơn bác.

4/23/2012 comment-delete

Của em chèn vào nó không chịu hiện mũi tên qua lại?

6/19/2012 comment-delete

Thanks a lot for this :D

7/13/2012 comment-delete

Bác Noct ơi nếu muốn thêm chữ vào dưới mỗi hình ảnh thì làm như thế nào ạ :D

Mình thấy cái này rất hay, đẹp, hihi

Cái này mà làm được Gallary thì hay quá. Khổ nổi chỉ bấm theo từng ảnh mà xem thì bất tiện quá. Bác xem lại rồi nâng cấp lên nhé!

8/22/2012 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License