Sujet Précédent Sujet Suivant

Image miniature vers grande taillle en clique

Fermé
bakkus Messages postés 80 Date d'inscription mardi 9 juin 2009 Statut Membre Dernière intervention 28 juin 2011 - 27 juil. 2009 à 12:01
bakkus Messages postés 80 Date d'inscription mardi 9 juin 2009 Statut Membre Dernière intervention 28 juin 2011 - 5 août 2009 à 15:48
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
A voir également:

4 réponses

Réponse 1 / 4
cedopolice Messages postés 146 Date d'inscription jeudi 20 mars 2008 Statut Membre Dernière intervention 15 février 2011 2
28 juil. 2009 à 02:27
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
0
Réponse 2 / 4
bakkus Messages postés 80 Date d'inscription mardi 9 juin 2009 Statut Membre Dernière intervention 28 juin 2011 1
28 juil. 2009 à 11:24
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.
0
Réponse 3 / 4
cedopolice Messages postés 146 Date d'inscription jeudi 20 mars 2008 Statut Membre Dernière intervention 15 février 2011 2
28 juil. 2009 à 16:12
Bonjour,
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!
0
bakkus Messages postés 80 Date d'inscription mardi 9 juin 2009 Statut Membre Dernière intervention 28 juin 2011 1
5 août 2009 à 15:48
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.
0
Réponse 4 / 4
bakkus Messages postés 80 Date d'inscription mardi 9 juin 2009 Statut Membre Dernière intervention 28 juin 2011 1
28 juil. 2009 à 16:34
Mille fois merci encore une fois .

ça ma l'aire intéressant , je vais de suite essayer ça .

je te tiens au courant .

à bientôt.
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
senda -

8 réponses
il est en cours de transport vers votre site de livraison
3rin -
Afrikarnak -

4 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses