jquery help in centering a pop up image with mouseover event
Need some jquery help. I found a script that displays thumbnail images with a hover event. The script works fine, but by design, the images show up to the right based on the pixel location of the original thumbnail.
I want to change position of the image popped up so that it is always in the middle of the screen (or even better, centered inside the "div" that wraps the "ul", then on mouseout it goes back to the thumbnail location. But, I'm not quite sure how to do this. I tried adjusting the Top and Left locations in the .animate() jquery function, but I could get it to work right.
Any help or tips will be appreciated. Thanks.
HTML:
<div>
<ul class="thumb_standard">
<li><a href="#"><img src开发者_JAVA百科="<?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 the absolute positioning base coordinate */
width: 210px;
height: 110px;
}
ul.thumb_standard li img {
width: 200px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for 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 as background on hover effect
border: none; /* Get 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 a higher z-index value so this image stays on top*/
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
/* The next 4 lines will vertically align this image */
marginTop: '-210px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '700px', /* Set new width */
height: '500px', /* Set new height */
padding: '20px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
} , function() {
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: '200px', /* Set width back to default */
height: '100px', /* Set height back to default */
padding: '5px'
}, 400);
});
</script>
Please see the 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 for 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 and stop animation
li.addClass("hover");
img.stop(); /* Stop animation queue buildup*/
// Find the position relative to the 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 the position relative to the 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); /* this value of "200" is the speed of how fast/slow this hover animates */
} , function() {
var li = $(this);
var img = $(this).find('img');
var div = $(this).parent('div');
// Remove hover class and 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); /* this value of "400" is the speed of how fast/slow this 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>
加载中,请稍侯......
精彩评论