的jQuery插件gzoom不起作用

我想我的形象上與jQuery的（輝煌）插件gzoom（http://lab.gianiaz.com/jquery/gzoom/或http://www.chouselive.co.za/demo/pictures/zoom/gzoom.php）添加縮放。的jQuery插件gzoom不起作用

但它不起作用。我的圖片只是調整大小，但沒有放大。

這裏是我的代碼：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>test gzoom</title> 
    <link rel="stylesheet" href="css/jquery-ui-1.7.1.custom.css" type="text/css" media="screen"> 
    <link rel="stylesheet" href="css/jquery.gzoom.css" type="text/css" media="screen"> 
    <style> 
    div#zoom{ 
     cursor: crosshair; 
    } 
    </style> 
</head> 
<body> 
    <div id="gzoomwrap"> 
     <div id="zoom" class="zoom minizoompan"> 
      <span class="loader">loading...</span> 
      <img src='img/myImage.png'/> 
     </div> 
     <!-- START gzoom zoom bar --> 
     <div class="ui-icon ui-icon-circle-minus gzoombutton">&nbsp;</div> 
     <div class="gzoomSlider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="width: 258px;"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all"></a></div> 
     <div class="ui-icon ui-icon-circle-plus gzoombutton">&nbsp;</div> 
     <br style="clear:both"> 
     <!-- END gzoom zoom bar --> 
    </div> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <!-- START gzoom dependencies --> 
    <script type="text/javascript" src="js/ui.core.min.js"></script> 
    <script type="text/javascript" src="js/ui.slider.min.js"></script> 
    <script type="text/javascript" src="js/jquery.gzoom.js"></script> 
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script> 
    <script type="text/javascript"> 
     /*<![CDATA[*/ 
     $(function() { 
     $zoom = $("#zoom").gzoom({ 
      sW: 300, 
      sH: 225, 
      lW: 1400, 
      lH: 1050, 
      lighbox : false 
     }); 
     }); 
     /*]]>*/ 
    </script> 
    <!-- END gzoom dependencies --> 
</body> 
</html>

我看了Chrome的控制檯上，發現在庫中的一些錯誤。所以我假設我沒有正確執行gzoom。（並非在所有瀏覽器上工作）

gzoom errors

如果你知道我做錯了什麼？我會感謝你很多！

來源

2013-10-29 Emilie

確保.js文件的路徑是相關的。嘗試將腳本標籤放置在head-tag –

@Mikhail Timofeev .js正確鏈接。我把它們放在頭標內，但它不會改變任何東西。 – Emilie

我是gzoom插件作者。這個插件是很久以前開發出來的，但它仍然與新版本的jquery和jquery ui一起工作。如果你包含一個現代的jQuery版本，你還必須包含一個現代版本的jquery-ui。我只是試着用這個版本的插件，並做他的工作：

jQuery的1.10.2.min.js 的jQuery-UI-1.10.3.custom.min.js

包括此文件，並從ui.slider.min中刪除ui.core.min。

來源

2013-11-26 16:57:45

就是這樣。非常感謝你的回答，順便說一下，非常好的插件！ – Emilie

的jQuery插件gzoom不起作用

回答

相關問題