Loading post navigation ...
 
 

Pro page

6
Nhận xét

Hiệu ứng show ảnh từ jQuery

| by Phan Dũng | views

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

[FD's BlOg] - Với thủ thuật này, khi bạn rê chuột vào ảnh thu nhỏ, thì sẽ xuất hiện hiệu ứng zoom ảnh, cho bạn 1 ảnh có kích thước lớn hơn, tùy vào việc bạn tùy chỉnh độ lớn của hiệu ứng zoom. Thủ thuật này mình tham khảo từ trên mạng và đã có 1 chút chỉnh sửa để các bạn có thể tùy chỉnh hợp lý hơn.


Xem demo ở đây : http://data.fandung.com/blog/demo/resize-image/index.html

Ảnh minh họa :


Như đã nói ở trên, thủ thuật này mình có 1 chút chỉnh sửa so với thủ thuật gốc. Ở thủ thuật gốc, các ảnh đều có vị trí tuyệt đối (position:absolute;) như nhau, nên nếu để nhiều ảnh gần nhau, khi zoom 1 ảnh nào đó thì ảnh zoom sẽ bị các ảnh thu nhỏ khác đè lên, và mình đã sửa 1 chút code CSS để chỉ tạo vị trí tuyệt đối cho ảnh khi rê chuột (khi zoom), như thế các ảnh zoom lên sẽ không bị đè.

Và điều thứ 2 mình chỉnh sửa là tỉ lệ zoom ảnh, ở thủ thuật gốc, tỉ lệ này được tính bằng tỉ lệ của độ rộng chia cho chiều cao (width/height), và với cách tính này, các ảnh có độ rộng và chiều cao bằng nhau (tức ảnh hình vuông - hệ số zoom =1) thì hiệu ứng zoom ảnh sẽ không hiển thị. Ngoài việc sửa đổi như vậy, mình còn đưa biến mpx (hệ số zoom) ra ngoài file JS để các bạn có thể tùy chỉnh theo ý thích của mình.

☼ Bắt đầu thủ thuật :
1. Vào bố cục
2. Vào chỉnh sửa code HMTL
3. Chèn code bên dưới vào trước thẻ đóng </head>

<style type="text/css">
img.resize{
width:100px;
height:67px;
border:1px solid #ccc;
padding:2px;
z-index:1;
}
img.resize:hover{
position:absolute;

}
</style>

<script type="text/javascript" src="http://data.fandung.com/blog/demo/resize-image/jquery.js"></script>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/resize-image/functions.js"></script>
<script type="text/javascript">
var mpx = 2;
</script>

Lưu ý :

Code CSS :
- width:100px; , height:67px; : kích thước của ảnh thu nhỏ
Code JS :
- var mpx = 2; : thay đổi tỉ lệ zoom ảnh theo ý bạn. Có thể dùng tỉ lệ không nguyên, ví dụ : 1.5 , 2.3, ...

4. Save template.

- Và khi muốn chèn hiệu ứng này cho ảnh, ta chỉ cần thêm đoạn code màu đỏ vào trong thẻ <img> đó là xong (như bên dưới)

<img src="{Link ảnh}" class="resize" />

Tác giả thủ thuật : Justin Farmer
Chúc các bạn thành công.


Enter your mail address:

6

vietutd

Hiệu ứng này rất hợp với các blog chuyên về ảnh.

Pika Rock

nếu muốn khung widget chứa ảnh resize (và cả text nữa) mà ko bị thay đổi khi ảnh resize thì làm thế nào hả a

thiepcuoigiare1

link Js die hết rùi làm ơn cho em cái mới đi

Khách (ẩn danh)

Cảm ơn rất nhiều!

shopgaucon

Mình đang cần thủ thuật này, nhưng với blog chuyên về hình ảnh, thì đặt position:absolute; vào từng thẻ img thì không kham nổi, có cách nào chỉ cần đặt một lệnh mà dùng cho tất cả các hình trong blog không vậy bạn ?

tueman84

ho file functions.js đi dũng ơi, email mình là tueman2484@gmail.com



☺ 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