teh ice age
New Member
I am using ibox image zoomer plugin to give a zoom effect on images. These images have a link to another page. The problem here is that all the images are taking the link from the first image.Here is the javascript\[code\](function($) { $.fn.ibox = function() { // set zoom ratio // resize = 10; //////////////////// 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 = CSS#ibox padding+border elY = el.position().top ; 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,width:'+='+resize},400); }); }); ibox.mouseleave(function() { ibox.html('').hide(); }); }); };})(jQuery);$(document).ready(function() { $('.category_listing img').ibox();});\[/code\]Here is the HTML code\[code\]<ul class="category_listing"><li><div id="container"><a href="http://www.google.com/"><img src="http://stackoverflow.com/questions/14473185/lgg1s.jpg" /><h2>test1</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p><span>More details</span></a></div></li><li><div id="container"><a href="http://www.example.com/"><img src="http://stackoverflow.com/questions/14473185/l7.png" /><h2>test2</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span></a></div></li></ul>\[/code\]Here is the css\[code\].category_listing { float: left; position: relative; width: 590px;}.category_listing li { background: none repeat scroll 0 0 #171717; border: 1px solid #1C1C1C; border-radius: 3px 3px 3px 3px; float: left; margin-bottom: 17px; padding: 15px;}.category_listing li img { background: none repeat scroll 0 0 #151515; border: 1px solid #252525; float: left; height: 94px; padding: 5px; width: 132px;}\[/code\]Please help. Thanks in advance.