Hiệu ứng Zoom vào chi tiết ảnh hay dùng với các trang web bán hàng. Khi đó, chúng ta có hình ảnh sản phẩm ở kích cỡ vừa phải, nhưng rõ ràng người dùng muốn mua thường thích nhìn kỹ càng hơn, lúc đó khi họ di chuột vào bức ảnh, hiệu ứng giống như kính lúp soi vào sẽ xuất hiện, cho phép thấy kích thước lớn.
Trường hợp chỉ cần phóng to đơn giản bạn dùng CSS3 để Zoom ảnh là đủ rồi. Tuy nhiên nếu muốn hiệu ứng đẹp hơn chúng ta cần xài Jquery. Plugin Cloud Zoom là ứng viên tốt đáp ứng các yêu cầu, nó tương thích với hầu hết các trình duyệt phổ biến bao gồm Chrome, FireFox, Opera, Safari, IE6+, nó cũng làm việc tốt với đa dạng các phiên bản của Jquery - phủ rộng từ version 1.4.3 cho đến 1.10.2 hay ngay cả 2.0.3
Cloud Zoom có 2 phiên bản:
- Trial - miễn phí: Không giới hạn thời gian dùng thử - nhưng bạn chỉ được phép dùng cho các trang web phi thương mại, và trên ảnh sẽ có dấu ấn riêng nói rằng bạn đang dùng phiên bản miễn phí (kiểu như watermark)
- Trả phí: Giá vào khoảng 25 Đô - Bạn được dùng trên bất cứ trang web nào - mất tiền mà :) Và được loại bỏ hoàn toàn watermark.
Bạn vào liên kết này để tải Cloud Zoom và xem demo luôn, nhớ chọn bản trial rồi tải về. Cấu trúc mã của nó khá đơn giản, sau đây mình sẽ giải thích:
Chèn code vào trước thẻ đóng head
Code mẫu như thế này:
<head>
<!-- Cho jQuery vào-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<!-- Cho Cloud Zoom CSS vào -->
<link rel="stylesheet" type="text/css" href="cloudzoom.css" />
<!-- Cho Cloud Zoom script vào -->
<script type="text/javascript" src="cloudzoom.js"></script>
<!-- Gọi hàm -->
<script type="text/javascript">
CloudZoom.quickStart();
</script>
</head>
- Chèn Jquery vào bằng đoạn code: <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script> ở đây đang dùng phiên bản 1.8.1 - bạn có thể dùng phiên bản khác nếu muốn. Nếu thích xài thư viện trên Google thì lấy đoạn code này: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
- Cho CSS của Cloud Zoom vào bằng đoạn code: <link rel="stylesheet" type="text/css" href="cloudzoom.css" /> dĩ nhiên đoạn CSS này bạn phải cho lên host của bạn rồi
- Cho script Cloud Zoom vào: Đây là phần chính - chính đoạn mã ở đây thực thi phóng to ảnh, bạn cũng phải up file Javascript này lên host trước, code chèn vào HTML: <script type="text/javascript" src="cloudzoom.js"></script>
- Lời gọi hàm: <script type="text/javascript" CloudZoom.quickStart() </script>
- Ngoài lề một chút, có thể có bạn muốn hỏi, tại sao ở bước 1 không up Jquery lên host mà lại lấy link từ Google hoặc jquery.com - câu trả lời là để nó giảm tải host cho bạn thôi. Bạn tự up lên host thì cũng không sao cả.
Chèn Code ở phần Body
Bạn sẽ phải chuẩn bị 2 bức ảnh:
- Bức ảnh nhỏ: cho vào thư mục small bên trong thư mục images. Bức ảnh nhỏ chính là bức cần Zoom - phóng to. Đường dẫn của ảnh nhỏ được cho vào sau src
- Bức ảnh lớn: cho vào thư mục large bên trong thư mục images. Bức ảnh lớn thì giống y bức nhỏ chỉ khác là nó có kích thước to hơn thôi - ảnh lớn sẽ được lấy ra khi bạn zoom vào ảnh nhỏ. Đường dẫn của ảnh lớn được cho vào sau zoomImage
- Nhớ đầy đủ các dấu má như " và ', vì thiếu thì không lên được.
P/S: Ngoài Cloud Zoom bạn có thể thích Jet Zoom cả 2 đều dùng để phóng to ảnh (cùng hãng sản xuất luôn) nhưng hiệu ứng có khác nhau đôi chút.
Nguồn: Mạng lưới toàn cầu
Có cách nào áp dụng cho toàn bộ ảnh đăng trên blog không bạn. làm cách này mà đăng nhiều ảnh thì mất thời gian quá
Trả lờiXóacái plugin này tùy website và blog mới chèn được. nếu không phù hợp thì cậu nên sử dụng plugin khác để tránh nặng blog.
Trả lờiXóa