Aide jquery dans le centrage d'une image contextuelle avec l'événement mouseover

Besoin de l'aide de jquery. J'ai trouvé un script qui affiche des images miniatures avec un événement hover. Le script fonctionne bien, mais à la conception, les images s'affichent à droite en fonction de l'emplacement du pixel de la vignette d'origine. Je veux changer la position de l'image pour qu'elle soit toujours au milieu de l'écran (ou mieux, centrée à l'intérieur de la "div" qui enveloppe le "ul", puis à la sortie du mais je ne suis pas sûr de la façon de procéder, j'ai essayé d'ajuster les emplacements Top et Left dans la fonction jquery de .animate(), mais je pouvais le faire fonctionner correctement. conseils seront appréciés MerciAide jquery dans le centrage d'une image contextuelle avec l'événement mouseover

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 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>

Source

2010-12-03 Ronedog

S'il vous plaît voir le code suivant:

<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>

Source

2010-12-03 02:23:55

Merci pour la réponse. Je pense que je me suis mal expliqué. Vos suggestions fonctionnent bien. Sauf que je cherche l'image pour apparaître pas exactement au centre de la vignette de l'image, mais dans le centre "horizontal" de l'écran. Donc, ce que j'ai est une rangée de 5 vignettes qui s'étendent horizontalement sur l'écran. Si je passe la souris sur l'image de gauche, ou sur l'image de droite, la fenêtre img est coupée à cause de l'élément "marginLeft". Mon espoir est d'avoir l'image popup dans le centre "horizontalement". Merci de votre aide. – Ronedog

Oups, ma mauvaise. J'ai compris que la première fois, mais pas la deuxième fois. S'il vous plaît voir la réponse mise à jour pour une idée de la façon de le faire. –

awsome, en regardant bien jusqu'à présent. Changements de couple cependant, je devais ajouter 'top: '- 100%' 'pour placer img là où j'en avais besoin. J'ai aussi dû rajouter le '$ (this) .css ({'z-index': '0'})' dans la balise

Aide jquery dans le centrage d'une image contextuelle avec l'événement mouseover

Répondre

Questions connexes