Trình diễn ảnh chuyên nghiệp với 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 jQuery là prettyPhoto 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

Hiển thị dạng gallery:

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.

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

Nguồn : noct-land.blogspot.com

Copy : Hoithanhcaygiang.vn

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..