Effet grossisant sur une image quelle librairie utiliser ?

Effet grossisant sur une image quelle librairie utiliser ? - HTML/CSS - Programmation

Marsh Posté le 28-11-2008 à 14:20:40    

Bonjour,
 
Je cherche à faire un effet grossissant lorsque le pointeur de la souris passe sur une image,
 
voici un exemple de site qui fait ce que je recherche :
 
http://fr.dreamstime.com/big-boss- [...] age6077004
 
quelle librairie me conseillez vous ?
 
Je n'ai pas trouvé d'exemple avec la librairie lightbox ... je vous en connaissez ?
 
Merci


Message édité par mims1664 le 28-11-2008 à 14:24:01

---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 28-11-2008 à 14:20:40   

Reply

Marsh Posté le 28-11-2008 à 16:02:48    

Modifier lightbox, en remplacant les evenement 'click' par 'onmouseover' et 'onmouseout' :D (mais remplacer les bons, pas tous hein, genre "page suivante" 'page précente", "fermer la fenetre" faut laisser les 'click'
Sinon je vois pas à part coder ça à la main ou utiliser d'autre librairies (et la je saurai pas te répondre)


Message édité par Alisteroid le 28-11-2008 à 16:03:25
Reply

Marsh Posté le 28-11-2008 à 17:28:05    

Ouais mais j'ai aussi l'effet sombre autour de l'image ... je cherche quelque chose de plus soft et rapide ! pas d'effet d'ouverture, un peu comme le lien que j'ai posté !


Message édité par mims1664 le 28-11-2008 à 17:28:22

---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 28-11-2008 à 22:30:27    

J'ai trouvé mon bonheur ici :
 
http://www.javascriptkit.com/scrip [...] ewer.shtml
 
Merci


---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 28-11-2008 à 22:43:53    

Quoi que mon réel bonheur serait cela :
 
http://www.sxc.hu/profile/nahhan
 
mais je n'ai pas bien compris quel était la librairie utilisée !


---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 29-11-2008 à 10:26:02    

http://byscripts.info/ avec les script qu'il a fait + mootols


---------------

Reply

Marsh Posté le 29-11-2008 à 11:06:27    

Merci je devrais trouver mon bonheure avec ca !


---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 02-12-2008 à 13:37:30    

et pourquoi pas entièrement en css?
Me suis inspiré d'un exemple sur Dynamic Drive et ça donne ceci: http://www.lpgonline.be/index.php?id=131
 


Message édité par avander le 02-12-2008 à 13:39:19
Reply

Marsh Posté le 02-12-2008 à 15:34:51    

ha ouais c'est du beau boulot ca !! tu partages ta source ?
 
Tu t'est appuyer sur quel script ?


---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 03-12-2008 à 13:03:39    

L'exemple vient de www.dynamicdrive.com, j'ai même retrouvé l'exemple.  
 
Mon code adapté:
 

/*  
 * gestion des vignettes avec pop-up dans les articles  
 * code basé sur exemple de dynamic drive
 *
 * exemple de code HTML correspondant :
<a class="thumbnail left">
  <img border="0" height="97" src="./assets/galleries/130/vignette_image.png" width="130" />
  <span><img src="http://lpgonline.be/assets/galleries/130/image.png" /><br />
  Légende de l'image.</span>
</a>
 *
 */
 
.right { /* adds floating to thumbnail images */
float:right;
}
.left{
float:left;
margin-right: 5px; /* moves para text away from left thumbnail */
}
 
.thumbnail{
position: relative;
z-index: 0;
}
 
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
 
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
 
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
}
.right:hover span{ /*CSS for enlarged image on hover*/
left: -250px; /*position where enlarged image should offset horizontally */
}
.left:hover span{ /*CSS for enlarged image on hover*/
left: 0px; /*position where enlarged image should offset horizontally */
}
 


Message édité par avander le 03-12-2008 à 13:08:44
Reply

Marsh Posté le 03-12-2008 à 13:03:39   

Reply

Marsh Posté le 03-12-2008 à 13:38:13    

Ok mais la tu charges aussi les 2 images au chargement de la page, ca peut etre long si les images son imposantes ....


---------------
la vie à le goût qu'on lui donne !! Vive le photo numérique et le tirage photo
Reply

Marsh Posté le 03-12-2008 à 16:14:16    

C'est jamais une bonne idée de balancer des photo's de 10MPx dans une page web. Si vraiment nécessaire, on propose un lien et on laisse le choix au visiteur...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed