Image miniature vers grande taillle en clique
bakkus
Messages postés
93
Statut
Membre
-
bakkus Messages postés 93 Statut Membre -
bakkus Messages postés 93 Statut Membre -
Bonjour à tous ,
Je cherche depuis des jours un scripte qui ferait en sorte que j'affiche dans un onglet plein d'images en miniatures et quand je clique sur l'une d'elles , j'obtiens l'image en grand format à côté.
J'ai fini par trouver dans un site un exemple qui fait exactement ce que je veux .
Par contre en essayant de récupéré le code je me heurte au faite que je suis vraiment débutant et je ne c pas comment faire.
Le site en question est celui ci :
http://www.clubic.com/shot-jeux-video-9576-0-bionic-commando.html
vous pouvez m'aider ?
Merci
Je cherche depuis des jours un scripte qui ferait en sorte que j'affiche dans un onglet plein d'images en miniatures et quand je clique sur l'une d'elles , j'obtiens l'image en grand format à côté.
J'ai fini par trouver dans un site un exemple qui fait exactement ce que je veux .
Par contre en essayant de récupéré le code je me heurte au faite que je suis vraiment débutant et je ne c pas comment faire.
Le site en question est celui ci :
http://www.clubic.com/shot-jeux-video-9576-0-bionic-commando.html
vous pouvez m'aider ?
Merci
A voir également:
- Image miniature vers grande taillle en clique
- Image iso - Guide
- Reduire taille image - Guide
- Légende image word - Guide
- Transformer une image en icone - Guide
- Il est en cours de transport vers votre site de livraison - Forum Consommation & Internet
4 réponses
Bonsoir,
As-tu pensé à ce genre de script: http://notreenvironnement.fr/Astuce-Bon-plan/Informatique/creation-site-web/Images-gratuites-libres-de-droits.php ?
sinon, moi, je ne sais pas comment faire
As-tu pensé à ce genre de script: http://notreenvironnement.fr/Astuce-Bon-plan/Informatique/creation-site-web/Images-gratuites-libres-de-droits.php ?
sinon, moi, je ne sais pas comment faire
Merci pour ton aide ,j'apprécie .
Je viens de voir ton lien.
Comme je l'ai bien dis dans ma question , je veux vraiment un truc qui ressemble à ce qui est dans le site que j'ai donné , à savoir ,
http://www.clubic.com/shot-jeux-video-9576-0-bionic-commando.html .
Petite précision:je n'ai besoin que du système des image,l'onglet est déjà réalisé c'est bon .
Merci encore.
Je viens de voir ton lien.
Comme je l'ai bien dis dans ma question , je veux vraiment un truc qui ressemble à ce qui est dans le site que j'ai donné , à savoir ,
http://www.clubic.com/shot-jeux-video-9576-0-bionic-commando.html .
Petite précision:je n'ai besoin que du système des image,l'onglet est déjà réalisé c'est bon .
Merci encore.
Bonjour,
Et bien j'ai trouvé ceci: http://notreenvironnement.fr/vierge.php
Il faut placer dans le head
et ensuite, dans une div (par exemple):
Css de la div de l'exemple pour une grande image de 300X300:
Sinon, dans ce tuto, https://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html
Les 1 2 3...sont remplacées par des photos et la grande s'affiche en dessous
A bientôt!
Et bien j'ai trouvé ceci: http://notreenvironnement.fr/vierge.php
Il faut placer dans le head
<script type="text/javascript">
var current = 0;
var width = 4;
var max = 4;
var prefixe = "mini_";
function previous(nb) {
showWindow(false);
current = current - nb;
if (current < 0) {
current = 0;
}
showWindow(true);
}
function next(nb) {
showWindow(false);
current = current + nb;
if (current > (max - width)) {
current = max - width;
}
showWindow(true);
}
function showWindow(show) {
for(i = current ; i < current + width ; i++) {
el = document.getElementById(prefixe+i);
if (el) {
el.style.display = show?'inline':'none';
}
}
}
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
et ensuite, dans une div (par exemple):
<div id="apDiv1"><a id="mini_0" href="javascript:changeImage('liengrandeimage')"><img src="lienpetiteimage" align="left"></a>
<a id="mini_1" href="javascript:changeImage('liengrandeimage')"><img src="lienpetiteimage" align="left"></a>
<img src="Bilder/Portraits/grosse Bilder/maedchen1.jpg" name="mainimage" align="right"></div>
Css de la div de l'exemple pour une grande image de 300X300:
#apDiv1 {
position:relative;
left:0px;
top:0px;
width:700px;
z-index:2;
}
Sinon, dans ce tuto, https://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html
Les 1 2 3...sont remplacées par des photos et la grande s'affiche en dessous
A bientôt!
Bonjour , j'ai finalement opté pour le code suivant :
========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type="text/javascript">
var current = 0;
var width = 4;
var max = 4;
var prefixe = "mini_";
function previous(nb) {
showWindow(false);
current = current - nb;
if (current < 0) {
current = 0;
}
showWindow(true);
}
function next(nb) {
showWindow(false);
current = current + nb;
if (current > (max - width)) {
current = max - width;
}
showWindow(true);
}
function showWindow(show) {
for(i = current ; i < current + width ; i++) {
el = document.getElementById(prefixe+i);
if (el) {
el.style.display = show?'inline':'none';
}
}
}
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
<style>
#apDiv1 {
float:right;
position:relative;
left:0px;
top:0px;
width:130px;
height:325px;
z-index:2;
scrollbar-face-color: #006400;
scrollbar-shadow-color: #228b22;
scrollbar-highlight-color: #98fb98;
scrollbar-3dlight-color: #8fbc8b;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #eee8aa;
overflow-x: hidden; overflow-y: scroll;
}
</style>
<div id="conteneur" style="width:680px;">
<div id="grande" style="float:left; text-align:center; width:392px; margin-top:40px;">
<img src="Bilder/Portraits/grosse Bilder/maedchen1.jpg" name="mainimage" align="right"></div>
<div id="apDiv1">
<a id="mini_0" href="javascript:changeImage('http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_01.jpg')"><img src="http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_01.jpg" align="left" style="width:98px; height:120px;text-decoration:none; "></a>
<a id="mini_1" href="javascript:changeImage('http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_02.jpg')"><img src="http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_02.jpg" align="left" style="width:98px; height:120px;"></a>
<a id="mini_2" href="javascript:changeImage('http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_03.jpg')"><img src="http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_03.jpg" align="left" style="width:98px; height:120px;"></a>
</div>
</div>
</body>
</html>
========================================================
Malheureusement ,il reste encore incomplet pour ce que je veux faire.
Je m'explique:
Comme je l'ai déjà dit je crois , j'ai un dossier plein d'image qui sont nommées comme suite:
[Référence du produit]BR_NN.jpg
Où
Référence du produit: est la référence du produit que représente l'image;
BR: Commun à tout les produits.
NN: Numéro de l'image du produit (01,02,03,04,.........)
Le code actuel n'a pas moyen de compter le nombre d'images pour chaque référence et qu'il les affiche en miniature.(ce code comme vous le voyez affiche 3 miniature quoi qu'il soit).
Un autre soucis , quand je clique sur la miniature à droite ,l'image de grande taille s'affiche à gauche , mais moi je veux qu'on cliquant sur cette dernière elle m'affiche l'image en pop up plus grande.
J'espère que vous pourrez m'aider car ça fait un baille que je cherche et rien .
Merci d'avance.
========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script type="text/javascript">
var current = 0;
var width = 4;
var max = 4;
var prefixe = "mini_";
function previous(nb) {
showWindow(false);
current = current - nb;
if (current < 0) {
current = 0;
}
showWindow(true);
}
function next(nb) {
showWindow(false);
current = current + nb;
if (current > (max - width)) {
current = max - width;
}
showWindow(true);
}
function showWindow(show) {
for(i = current ; i < current + width ; i++) {
el = document.getElementById(prefixe+i);
if (el) {
el.style.display = show?'inline':'none';
}
}
}
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
<style>
#apDiv1 {
float:right;
position:relative;
left:0px;
top:0px;
width:130px;
height:325px;
z-index:2;
scrollbar-face-color: #006400;
scrollbar-shadow-color: #228b22;
scrollbar-highlight-color: #98fb98;
scrollbar-3dlight-color: #8fbc8b;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #eee8aa;
overflow-x: hidden; overflow-y: scroll;
}
</style>
<div id="conteneur" style="width:680px;">
<div id="grande" style="float:left; text-align:center; width:392px; margin-top:40px;">
<img src="Bilder/Portraits/grosse Bilder/maedchen1.jpg" name="mainimage" align="right"></div>
<div id="apDiv1">
<a id="mini_0" href="javascript:changeImage('http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_01.jpg')"><img src="http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_01.jpg" align="left" style="width:98px; height:120px;text-decoration:none; "></a>
<a id="mini_1" href="javascript:changeImage('http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_02.jpg')"><img src="http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_02.jpg" align="left" style="width:98px; height:120px;"></a>
<a id="mini_2" href="javascript:changeImage('http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_03.jpg')"><img src="http://localhost/webEBC/images/images_page_produit/produits/[ZH09]BR_03.jpg" align="left" style="width:98px; height:120px;"></a>
</div>
</div>
</body>
</html>
========================================================
Malheureusement ,il reste encore incomplet pour ce que je veux faire.
Je m'explique:
Comme je l'ai déjà dit je crois , j'ai un dossier plein d'image qui sont nommées comme suite:
[Référence du produit]BR_NN.jpg
Où
Référence du produit: est la référence du produit que représente l'image;
BR: Commun à tout les produits.
NN: Numéro de l'image du produit (01,02,03,04,.........)
Le code actuel n'a pas moyen de compter le nombre d'images pour chaque référence et qu'il les affiche en miniature.(ce code comme vous le voyez affiche 3 miniature quoi qu'il soit).
Un autre soucis , quand je clique sur la miniature à droite ,l'image de grande taille s'affiche à gauche , mais moi je veux qu'on cliquant sur cette dernière elle m'affiche l'image en pop up plus grande.
J'espère que vous pourrez m'aider car ça fait un baille que je cherche et rien .
Merci d'avance.
