jquery lightbox image Gallery plugin with Magnifier effect

ZBox is a jquery lightbox image gallery plugin with magnifier effect. The Lightbox plugin can display a large, high-definition image of the corresponding thumbnail, and you can also use a magnifying glass to view the magnification in detail when browsing a large HD image.

Online preview Source Download

How to use

Using the Lightbox plugin requires the introduction of jquery and Jquery.zbox.css, as well as jquery.zbox.js files

<link type= "Text/css" rel= "stylesheet" href= "Css/jquery.zbox.css"/>               <script src= "Js/jquery.min.js" ></script><script src= "Js/jquery.zbox.js" ></script>     

HTML Structure

The basic HTML structure of the Lightbox plugin uses a hyperlink to wrap an image element with hyperlinks pointing to a large HD image.

<aclass= "ZB"rel= "group"href= "1.png"title= "Image 1">  <!--thumbnail Images -  <imgsrc= "1_thumb.png"></a> <aclass= "ZB"rel= "group"href= "2.png"title= "Image 2">  <!--thumbnail Images -  <imgsrc= "2_thumb.png"></a> <aclass= "ZB"rel= "group"href= "3.png"title= "Image 3">  <!--thumbnail Images -  <imgsrc= "Thumb3.png"></a> 

Initializing plug-ins

After the page has been loaded, you can initialize the Lightbox plug-in by using the following method.

$ (". ZB"). ZBox ();

Online preview Source Download

jquery lightbox image Gallery plugin with Magnifier effect