利用的jquery是fancyzoom
下載fancyzoom文件不贅述
將解壓後的文件放在工程的靜態目錄下 例如 static 是靜態目錄 static下有js 目錄 將fancyzoom放到js目錄下
之後在所在的html中引用以下代碼
<script src="/static/js/fancyzoom/js/FancyZoom.js" language="JavaScript" type="text/javascript"></script>
<script src="/static/js/fancyzoom/js/FancyZoomHTML.js" language="JavaScript" type="text/javascript"></script>
<body οnlοad="setupZoom();"><a href="big_image_url"><img src="small_image_url"/></a>
以上是前端代碼 big_image_url 是大圖片的地址 small_image_url是縮略圖地址
可能出現問題:
1衆多用來美化的圖片不能顯示,原因是請求圖片的路徑不對。因爲做的是簡易版所以我只說明必要的關閉大圖片的差號的處理。
fancyzoom/js 下的FancyZoomHTML.js 文件中的 closebox.png的圖片地址給改掉,因爲在靜態目錄下所以自己找一下closebox.png圖片的靜態路徑然後配置上就可以。
2有其他解決方案, 修改FancyZoom.js 中的 zoomImagesURI 值爲靜態的圖片文件夾目錄(未測試)