Trong bài viết lần trước, mình có nói về link hướng dẫn sử dụng jQZoom. Mình đã thử chạy nó trên Dotnetnuke module. Xin chia sẻ cho các bạn cách cài đặt để chạy trên DNN.
-Đầu tiên, các bạn nên copy các file thư viện theo link mình đưa hôm nọ.
-Copy cái ví dụ mẫu của nó về.
-Tạo module trong DNN, ví dụ là MyZoomEx.
-Đặt các file javascript vào thư mục js trong module.
-Đặt các picture vào thư mục images trong module.
-Copy các rule trong jqzoom.css vào module.css.
-Trong code behind, include các js bẳng code như sau:
protected void Page_Load(System.Object sender, System.EventArgs e)
{
if (!ClientAPI.IsClientScriptBlockRegistered(this.Page, "jquery.js"))
{
ClientAPI.RegisterClientScriptBlock(this.Page, "jquery.js", "<script src='" + ResolveUrl("js/jquery.js") + "'></script>");
}
if (!ClientAPI.IsClientScriptBlockRegistered(this.Page, "jquery.lightbox-0.4.pack.js"))
{
ClientAPI.RegisterClientScriptBlock(this.Page, "jquery.lightbox-0.4.pack.js", "<script src='" + ResolveUrl("js/jquery.lightbox-0.4.pack.js") + "'></script>");
}
if (!ClientAPI.IsClientScriptBlockRegistered(this.Page, "jjquery.jqzoom.js"))
{
ClientAPI.RegisterClientScriptBlock(this.Page, "jquery.jqzoom.js", "<script src='" + ResolveUrl("js/jquery.jqzoom.js") + "'></script>");
}
ClientAPI.RegisterStartUpScript(this.Page, "", "<script type=\"text/javascript\">jQuery.noConflict();</script>");
if (!Page.IsPostBack)
{
}
}
Trong .ascx, đặt các code html và js
<script type="text/javascript">
alert(document.location);
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("img.jqzoom").jqueryzoom({
xzoom: 200, //zooming div default width(default width value is 200)
yzoom: 200, //zooming div default width(default height value is 200)
offset: 10 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")
});
});
</script>
<div id="wrapper">
<div id="maincontent">
<p>Move the mouse over the images. | <a HREF="http://www.visual-blast.com/javascript/jqzoom-jquery-plugin/">Back to the Article page</a></p>
<div style="float:left;width:100%;clear:both;"><span class="tozoom"><img src="/DNNWorking3/DesktopModules/MyZoomEx/images/shoe1_small.jpg" class="jqzoom" alt="/DNNWorking3/DesktopModules/MyZoomEx/images/shoe1_big.jpg" /></span>
<span class="tozoom"><img src="/DNNWorking3/DesktopModules/MyZoomEx/images/shoe2_small.jpg" class="jqzoom" alt="/DNNWorking3/DesktopModules/MyZoomEx/images/shoe2_big.jpg" /></span>
<span class="tozoom"><img src="images/shoe3_small.jpg" class="jqzoom" alt="images/shoe3_big.jpg" /></span>
<span class="tozoom"><img src="/DNNWorking3/DesktopModules/MyZoomEx/images/shoe4_small.jpg" class="jqzoom" alt="../DesktopModules/MyZoomEx/images/shoe4_big.jpg" /></span>
</div>
abd
<span style="float:left;width:100%;height:200px;"> </span>
</div>
</div>
Có 1 điều cần lưu ý ở đây là ta phải đặt đường dẫn tới file image 1 cách chính xác và đầy đủ. Ở đây mình đã phải khai báo cả tên project
/DNNWorking3/DesktopModules/MyZoomEx/images/shoe1_small.jpg
Nếu bỏ /DNNWorking3 ra thì không hiển thị hình được. T_T Do đó bạn sẽ không thấy hình ở hình thứ 3 và thứ 4. Ngoài ra các image phải có class="jqzoom". Nếu không thì image không có zoom được.
Để hiện zoom của 1 image, cần phải có 2 image. Một cái để hiện thị bình thường. Một cái được dùng để zoom bên cạnh.
[Read the rest of this article...]