Home »

Zoom hình ảnh trong ASP.NET

3 thg 9, 2013

Hôm nay mình sẽ giới thiệu cho các bạn một số cách để zoom hình ảnh trong asp.net. Việc zoom hình ...


Hôm nay mình sẽ giới thiệu cho các bạn một số cách để zoom hình ảnh trong asp.net. Việc zoom hình ảnh trong một số trường hợp sẽ làm cho web của bạn trở lên sinh động hơn và đặc biệt cái này rất hay trong các website chuyên về ảnh.
Cách 1: Sử dụng Jquery

Đây là cách phổ biến và dễ làm nhất. Trong jquery thì bạn có thể tự code để zoom ảnh hoặc có thể sử dụng các plugin zoom image( các plugin có hiệu ứng đẹp thường là premium).
Mình sẽ giới thiệu cách sử dụng code trước.
Đây là code thêm ảnh của bạn trong file html:
?
source code
1
<b>Di chuột qua để zoom ảnh</b><br /><img src="https://lh4.googleusercontent.com/-uJtTzRnZnns/T-MruomepMI/AAAAAAAAAPI/a2SDGzEZi4U/s600/ba6093e865fbff3fe4233aef5221b9c0_41180892.redflavapics1344.jpg" alt="bad cats-webzoomz" id="imgBadCat"></img>​

 Và đây là code jquery cho bức ảnh trên:
 
?
source code
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
$('# imgBadCat ').width(180);
$('# imgBadCat ').mouseover(function()
{
$(this).css("cursor","pointer");
$(this).animate({width: "300px"}, 'slow');
});
$('# imgBadCat ').mouseout(function()
{
$(this).animate({width: "180px"}, 'slow');
});
});​


Đối với cách này hình ảnh sẽ bị kéo ra và làm giảm chất lượng ảnh nếu ảnh của bạn chất lượng không tốt.
Jquery có rất nhiều plugin hay dành cho việc zoom hình ảnh. Ở đây mình xin giới thiệu một plugin hay được dùng đó là Cloud Zoom. Cloud Zoom rất dễ dàng thực hiện. Bạn dễ dàng có thể tùy chỉnh các ảnh nhỏ , ống kính và cửa sổ ảnh phóng to bằng CSS. Ngoài ra Cloud Zoom còn hỗ trợ một số cấu hình như chiều cao, chiều rộng của cửa sổ zoom, pha màu, độ trong suốt, độ mềm mại khi di chuyển, bật tắt tiêu đề.
Để sử dụng được plugin này bạn cần jquery, plugin Cloud Zoom tại đây. Bạn thêm đoạn code sau vào thẻ head.

?
source code
1
2
3
4
5
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/cloud-zoom.css"/>
<script type="text/javascript" src="js/cloud-zoom.1.0.2.min.js"></script>

Để chỉnh sửa style các bạn có thể vào file cloudy-zoom. Thông tin chi tiết và demo các bạn có thể vào đây xem nha. 
Cách 2: Sử dụng dll.
Có một vài dll hỗ trợ việc zoom hình ảnh trong asp.net mình xin giới thiệu một dll đó là obout-ImageZooming. Các bạn có thể download dll này tại đây. Các bạn thêm dll vào toolbar, rồi sau đó kéo control đó vào. Các bạn copy thư mục simple vào thư mục style của mình, của mình ở đây là thư mục Styles. Sau khi kéo control vào thì code của bạn sẽ như sau:
?
source code
1
<obout:ImageZoom ID="ImageZoom1"  ImageUrl="~/Images/finalbattlebymarioregna.png" Effect="Fading" BigImageUrl="~/Images/finalbattlebymarioregnabig.jpg" StyleFolder="Styles/simple" runat="server" />

Các bạn chú ý 1 số thuộc tính như sau:
ImageUrl: là link ảnh nhỏ.
BigImageUrl: là link ảnh lớn.
StyleFolder: là folder chứa thư mục simple.
Effect: có 2 giá trị là Zooming và Fading đây là 2 chế độ zoom ảnh.

Cách 3: Sử dụng Ajax control.
Về cách cài đặt và sử dụng control này bạn có thể xem tại đây. Sau khi cài đặt xong bạn có thể sử dụng các controls ajax. Ở đây có 1 control là Seadragon control dùng để zoom ảnh. Chi tiết bạn có thể xem tại đây.
Chúc các bạn thành công!
Tags:

Comments[ 0 ]


Đăng nhận xét