réalisation d'une galerie d'image
Posté : 11 oct. 2009, 20:07
Bonjour,
Je souhaite réaliser une galerie d'image de la même façon que:
http://www.sohtanaka.com/web-design/fan ... -w-jquery/
J'ai réaliser la même chose que la page mais ça ne marche pas. Je n'arrive pas à zoomer les miniatures et afficher en grand la photo.
Voici ma partie php:
Voici ma partie css:
Voici ma partie javascript:
Merci de votre aide précieuse.
Je souhaite réaliser une galerie d'image de la même façon que:
http://www.sohtanaka.com/web-design/fan ... -w-jquery/
J'ai réaliser la même chose que la page mais ça ne marche pas. Je n'arrive pas à zoomer les miniatures et afficher en grand la photo.
Voici ma partie php:
$contenu = '<ul class="thumb">';
$contenu .= '<li><a href="#"><img src="images\tata\black_flower_1.jpg" alt="Le titre de la photo 1"/></a></li>';
$contenu .= '<li><a href="#"><img src="images\tata\black_flower_2.jpg" alt="Le titre de la photo 2"/></a></li>';
$contenu .= '<li><a href="#"><img src="images\tata\black_flower_3.jpg" alt="Le titre de la photo 3"/></a></li>';
$contenu .= '<li><a href="#"><img src="images\tata\black_flower_4.jpg" alt="Le titre de la photo 4"/></a></li>';
$contenu .= '<li><a href="#"><img src="images\tata\black_flower_5.jpg" alt="Le titre de la photo 5"/></a></li> ';
$contenu .= '</ul>';Voici ma partie css:
Code : Tout sélectionner
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img{
width: 100px;
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 li img:hover {
background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect*/
border: none; /* Get rid of border on hover */Voici ma partie javascript:
Code : Tout sélectionner
$("ul.thumb li img").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({
marginTop: '-110px', /* The next 4 lines will vertically align this image */
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px', /* Set new width */
height: '174px', /* 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: '100px', /* Set width back to default */
height: '100px', /* Set height back to default */
padding: '5px'
}, 400
);
});