Trình diễn ảnh chuyên nghiệp với prettyPhoto

/
prettyphoto
Trong quá trình tìm hiểu các theme Wordpress mới thì mình có để ý là các designer thường sử dụng một plugin của jQueryprettyPhoto cho các theme của họ để trình diễn ảnh.

Đây là một dạng lightbox nhưng có nhiều chức năng hơn như hiển thị cả video và flash. Trang web của bạn sẽ trở nên chuyên nghiệp hơn nếu sử dụng plugin này. Muốn biết nó như thế nào thì bạn click vào hình ở dưới:


Kiểu default
prettyPhoto Example

Hiển thị dạng gallery:

GalleryGalleryGallery

Trình diễn Video:

Để sử dụng được plugin này trên blogspot thì trước tiên bạn phải tắt hiệu ứng ảnh mặc định của Blogger, vào phần Cài đặt -> Định dạng rồi tìm và chọn như sau:


Save lại, tiếp tục vào phần chỉnh sửa HTML rồi chèn đoạn code sau phía trên thẻ </body>
<link href='http://www.no-margin-for-errors.com/wp-content/themes/NMFE/css/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery.prettyPhoto.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery("a[rel^='prettyPhoto']").prettyPhoto();
</script>

Sau đó, trong khi đăng ảnh trong bài thì bạn thêm dòng rel="prettyphoto" như thế này:
<a href="image.jpg" rel="prettyphoto"><img src="..."/></a>

Để hiển thị kiểu gallery thì sửa thành rel="prettyPhoto[pp_gal]" , còn muốn xem video thì thay link ảnh image1 thành link dẫn tới video đó, ví dụ như : http://www.youtube.com/watch?v=_EC2tmFVNNE

- Bạn có thể truy cập trang chủ của plugin để xem hướng dẫn sử dụng đầy đủ.
- Nên upload các file css và js lên host riêng.

Add a Comment

21 comments

code hay thật thích nhất cái dễ xem video đấy nhìn chuyên nghiệp thật

Lúc trước từng bị lỗi #!prettyPhoto, sau đó pak fix đc nhưng jo lỗi nữa roài =)) chắc file js gốc bị lỗi

8/12/2011 comment-delete

Cái này hay ghê! Phải thử ngay mới được! Cám ơn Noct nhé!

8/15/2011 comment-delete

=)) Lighbox có cách Auto roài,giờ không phải chèn từng ảnh nữa :->

8/18/2011 comment-delete

cái prettyPhoto này có sử dụng đc cho Forum Free không
Nếu đc thì dùng ra sao ! Xin hướng dẫn
liên hệ : yo! : tyvn_lc Rum : TeenPc.Tk
Xin Cám Ơn !

12/03/2011 comment-delete

@tyvnlc.top-me.com được, cách làm cũng tương tự như trên , xem thêm ở đây : http://noct-land.blogspot.com/2011/09/apply-prettyphoto-for-all-images.html

12/04/2011 comment-delete

i didn't get the same result like demo..!!!

Mình không làm đươc :((((((( ... Giúp mình với

2/01/2012 comment-delete

Mình ko làm được. Bạn có thể hướng dẫn chi tiết thêm được ko ? Thank nhìu !

2/26/2012 comment-delete

@dungnhinlai Những thủ thuật của Noct đều rất tuyệt và dễ thực hiện. Bạn làm chưa được chắc có thể là file js đã được khai báo ở đâu đó 1 lần rồi.

Làm sao có thể xóa bỏ trình biểu diễn của google trước khi thêm trình của prettyPhoto

4/11/2012 comment-delete

@Thiên Mệnh đã cập nhật bài đăng, bạn xem lại để biết cách giải quyết.

4/11/2012 comment-delete

Quá đẹp. Tích hợp được cả slide của Picasa =d>

Ngon bác ợ :*

5/19/2012 comment-delete

How to get the same effect as shown here?

5/30/2012 comment-delete

Bạn ơi, tại sao mình làm xong nó ko giống như demo nhỉ?

8/05/2012 comment-delete

Đẹp thật, mình sẽ thử
Noct có thể làm thêm một bài hướng dẫn về Prettypopin cho blog được không ? b-( mình có xem hướng dẫn bên no-margin-for-erors nhưng mình không làm được X-(
Thanks !!!

11/01/2012 comment-delete

Nhận xét này đã bị tác giả xóa.

1/23/2013 comment-delete

Mình thường nghe câu nói là "Nên upload các file css và js lên host riêng." nhưng mình không biết cách nào để chép lại file js để up lên host riêng lên Google của mình.

1/23/2013 comment-delete

Nhận xét này đã bị tác giả xóa.

1/23/2013 comment-delete

Không hiểu sao mình chỉ nhấn gửi 1 tin vậy mà giờ vào xem lại thì thấy 3 tin trùng nhau.

1/24/2013 comment-delete

Mình ko làm được

1/30/2013 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