jquery help in centering a pop up image with mouseover event -
need jquery help. found script displays thumbnail images hover event. script works fine, design, images show right based on pixel location of original thumbnail.
i want change position of image popped in middle of screen (or better, centered inside "div" wraps "ul", on mouseout goes thumbnail location. but, i'm not quite sure how this. tried adjusting top , left locations in .animate() jquery function, work right.
any or tips appreciated. thanks.
html:
<div> <ul class="thumb_standard"> <li><a href="#"><img src="<?php echo $domain;?>images/screenshots/occupants1.png" alt="tenants/occupants"/></a></li> <li><a href="#"><img src="<?php echo $domain;?>images/screenshots/occupants2.png" alt="tenants/occupants"/></a></li> <li><a href="#"><img src="<?php echo $domain;?>images/screenshots/occupants3.png" alt="tenants/occupants"/></a></li> </ul> </div> css:
/* thumbnail popup display */ ul.thumb_standard { /*float: left;*/ list-style: none; margin: auto; padding: 10px; width: 900px; } ul.thumb_standard li { margin: 0; padding: 5px; float: left; position: relative; /* set absolute positioning base coordinate */ width: 210px; height: 110px; } ul.thumb_standard li img { width: 200px; height: 100px; /* set small thumbnail size */ -ms-interpolation-mode: bicubic; /* ie fix bicubic scaling */ /*border: 1px solid #ddd;*/ padding: 5px; /*background: #f0f0f0;*/ position: absolute; left: 0; top: 0; } ul.thumb_standard li img.hover { background:url(thumb_bg.png) no-repeat center center; /* image used background on hover effect border: none; /* rid of border on hover */ } .thumb_container{margin:auto;} /* end thumbnail display */ jquery:
<script type="text/javascript"> $("ul.thumb_standard li").hover(function() { $(this).css({'z-index' : '10'}); /*add higher z-index value image stays on top*/ $(this).find('img').addclass("hover").stop() /* add class of "hover", stop animation queue buildup*/ .animate({ /* next 4 lines vertically align image */ margintop: '-210px', marginleft: '-110px', top: '50%', left: '50%', width: '700px', /* set new width */ height: '500px', /* set new height */ padding: '20px' }, 200); /* value of "200" speed of how fast/slow hover animates */ } , function() { $(this).css({'z-index' : '0'}); /* set z-index 0 */ $(this).find('img').removeclass("hover").stop() /* remove "hover" class , stop animation queue buildup*/ .animate({ margintop: '0', /* set alignment default */ marginleft: '0', top: '0', left: '0', width: '200px', /* set width default */ height: '100px', /* set height default */ padding: '5px' }, 400); }); </script>
please see following code:
<html> <head> <style> /* thumbnail popup display */ ul.thumb_standard { /*float: left;*/ list-style: none; margin: auto; padding: 10px; width: 900px; } ul.thumb_standard li { margin: 0; padding: 5px; position: relative; float: left; width: 210px; height: 110px; z-index: 0; } ul.thumb_standard li.hover img { z-index: 10; } ul.thumb_standard li img { position: relative; width: 210px; height: 110px; -ms-interpolation-mode: bicubic; /* ie fix bicubic scaling */ } .thumb_container { margin:auto; } /* end thumbnail display */ </style> <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("ul.thumb_standard li").hover(function() { var li = $(this); var img = li.find('img'); var div = li.closest('div'); // add hover class , stop animation li.addclass("hover"); img.stop(); /* stop animation queue buildup*/ // find position relative div var new_width = 700; var new_height = 500; var new_left = (div.width() - new_width) / 2; var new_top = (div.height() - new_height) / 2; // find position relative li var li_offset = li.position(); new_left -= li_offset.left; new_top -= li_offset.top; img.animate({ top: new_top + 'px', left: new_left + 'px', width: new_width + 'px', height: new_height + 'px', }, 200); /* value of "200" speed of how fast/slow hover animates */ } , function() { var li = $(this); var img = $(this).find('img'); var div = $(this).parent('div'); // remove hover class , stop animation li.removeclass("hover"); img.stop(); /* stop animation queue buildup*/ var new_width = 210; var new_height = 110; img.animate({ top: '0px', left: '0px', width: new_width + 'px', height: new_height + 'px', }, 400); /* value of "400" speed of how fast/slow hover animates */ }); }); </script> </script> </head> <body> <div style="position: relative; left: 100px; top: 300px; width: 1200px; height: 1200px; border: 1px solid blue;"> <ul class="thumb_standard"> <li><a href="#"><img src="http://3.bp.blogspot.com/_zago7gjcqai/rvufofzolqi/aaaaaaaafou/fndc5e14n_m/s640/google-birthday-doodles.png" alt="tenants/occupants"/></a></li> <li><a href="#"><img src="http://blog.searchenginewatch.com/blog/img/google-beta.jpg" alt="tenants/occupants"/></a></li> <li><a href="#"><img src="http://www.futureofthebook.org/blog/archives/google%202084.jpg" alt="tenants/occupants"/></a></li> </ul> </div> </body>
Comments
Post a Comment