Image Zoom Lightbox With GZoom jQuery Plugin

Really nice image jQuery Zoom plugin with the following features: click on plus and minus to zoom, drag the slider to zoom Zoom using mousewheel hover the image, Moving mouse hover the image change the pan, Click on the image to show in lightbox style...
Demo sobat lihat disini...

CSS::

/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 11px; }
.ui-widget-content { border: 1px solid #bbb;background:#ffffff url(http://lab.gianiaz.com/jquery/gzoom/images/ui/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;}
/* Interaction states
----------------------------------*/
.ui-widget-content .ui-state-default { border: 1px solid #d3d3d3; background: #a59a8d url(http://lab.gianiaz.com/jquery/gzoom/images/ui/ui-bg_glass_75_a59a8d_1x400.png) 50% 50% repeat-x;}
.ui-widget-content .ui-state-hover { border: 1px solid #999999; background: #dadada url(http://lab.gianiaz.com/jquery/gzoom/images/ui/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;}
/* Icons
----------------------------------*/
.ui-icon { width: 16px; height: 16px; background-image: url(http://lab.gianiaz.com/jquery/gzoom/images/ui/ui-icons_222222_256x240.png); }
/* positioning */
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }


/* MiniZoomPan styles */
.gzoomwrap {
  float:left;
  margin:0 10px 0 0;
}
.minizoompan {
  background: #fff;
  position: relative; /* always set to relative or offset() won't work */
border: 1px solid lightgray;
  padding: 0;
  margin: 0;
}

.minizoompan span.loader { /* the loader label*/
  position:absolute;
  left:0;
  top:0;
  z-index: 1;
  display: none;
  color:#000;
  background:none;
  font: normal 11px Arial, Verdana;
  padding: 3px;
}
.minizoompan .zoomIcon { /* the zoom icon */
  position:absolute;
  cursor:pointer;
  left:0;
  top:0;
  z-index: 1;
  display: none;
}

.gzoombutton {
  float:left;
  cursor:pointer;
}
.gzoomSlider {
  float:left;
  margin:3px 5px 0 5px;
}

#gzoomoverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
}
#gzoomlbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
}
#gzoomlbox a img {
  border: none;
}
#imagebox {
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
#gzoom-cont-img { padding: 10px; }

#lboximgdatacontainer {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%;
    padding: 0 10px 0;
    padding: 0 10px 10px 10px;
    color:#666;
}
#gzoomloading {display:inline;background:url(http://lab.gianiaz.com/jquery/gzoom/images/loading.gif) no-repeat;
    position: absolute;
    top:50%;
    left:50%;right:50%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}

#lboximgdatacontainer #gzoomlbox-image-details { width:70%; float:left;text-align:left; }
#gzoom-image-caption {font-weight:bold;}
.zoomIcon {width:40px;height:40px;position:absolute;top:0;right:0;}

SCRIPT::

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript" src="http://lab.gianiaz.com/jquery/gzoom/jquery/ui.core.min.js"></script>
<script type="text/javascript" src="http://lab.gianiaz.com/jquery/gzoom/jquery/ui.slider.min.js"></script>
<script type="text/javascript" src="http://lab.gianiaz.com/jquery/gzoom/jquery/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://lab.gianiaz.com/jquery/gzoom/jquery/jquery.gzoom.js"></script>

HTML for Excample 1

<div id="zoomligaka" class="zoom">
<img height='325' src="url-image.jpg" alt="zoomligaka" width='400' title="Beautiful Girl and Orchid - 2013 &copy; akaUTta" />
</div>
<script type= "text/javascript">
/*<![CDATA[*/
$(function() {
$("#zoomligaka").gzoom({
sW: 400,
sH: 325,
lW: 1024,
lH: 768,
lightbox: true,
zoomIcon: 'http://www.matalaaerationproducts.com/images/zoom-icon.png'
});});
/*]]>*/
</script>

HTML for Excample 2

<div class="zoomligaka1">
<img height='400' src="url-image.jpg" width='300' alt="zoomligaka" title="Beautiful Girl - Hair Orange Piercing - 2013 &copy; akaUTta" />
</div>
<script type= "text/javascript">
/*<![CDATA[*/
$(function() {
$(".zoomligaka1").gzoom({
sW: 300,
sH: 400,
lW: 1024,
lH: 768,
lightbox: true
});});
/*]]>*/
</script>

sumber

Berbagi :