DEMO: http://jsfiddle.net/roXon/HmTrw/
<div id="images">
<img src="http://dummyimage.com/180x120/000/fff" alt="Image 1" title="This is my first image"/>
<img src="http://dummyimage.com/175x104/f0f/fff" alt="Image 2" title="The second one is pretty"/>
<img src="http://dummyimage.com/150x100/a3d/fff" alt="Image 3" title="Third image"/>
<img src="http://dummyimage.com/278x125/cf5/fff" alt="Image 4" title="Fourth image"/>
<img src="http://dummyimage.com/199x120/e46/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/207x480/361/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/400x107/081/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/50x40/cc3/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/700x500/233/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/300x120/a26/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/341x177/f10/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/164x239/d34/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/200x300/34e/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/175x120/72a/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/210x110/112/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/278x225/644/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/300x120/dc3/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/90x104/b30/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/120x60/bb3/fff" alt="Image alt attr." title="Some image title"/>
<img src="http://dummyimage.com/140x125/aa3/fff" alt="Image alt attr." title="Some image title"/>
</div>
#images{
padding:30px;
}
#images img{
float:left;
height:100px;
margin:5px;
padding:0px;
}
#ibox{
position:absolute;
overflow-y:none;
background:#fff;
border:1px solid #ccc;
z-index:1001;
display:none;
padding:4px;
-webkit-box-shadow: 0px 0px 6px 0px #bbb;
-moz-box-shadow: 0px 0px 6px 0px #bbb;
box-shadow: 0px 0px 6px 0px #bbb;
}
#ibox img{
border:1px solid #444;
}
#ibox br{
clear:both;
}
// ibox image zoomer plugin // roXon
(function($) {
$.fn.ibox = function() {
// set zoom ratio //
resize = 20;
////////////////////
var img = this;
img.parent().append('<div id="ibox" />');
var ibox = $('#ibox');
var elX = 0;
var elY = 0;
img.each(function() {
var el = $(this);
el.mouseenter(function() {
ibox.html('');
var elH = el.height();
elX = el.position().left - 6; // 6 = CSS#ibox padding+border
elY = el.position().top - 6;
var h = el.height();
var w = el.width();
var wh;
checkwh = (h < w) ? (wh = (w / h * resize) / 2) : (wh = (w * resize / h) / 2);
$(this).clone().prependTo(ibox);
ibox.css({
top: elY + 'px',
left: elX + 'px'
});
ibox.stop().fadeTo(200, 1, function() {
$(this).animate({top: '-='+(resize/2), left:'-='+wh},400).children('img').animate({height:'+='+resize},400);
});
});
ibox.mouseleave(function() {
ibox.html('').hide();
});
});
};
})(jQuery);
$(document).ready(function() {
$('#images img').ibox();
});
Brak komentarzy:
Prześlij komentarz