I am trying to add scaling to my image using the jQuery (brilliant) gzoom plugin ( http://lab.gianiaz.com/jquery/gzoom/ or http://www.chouselive.co.za/demo/pictures/zoom/gzoom. php ).
But that will not work. My image is simply resized, but there is no magnification.
Here is my code:
<!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> <div class="ui-icon ui-icon-circle-minus gzoombutton"> </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"> </div> <br style="clear:both"> </div> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <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> </body> </html>
I looked at the Chrome console and found some errors in the libraries. Therefore, I assume that I did not use gzoom correctly. (Does not work in all browsers)
If you know what I'm doing wrong ... I will be very grateful to you!
source share