jquery實現圖片放大功能

利用的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 值爲靜態的圖片文件夾目錄(未測試)


發佈了35 篇原創文章 · 獲贊 9 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章