Affichage d'image avec vrais zoom

Soyez le premier à donner votre avis sur cette source.

Vue 14 626 fois - Téléchargée 1 652 fois

Description

le script sert a afficher en grand une image avec option de zoom dirigé par rapport au curseur effectue avec la molette de la sourie le clic gauche de la souris sert a deplacer l'image.le plus c'est que la mise en oeuvre du script est simple


lien de teste

mise en place

il suffit de priciser le fichier ce meme fichier peut etre éditer afin de modifé les option qui se trouve au début


function kmage(){

this.opacite_fond=0.5;			//opacite du fond valeur comprise entre 0 et 1
this.couleur_fond="black";		//couleur du fond
this.chemin="images/";			//repertoire ou se trouves les images
this.taille=80;				// taille de l'image en pourcentage a l'affichage par rapport a la taille de la fenetre du navigateur
.....


quand au html pour chaque image il faudra ajoute l'attribut data-lk

<img src="images_t/euphorbes.jpg" style="z-index:5;position:absolute;top:10%;left:20%;height:100px;" data-lk>
<img src="images_t/magnolia.jpg" style="position:absolute;top:50%;left:20%;height:100px;" data-lk>
<img src="images_t/primevere.jpg" style="position:absolute;top:10%;left:50%;height:100px;"data-lk>
.....


et en ce qui concerne les image elle devront avoir le meme nom que les image miniature mis dans des dossier différent bien évidement

Conclusion :

ouep

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1754
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
10 mai 2020
73
je vient de faire le teste avec ie tester car j'ai ete entonné et il fonctionne bien avec ie 7 et 8 et meme ie 6 ?
Messages postés
18
Date d'inscription
vendredi 21 avril 2006
Statut
Membre
Dernière intervention
29 décembre 2011

Dommage qu'il ne marche pas sous IE7 & IE8.

J'ai essayé de modifier les "document.all" par "document.getElementbyID" et d'autres, mais en vain :(
Messages postés
16
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
28 juillet 2011

Bonjour;

Tout d'abord, je tiens à te remercier pour ton script magnifique, je suis débutant en javascript, et je voudrais poser deux questions à propos de ce script d'image
J'ai vu que les fonctions sont déclarées différemment à ce que j'ai pu voir lors de mes recherches sur internet : en effet tu as déclaré par exemple la fonction précharge de la façon suivante : precharge:function(ii) alors que les tutoriels exige la déclaration suivante function precharge(ii). Est ce normal?
Ma deuxième question est la suivante :Est ce qu'on peut utiliser ce script pour HTML5??
Messages postés
13
Date d'inscription
jeudi 15 février 2007
Statut
Membre
Dernière intervention
4 avril 2011

Bonjour,

j'ai une question à propos de ce script, peut-on contraindre le zoom de l'image à ne pas dépasser 100% et le dé-zoom à 50% par exemple ?
Messages postés
1
Date d'inscription
samedi 6 janvier 2007
Statut
Membre
Dernière intervention
6 février 2011

Bonjour,
excellent script ! robuste et efficace, très simple à utiliser et à installer, y compris pour l'illettré javascript que je suis... (3 minutes montre en main) Il me manque juste un détail : comment faire pour ajouter quelques lignes de commentaires texte sous l'image agrandie ? Idéalement, pouvoir insérer un commentaire différent pour chaque image mais déjà s'il y avait un genre de "alt" qui précise à l'internaute qu'il doit cliquer hors de l'image agrandie pour revenir sur la page, ce serait parfait.
Bravo !
Afficher les 16 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.