Đăng ký vps giá rẻ, tên miềndomain. Việc kiểm tra và mua tên miền giá rẻ, domain giá rẻ, hosting giá rẻ, máy chủ ảo giá rẻserver giá rẻ chỉ với 2 bước đơn giản. Giúp bạn tiên phong trong kinh doanh Online

JavaScript
 9ecva.com - 9e Chu Van An Forever : JavaScript
Tiêu đề Chủ đề: Tạo hiệu ứng Lightbox cho Gallery ảnh với prettyPhoto Trả lời bài viếtGửi bài viết mới
Tác giả
Nội dung << Chủ đề trước | Chủ đề kế tiếp >>
DUCVINH83
Administrator
Administrator
Avatar
Không ngừng học hỏi !

Ngày gia nhập: 01/11/2005
Giới tính:
Đến từ: Vietnam
Trạng thái:
Bài viết: 365
Tiền: 738$
Địa chỉ e-mail: Gửi mail
Yahoo! IM: Yahoo! IM
Sinh nhật: 17/02/1983
Cảnh cáo: (0%)
Minus 1 warningCurrent warnlevel: 0%Add 1 warning
Ngày gửi: 18/11/2009 lúc 8:53 sáng | Đã khóa IP Trích dẫn DUCVINH83

prettyPhoto-plugin-jquery
Hi mọi người,
Hôm nay mình sẽ giới thiệu một đồ nghề rất hiệu quả cho các bạn thiết kế website – đó là plugin prettyPhoto cho jQuery. Trước tiên, nếu bạn nào chưa biết thì mình cũng giới thiệu lightbox là cái gì trong web.

Kỹ thuật lightbox có lẽ các bạn đã gặp nhiều mà không để ý thôi. Đại khái nó là thế này nè, bạn vào 1 trang thiên về hình ảnh hay showroom, sau khi click vào link của 1 hình, website sẽ bị mờ đi, sau đó sẽ có 1 cái hình được load và hiện ra nổi bật giữa trang web. đó là lightbox trong website (cái khái niệm này mượn trong lĩnh vực nhiếp ảnh). Xem hình dưới đây sẽ hiểu phần nào:
prettyphoto-lightbox

Để áp dụng kỹ thuật này cho trang hình ảnh của bạn rất dễ. prettyPhoto là một plugin của jQuery, do đó, để sử dụng thì bạn phải load kèm với jQuery. prettyPhoto được yêu thích hơn bởi vì giao diện của nó rất tốt, navigation, button thì quá tuyệt, lại có 4 skin cho mình lựa chọn, so với thickbox (1 thằng lightbox jQuery khác) thì giao diện của prettyPhoto hơn hẳn.

Mình chỉ sơ sơ các bước để các bạn có thể nắm cách gắn prettyPhoto vào website hiện tại của bạn:
1. Vào trang jQuery.com, download phiên bản mới nhất (bây giờ là 1.3.2)
2. Download prettyPhoto 2.5.3 tại đây: Compressed version, giải nén ra sẽ có được các thư mục chứa file javascript, css và hình ảnh sẽ dùng cho hiệu ứng này.
3. Copy js,css, image vào website của bạn
4. Trong HTML, bạn load file javascript của jQuery và prettyPhoto, file CSS của prettyPhoto. VD:

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

5. Đối với các hình tạo hiệu ứng, bạn chỉ cần làm như sau:

<a rel="prettyPhoto" href="http://domain.com/duong/dan/toi/big-image.jpg">
<img src="http://domain.con/duong/dan/toi/small-image.jpg" alt="" />
</a>

Lưu ý là cái thuộc tính rel của thẻ A là rel=”prettyPhoto” nếu bạn muốn hiệu ứng cho từng hình riêng lẻ. Trường hợp bạn muốn liên kết khi xem nhiều hình trong 1 trang (để có thể nhấn NEXT, PREVIOUS) thì thuộc tính rel phải thay đổi tí xíu, trở thành rel=”prettyPhoto[tenTuyY]”

———–
Chi tiết hơn nữa thì bạn hãy vào website của tác giả: http://www.no-margin-for-errors.com/projects/prettyPhoto-jqu ery-lightbox-clone/ để xem demo và tìm hiểu thêm nhiều chức năng thú vị của plugin này.

Chúc gallery của bạn sẽ thu hút được nhiều người ghé thăm.



__________________

YM: DUCVINH83
0912 822334


Lên trên Xem DUCVINH83's Thông tin cá nhân Tìm những bài viết khác của DUCVINH83 Ghé thăm DUCVINH83's Trang chủ
 

Nếu bạn muốn trả lời thì trước tiên bạn phải đăng nhập
Nếu chưa đăng ký thì bạn hãy đăng ký

  Trả lời bài viếtGửi bài viết mới
Xem trang in Xem trang in

Di chuyển nhanh
Bạn không thể tạo đề tài mới
Bạn không thể trả lời bài viết
Bạn không thể xoá bài viết bạn đã gưi
Bạn không thể sửa bài viết bạn đã gửi
Bạn không thể tạo bình chọn
Bạn không thể bình chọn



Trang này được tạo ra trong 0.1910 giây.
cheap jordans for salecheap jordans for salecheap jordans for salecheap jordans for salecheap jordans for salecheap jordans for salecheap jordans for salecheap jordans for salecheap jordans for salesac longchamp pas chergucci outlet

baomang.net  9ecva.com © 2007 - Phát triển bởi Trịnh Đức Vinh