Blogs Hub

by AskGif | Aug 29, 2019 | Category :coding

Implementing Jquery Photo Zoom Plugin

Implementing Jquery Photo Zoom Plugin

<p>Introducing a new jQuery PhotoZoom plugin, it helps you to view bigger images on mouse over component, this is very useful for media-related web applications. You can customize the PhotoZoom container based on your web page design. Very easy to implement just include the plugin using script tag and give required selector, take a look this live demo.</p> <p>&nbsp;</p> <p>The Basic Setup</p> <p>Include the jQuery and PhotoZoom plugin libraries into your document using script tag.&nbsp;</p> <pre class="language-javascript"><code>&lt;script src="jquery.js"&gt;&lt;/script&gt; &lt;script src="photoZoom.min.js"&gt; &lt;/script&gt; &lt;script&gt; $(document).ready(function() { $('body').photoZoom(); }); &lt;/script&gt; //HTML Code &lt;body&gt; &lt;img src='one.jpg'/&gt; &lt;img src='two.jpg'/&gt; ...... ...... &lt;/body&gt;</code></pre> <p>&nbsp;</p> <p>You can customize container design by modifying CSS elements.&nbsp;</p> <pre class="language-javascript"><code>$("body").photoZoom( { zoomStyle : { "border":"1px solid #ccc", "background-color":"#fff", "box-shadow":"0 0 5px #888" } });</code></pre> <p>Here you can reuse onMouseOver and onMouseOut events.&nbsp;</p> <pre class="language-javascript"><code>$("body").photoZoom( { onMouseOver : function(currentImage){ // do something }, onMouseOut : function(currentImage){ // do something } });</code></pre> <p>&nbsp;</p>

read more...