Xem demo ở đây : http://data.fandung.com/blog/demo/resize-image/index.html
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" />
Hiệu ứng này rất hợp với các blog chuyên về ảnh.
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
link Js die hết rùi làm ơn cho em cái mới đi
Cảm ơn rất nhiều!
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 ?
ho file functions.js đi dũng ơi, email mình là tueman2484@gmail.com
» 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.