Searching...
Kamis, 30 Mei 2013

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>

Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan! Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah.. thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...