Bonsoir a toutes et tous,

voila mon soucis,

j'ai un script générer en php qui va rechercher des image ds une base de donnée.
chaque image miniature a ca grandi image.
j'aimerais que quand je clic sur une des miniature, un div s'ouvre avec ca la grande image correspndante et avec un petit effet fadeIn fadeOut avec le click.

mon gros soucis est que je ne connais pas encore asse jquery pour pouvoir le faire et que je dois remttre ce job pour demain soir.

alors amis du jquery j'ai besoins de vous aidez moi encore une fois svp.

Voici le script generer

<div>
<div style="float:left;" class="imgMini">
	<img class="imgMini" onclick="document.getElementById('big_23_g.jpg').style.display='block';" src="images/galerie/mini/23_g.jpg" alt="imgMini" />
</div>
<div style="float:left;" class="imgMini">
	<img class="imgMini" onclick="document.getElementById('big_24_g.jpg').style.display='block';" src="images/galerie/mini/24_g.jpg" alt="imgMini" />
</div>
<div style="float:left;" class="imgMini">
	<img class="imgMini" onclick="document.getElementById('big_25_g.jpg').style.display='block';" src="images/galerie/mini/25_g.jpg" alt="imgMini" />
</div>
<div style="float:left;" class="imgMini">
	<img class="imgMini" onclick="document.getElementById('big_30_g.jpg').style.display='block';" src="images/galerie/mini/30_g.jpg" alt="imgMini" />

</div>
<div style="float:left;" class="imgMini">
	<img class="imgMini" onclick="document.getElementById('big_pic03.jpg').style.display='block';" src="images/galerie/mini/pic03.jpg" alt="imgMini" />
</div>
<div style="float:left;" class="imgMini">
	<img class="imgMini" onclick="document.getElementById('big_pic09.jpg').style.display='block';" src="images/galerie/mini/pic09.jpg" alt="imgMini" />
</div>

</div>

</div>
		</div>
		
		<img src="images/005/bg/538.jpg" id="img1" class="fadeImg" style="z-index: 0;" width="838" height="533" alt="" title="" />

		<img src="images/005/bg/538.jpg" id="img2" class="fadeImg" style="z-index: 1;" width="838" height="533" alt="" title="" />
        
        
	</div>
    
    
        	<div id="big_23_g.jpg" style=" display:none; border: 1px solid red; position:absolute;" class="imgBig">
    		<img src="images/galerie/big/23_g.jpg" alt="imgBig" />
        </div>    
        	<div id="big_24_g.jpg" style=" display:none; border: 1px solid red; position:absolute;" class="imgBig">
    		<img src="images/galerie/big/24_g.jpg" alt="imgBig" />
        </div>    
        	<div id="big_25_g.jpg" style=" display:none; border: 1px solid red; position:absolute;" class="imgBig">
    		<img src="images/galerie/big/25_g.jpg" alt="imgBig" />

        </div>    
        	<div id="big_30_g.jpg" style=" display:none; border: 1px solid red; position:absolute;" class="imgBig">
    		<img src="images/galerie/big/30_g.jpg" alt="imgBig" />
        </div>    
        	<div id="big_pic03.jpg" style=" display:none; border: 1px solid red; position:absolute;" class="imgBig">
    		<img src="images/galerie/big/pic03.jpg" alt="imgBig" />
        </div>    
        	<div id="big_pic09.jpg" style=" display:none; border: 1px solid red; position:absolute;" class="imgBig">
    		<img src="images/galerie/big/pic09.jpg" alt="imgBig" />
        </div>

et voici celui en php

<div>
<?php

$sqlMini = "SELECT * FROM img";
$queryMini = mysql_query($sqlMini);
while($repMini = mysql_fetch_array($queryMini)){
?>
<div style="float:left;" class="imgMini">
	<img class="imgMini" onclick="document.getElementById('big_<?php echo $repMini['mini']; ?>').style.display='block';" src="images/galerie/mini/<?php echo $repMini['mini']; ?>" alt="imgMini" />
</div>
<?php
}
?>

</div>

