Créer un zoom image
Résolu/Fermé
alea31
Messages postés
4
Date d'inscription
lundi 21 mai 2007
Statut
Membre
Dernière intervention
18 décembre 2007
-
21 mai 2007 à 21:59
paulineRipauste - 12 mars 2014 à 09:40
paulineRipauste - 12 mars 2014 à 09:40
A voir également:
- Html zoom image onclick
- Image iso - Guide
- Telecharger zoom - Télécharger - Téléphonie & Visio
- Editeur html - Télécharger - HTML
- Acronis true image - Télécharger - Sauvegarde
- Faststone image viewer - Télécharger - Visionnage & Diaporama
6 réponses
Linux67
Messages postés
306
Date d'inscription
lundi 21 mai 2007
Statut
Membre
Dernière intervention
7 juillet 2012
123
21 mai 2007 à 22:33
21 mai 2007 à 22:33
Bonsoir,
je ne sais pas si ce bout de code est ce que tu cherches, je l'ai utilisé pour afficher des images en miniature à leur taille réelle dans une nouvelle fenêtre.
Le code est à placer dans l'entête du fichier html, entre les balises <head> et </head> et le navigateur doit accepter les pop-up pour que l'image puisse s'agrandir une fois qu'on clique dessus.
Ensuite tu as entre les balises <body et </body> un code ressemblant à celui-là.
Ici il va chercher les images et les affiche en miniature, et en même temps indique que lorsqu'on clique sur celles-ci il faut utiliser ll'ouverture du pop-up pour l'affichage en taille réelle.
Il faudra ajouter après chaque image en miniature la ligne
pour que l'agrandissement puisse fonctionner.
C'est un peu barbare au premier abord, mais j'éspère qu'il te sera utile.
Bonne soirée.
je ne sais pas si ce bout de code est ce que tu cherches, je l'ai utilisé pour afficher des images en miniature à leur taille réelle dans une nouvelle fenêtre.
<script>
<!-- script créé par le webmaster de : www.creation-de-site.net -->
<!-- vous y trouverez des javascripts, des images, des tutoriaux et des ressources gratuites. -->
<!-- Ce script permet d'afficher une image miniature à sa taille réelle dans une nouvelle fenêtre -->
function open_window(votre_page)
{
var hauteur_popup=800;
var H = (screen.height - hauteur_popup) / 2;
var largeur_popup=800;
var L = (screen.width - largeur_popup) / 2;
pop_up = window.open(votre_page,"Popup","status=yes,scrollbars=yes,resizable=no,height="+hauteur_popup+",width="+largeur_popup+",top="+H+",left="+L);
}
</script>
Le code est à placer dans l'entête du fichier html, entre les balises <head> et </head> et le navigateur doit accepter les pop-up pour que l'image puisse s'agrandir une fois qu'on clique dessus.
Ensuite tu as entre les balises <body et </body> un code ressemblant à celui-là.
Ici il va chercher les images et les affiche en miniature, et en même temps indique que lorsqu'on clique sur celles-ci il faut utiliser ll'ouverture du pop-up pour l'affichage en taille réelle.
<img src="..\images\image1.jpg" width="200px" onClick="open_window('../images/image1.jpg');">
<img src="..\images\image2.jpg" width="200px" onClick="open_window('../images/image2.jpg');">
<img src="..\images\image3.jpg" width="200px" onClick="open_window('../images/image3.jpg');">
<img src="..\images\image4.jpg" width="200px" onClick="open_window('../images/image4.jpg');">
Il faudra ajouter après chaque image en miniature la ligne
onClick="open_window('../images/image4.jpg')
pour que l'agrandissement puisse fonctionner.
C'est un peu barbare au premier abord, mais j'éspère qu'il te sera utile.
Bonne soirée.
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
21 mai 2007 à 22:32
21 mai 2007 à 22:32
salut,
en html tu pourrais avoir à gauche les petites images (des miniatures des images réelles ou des détails des images réelles) qui quand elles sont survolées par le curseur affichent l'image intégrale dans la partie droite.
c'est faisable avec Dreamweaver ou un autre éditeur html.
pour cela tu dois utiliser les feuilles de style (css).
mais pour gérer le clic sans recharger la page il faudra utiliser du Javascript.
soit dit en passant ce sera plus rapide à charger que le Flash.
en html tu pourrais avoir à gauche les petites images (des miniatures des images réelles ou des détails des images réelles) qui quand elles sont survolées par le curseur affichent l'image intégrale dans la partie droite.
c'est faisable avec Dreamweaver ou un autre éditeur html.
pour cela tu dois utiliser les feuilles de style (css).
mais pour gérer le clic sans recharger la page il faudra utiliser du Javascript.
soit dit en passant ce sera plus rapide à charger que le Flash.
alea31
Messages postés
4
Date d'inscription
lundi 21 mai 2007
Statut
Membre
Dernière intervention
18 décembre 2007
21 mai 2007 à 23:42
21 mai 2007 à 23:42
Merci beaucoup, c'est tout à fait ce que je veux réaliser, mais je ne
sais pas par où commencer ! Pourrais tu m'aider ? merci beaucoup. Bonne
soirée
sais pas par où commencer ! Pourrais tu m'aider ? merci beaucoup. Bonne
soirée
Linux67
Messages postés
306
Date d'inscription
lundi 21 mai 2007
Statut
Membre
Dernière intervention
7 juillet 2012
123
22 mai 2007 à 08:58
22 mai 2007 à 08:58
Je suis en ce moment sur mon lieu de travail (quel grand mot ^_^), je vais voir ce soir dans les pages que j'avais fait en cours pour récupérer ce morceau de code, je pense l'avoir utilisé aussi.
Bonne journée.
Bonne journée.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Linux67
Messages postés
306
Date d'inscription
lundi 21 mai 2007
Statut
Membre
Dernière intervention
7 juillet 2012
123
22 mai 2007 à 23:17
22 mai 2007 à 23:17
J'ai bien retrouvé le code utilisé pour faire une sorte de galerie d'images, mais il n'est pas pratique d'utilisation, il faudrait le rééditer à chaque ajout d'image pour créer la miniature et l'image en taille réelle.
Je vais tenter de l'automatiser cette semaine, je n'ai pas eu beaucoup de temps à moi ce soir pour vraiment y travailler à fond.
Bonne soirée.
Je vais tenter de l'automatiser cette semaine, je n'ai pas eu beaucoup de temps à moi ce soir pour vraiment y travailler à fond.
Bonne soirée.
Merci à vous tous pour votre aide, j'ai trouvé la solus sur le site
https://www.lecodejava.com/
Bonne journée, Aléa
https://www.lecodejava.com/
Bonne journée, Aléa
21 mai 2007 à 23:41
miniature à leur taille réelle dans une seule et même fenêtre. Sais tu comment
procéder ? bonne soirée, Aléa
12 mars 2014 à 09:40
J'ai également besoin de votre aide, j'ai un site internet www.ripauste.fr et je voudrais ajouter un zoom. J'ai le code :
<style type="text/css">
#jqZoom_vignettes{
clear: both;
}
#jqZoom_vignettes img{
width: 75px;
}
</style>
<script type='text/javascript' src='../site/jqzoom/js/jquery-1.6.js'></script>
<script type='text/javascript' src='../site/jqzoom/js/jquery.jqzoom-core.js'></script>
<link rel="stylesheet" type="text/css" href="../site/jqzoom/css/jquery.jqzoom.css">
<script type="text/javascript">
$(document).ready(function(){
$('.jqZoom_zoom').jqzoom();
});
</script>
<a href="*UrlZoom*" class="jqZoom_zoom" title="*NomProduitBrut*" rel="jqZoom_gallerie">
<img src="*UrlIllustration*" title="*NomProduitBrut*">
</a>
<div id="jqZoom_vignettes">
<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration*',largeimage: '*UrlZoom*'}"><img src="*UrlIllustration*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration2*',largeimage: '*UrlZoom2*'}"> <img src="*UrlIllustration2*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration3*',largeimage: '*UrlZoom3*'}"> <img src="*UrlIllustration3*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration4*',largeimage: '*UrlZoom4*'}"> <img src="*UrlIllustration4*"></a>
<a href="javascript:void(0);" rel="{gallery: 'jqZoom_gallerie', smallimage: '*UrlIllustration5*',largeimage: '*UrlZoom5*'}"> <img src="*UrlIllustration5*"></a>
</div>
Et je souhaite l'insérer dans mes fiches produits...mais ca ne fonctionne pas...Ca m'ajoute des photos en dessous de la photo à zoomer....
Quelqu'un peu m'aider?
Merci d'avance!
Pauline