Ability to zoom in and drag or scroll the image within the same window This plugin has been tested in ie7+ , safari 4+, chrome 9+, firefox 3.6+, opera 10+.
CSS::
<style type="text/css">
.boxgalleryaka{float:left;width:100%;display:block;}
.boxgalleryaka ul{margin:0;padding:0;list-style-type:none;}
.boxgalleryaka li{float:left;margin-left:0;}
.boxgalleryaka li img{width:180px;height:130px;border:1px solid #eee;}
</style>
<link href="http://www.pirolab.it/pirobox_v_1_2/css_pirobox/style_3/style.css" rel="stylesheet" type="text/css"/>
SCRIPT::
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://www.pirolab.it/pirobox_v_1_2/js/pirobox_extended_def_08_2011.js"></script>
<script type="text/javascript" src="http://www.pirolab.it/pirobox_v_1_2/js/jquery_ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.pirobox_ext({
piro_speed : 650,
zoom_mode : true,
move_mode : 'mousemove',
bg_alpha : 0.5,
piro_scroll : true,
share: true
});
//$('#try_it').click()
});
</script>
DEMO Pirobox Lightweight Lightbox With jQuery Plugin.
Images Gallery
HTML::
<div class="boxgalleryaka">
<ul>
<li><a href="url-image.jpg" media="gallery" id="tre" class="pirobox_gall" title="Your descrizione immagine.">
<img title="Click for Original Image" src="url-image.jpg"/></a></li>
<li><a href="url-image.jpg" media="gallery" class="pirobox_gall" title="Your descrizione immagine.">
<img title="Click for Original Image" src="url-image.jpg"/></a></li>
<li><a href="url-image.jpg" media="gallery" class="pirobox_gall" title="Your descrizione immagine.">
<img title="Click for Original Image" src="url-image.jpg"/></a></li>
<li><a href="url-image.jpg" media="gallery" class="pirobox_gall" title="Your descrizione immagine.">
<img title="Click for Original Image" src="url-image.jpg"/></a></li>
</ul>
</div>
=================================================================================
Single image
HTML::
<div class="boxgalleryaka">
<a href="url-image.jpg" media="single" class="pirobox" title="Your descrizione immagine.">
<img title="Click for Original Image" src="url-image.jpg"/></a>
</div>
================================================================================= sumber
Posting Komentar