</div>
		</div>
		
		<img src="images/005/bg/538.jpg" id="img1" class="fadeImg" style="z-index: 0;" width="838" height="533" alt="" title="" />
		<img src="images/005/bg/<?php echo $fondPhoto; ?>.jpg" id="img2" class="fadeImg" style="z-index: 1;" width="838" height="533" alt="" title="" />
        
        <?php $_SESSION['fondPhoto'] = 538; ?>

	</div>
    
    
    <?php
	$sqlBig = "SELECT * FROM img";
	$queryBig = mysql_query($sqlBig);
	while($repBig = mysql_fetch_array($queryBig)){
	?>
    	<div id="big_<?php echo $repBig['big']; ?>" style=" display:none; border: 1px solid red; position:absolute;" class="imgBig">
    		<img src="images/galerie/big/<?php echo $repBig['big']; ?>" alt="imgBig" />
        </div>    
    <?php
	}
	?>

Merci a vs

Gabi

Je ne suis pas très fort en JS maus juste un petit truc si tu inclus jQuery autant t'en servir (remplacer ça 'document.getElementById' par sa'$('#')' par exemple). Ensuite pour le problème je sais pas si display : block; existe essaye avec style.display=''; sans rien comme valeur dans le display.

Bonsoir,

avoir un dossier images contenant les miniatures & les images taille réelle ne sert à rien. Il suffit de créer une taille fixe à tes images dans un block(genre 80x80), puis lorsque tu cliques, tu enlèves cette limite.

De plus, vu tes multiples questions, tu utilises une librairie que tu ne sembles pas maitriser. Réfère toi aux différents tutos sur le net.

salut,
en fait le truc c'est qu'il faut que quand le clic sur la vignette, qu'il fasse apparaitre l'image correspondante agrandie qui se trouve ds une dic caché.
si je reclic sur une autre vignette celle que j'ai ouverte doit se fermer et la nouvelle s'ouvre ainsi de suite. je voudrai le fair en jquery mais je n'arrive pas a recuperer les div correspondante.

et style.display = 'block' existe mais c du js
c'est juste un test ca, faut que je le transforme en jquery

Tu lirais des cours sur jQuery, tu saurais résoudre ton problème

Effectivement si je maitrisait jQuery je poserais pas c'est questions
Le prob c'est que je dois terminer se job pour demain soir et que c'est pas en une journée que je vais apprendre jquery
comme je l'ai dis avant jquery m'intersse fortement je v l'etudier mais faut absolument que je remettre se boulot demain, sinon pas de sous sous

comme on dis, une chose a la fois j'ai d'abord appris php ensuite le reste.

Bonne soirée

La gestion du CSS avec jQuery, c'est pas ce qu'il manque sur le net ..

Oulah, je sens la grosse embrouille... On va essayer de te dépatouiller.

Déjà t'as pas besoin de JQuery pour faire ça. Donc ne te prends pas la tête avec. Le problème de JQuery quand on débute c'est qu'on ne peut pas utiliser de JS conventionnel : il faut tout faire "en JQery", ce qui forcément demande un temps d'adaptation.

Tu peux créer un div en DOM de cette manière :

// je crée un div que j'appelle zoom.
// zoom est une variable que je peux utiliser uniquement en JS
// le div est créé mais pas encore ajouté au HTML
var zoom = document.createElement('div');

// je lui donne un id pour pouvoir le styler en CSS
zoom.id="zoom";

// je crée une image
var image_zoom = document.createElement("img");

// je lui donne des attributs
image_zomm.src="lien_image.jpg";
image_zoom.alt="photo agrandie";
image_zoom.id="image_zoom";

//je glisse mon image dans mon div
zoom.appendChild(image_zoom);

//je glisse mon div dans mon document
docment.body.appendChild(zoom);

Tel que j'ai imaginé le truc, tu as juste créé un bloc avec une image dedans, et quelque soit la miniature sur laquelle tu cliques, tu feras apparaître le même bloc. La différence c'est l'adresse de l'image qui sera contenue dedans.

En CSS : positionne ton div Zoom au premier plan avec z-index, centré en le positionnant en absolute, etc. (ou pas, je ne sais pas ce que tu veux faire), et place ton image comme tu veux dedans avec des marges ou j'en sais rein. Ils ont l'id #zoom et #image_zoom si tu as bien lu ce qui précède.
En JS :je te laisse écrire tes événements etc. mais je vais quand même te donner de la matière. Tu devras prévoir par exemple un argument dans ta fonction de lancement qui contiendra l'adresse de l'image à charger et que tu écriras en PHP.

Petit problème à régler : le temps de chargement : si une image met du temps à charger et que tu fais ton effet de fondu, le bloc va s'afficher progressivement mais on ne verra pas tout de suite l'image... Soit tu charges toutes les images d'un coup. Soit tu les charges au fur et à mesure que tu les affiches. Si tu optes pour la seconde solution, il faut attendre que le chargement soit terminé avant de faire apparaître le div.

