Affichage d'image avec vrais zoom
Soyez le premier à donner votre avis sur cette source.
Vue 15 592 fois - Téléchargée 1 706 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
quand au html pour chaque image il faudra ajoute l'attribut 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
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 :
ouepCodes Sources
A voir également
- Zoom image javascript
- Javascript zoom image - Meilleures réponses
- Script zoom image - Meilleures réponses
- Python zoom image ✓ - Forum - Python
- Faire défiler des images javascript - Guide
- Flash : Zoom image - CodeS SourceS - Guide
- Zoom image c# - Guide
- Zoom canvas javascript - Guide
- Messages postés
-
1782
- Date d'inscription
- vendredi 9 mai 2008
- Statut
- Modérateur
- Dernière intervention
- 19 février 2021
123J'ai essayé de modifier les "document.all" par "document.getElementbyID" et d'autres, mais en vain :(
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??
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 ?
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 !
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.