<html><head><meta charset="utf-8" /><title>jQuery Zoom Demo</title><style> /* styles unrelated to zoom */ * { border:0; margin:0; padding:0; } p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;} /* these styles are for the demo, but are not required for the plugin */ .zoom { display:inline-block; position: relative; } /* magnifying glass icon */ .zoom:after { content:''; display:block; width:33px; height:33px; position:absolute; top:0; right:0; background:url(icon.png); } .zoom img { display: block; } .zoom img::selection { background-color: transparent; } #ex2 img:hover { cursor: url(grab.cur), default; } #ex2 img:active { cursor: url(grabbed.cur), default; } </style><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="jquery.zoom.js"></script><script> $(document).ready(function(){ $('#ex1').zoom(); $('#ex2').zoom({ on:'grab' }); $('#ex3').zoom({ on:'click' }); $('#ex4').zoom({ on:'toggle' }); }); </script></head><body><span class="zoom" id="ex1"> <img src="daisy.jpg" width="555" height="320" alt="Daisy on the Ohoopee" /> <p>Hover</p> </span> <span class="zoom" id="ex2"> <img src="roxy.jpg" width="290" height="320" alt="Roxy on the Ohoopee" /> <p>Grab</p> </span> <span class="zoom" id="ex3"> <img src="daisy.jpg" width="555" height="320" alt="Daisy on the Ohoopee" /> <p>Click to activate</p> </span> <span class="zoom" id="ex4"> <img src="roxy.jpg" width="290" height="320" alt="Roxy on the Ohoopee" /> <p>Click to toggle</p> </span></body></html>