// on précharge une image
var img = new Image();
img.src="lien de l'image à charger";

// une fonction qui s'exécute seulement quand l'image a fini de charger
img.onload=function(){
   // on charge l'image dans le HTML
   zoom_image.src="le même lien que plus haut";
   // tu affiches ton div ici
   code code code
}

Les animations : j'utilise des fonctions que je me suis faites et qui fonctionnent un peu comme JQuery, sauf que ça reste du JS basique sans objets ou autre. Il suffit de les copier.

function fadeIn(args, callback){
	  if(typeof args.fadeTo=="undefined"){args.fadeTo=100;}
	  if(typeof args.speed=="undefined"){args.speed=10;}
	  var element; if(typeof args.element=="undefined"){element=args;}else{element=args.element;}
	  var speed=args.speed, fadeTo=args.fadeTo;
	  var i=0, j;
	  element.style.filter = "alpha(opacity="+i+")";
	  element.style.display="block";
	  var timer = setInterval(function() {
		if(i<fadeTo){
		  i+=speed; j = i*0.01;
		  element.style.opacity = j;
		  element.style.MozOpacity = j;
		  element.style.KhtmlOpacity = j;
		  element.style.filter = "alpha(opacity="+i+")";
		}else{
			clearInterval(timer); if(fadeTo===100){element.style.filter="none";} if(typeof callback!="undefined"){callback();}}
	  }, 50);
	}

	function fadeOut(args, callback){
	  var i, j;
	  if(typeof args.fadeFrom=="undefined"){i=100;}else{i=args.fadeFrom;}
	  if(typeof args.speed=="undefined"){args.speed=10;}
	  var element; if(typeof args.element=="undefined"){element=args;}else{element=args.element;}
	  var speed=args.speed,
	  timer = setInterval(function() {
		if(i>0){
		  i+=-speed; j = i*0.01;
		  element.style.opacity = j;
		  element.style.MozOpacity = j;
		  element.style.KhtmlOpacity = j;
		  element.style.filter = "alpha(opacity="+i+")";
		}else{
			clearInterval(timer); element.style.filter="none"; element.style.display="none"; if(typeof callback!="undefined"){callback();}}
	  }, 50);
	}

Ce que font ces fonctions...
fadeIn() : passe l'attribut display à block et monte progressivement l'opacité à 100%. il faut que l'opacité soit à 0% avant de l'utiliser si non forcément ça va clignoter.
fadeOut() : diminue progressivement l'opacité jusqu'à 0%, puis passe la propriété display à none.

Elles s'utilisent simplement : fadeIn(zoom); fait apparaître l'élément. fadeOut(zoom); le fait disparaître.

La fonction ne prend pas des id mais des éléments. Si tu veux utiliser un id tu dois écrire fadeIn(document.getElementById("zoom")); C'est une restriction que je m'impose pour me forcer à stocker ce genre de choses dans une variable.

donc si on reprend le script d'avant

var img = new Image();
img.src="lien de l'image à charger";

   img.onload=function(){
   zoom_image.src="le même lien que plus haut";
   fadeIn(zoom);
}

Un truc bien c'est qu'on peut utiliser une fonction en paramètre qui s'exécute à la fin de l'animation. Soit une fonction tout court : fadeIn(elemen, fonction); soit une chaîne d'instructions dans une fonction anonyme :

fadeIn(zoom, function(){ // ce qui suit s'exécute après l'apparition
   alert("truc");
});

à la fin de ton fadeIn ton script lancera une alerte.

Donc tu peux prévoir le cas où tu auras besoin de cacher ton image et d'en faire apparaître une autre juste derrière.

// on commence par faire disparaître zoom
fadeOut(zoom, function(){
   // on précharge, comme d'habitude et on affiche
   var img = new Image();
   img.src="lien de l'image à charger";

   img.onload=function(){
      zoom_image.src="le même lien que plus haut";
      fadeIn(zoom);
   };
})

Voilà. Je ne vai spas prendre plus de temps là dessus. Moi aussi j'ai du taff. Mais j'ai déjà été dans ton cas il y a deux ou trois ans j'espère juste que mes explications sont à ton niveau parce que si non ça pourrait s'avérer frustrant.

Je tien a te remercier enormément pour le temps que tu a pris a m'expliqué.

je vais lire cela a mon aise se metain et je te tiens au courant

Encore un grd merci a toi