[javascript|jquery] affichage dynamique d'une image ds un div

affichage dynamique d'une image ds un div [javascript|jquery] - HTML/CSS - Programmation

Marsh Posté le 30-05-2009 à 16:38:04    

bonjour à tous j'ai un problème de jquery à vous soumettre:
 
 
j'aimerai créer une fonction qui fasse apparaitre un div (caché avec display: none;) avec un effet de fading
 
je passe un paramètre à la fonction qui est le nom d'une l'image à afficher dans ce div, idéalement elle aussi devrait apparaitre progressivement.
 
je bute sur l'affichage de l'image à l'intérieur du div :bounce:  
 
 
en ligne http://www.jeremieparmentier.com/test/test_jquery.html
 
mon code est le suivant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html>
  <head>
     
 <style type="text/css">
 <!--
#divdisplay{
background-color: #39c;
width:300px;
height:200px;
 
}
#divdisplay2{
display: none;
background-color: #39c;
width:300px;
height:200px;
 
}
-->
 </style>
 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
 
 
 
function afficher2(image){
$('#divdisplay2').fadeIn();
$('#div_display2').html('<img src="' + image + '" >');
 
 
}
 
 
</script>
 
 
<title>test jquery</title>
   
  </head>
  <body>
 <div id ="global">
 
 <div id ="divdisplay2" >rien non plus<img src=""/></div>
 <a href="#" onclick="afficher2('image.jpg')">test </a>
 
 </div></body></html>
 
 
merci

Reply

Marsh Posté le 30-05-2009 à 16:38:04   

Reply

Marsh Posté le 30-05-2009 à 18:23:48    

tu devrais inverser l'appel à html() et à fadeIn() ;)
EDIT : par contre je ne comprends pas pourquoi l'image ne s'affiche pas :??:


Message édité par Profil supprimé le 30-05-2009 à 18:25:19
Reply

Marsh Posté le 30-05-2009 à 18:27:53    

Ah j'ai compris, voici la correction :

Code :
  1. function afficher2(image){
  2.    $('#div_display2').html('<img src="' + image + '" >'); // tu avais oublié le "_"
  3. dans le nom de la div
  4.    $('#div_display2').fadeIn(); // Inversion du html et du fadeIn
  5. }

Reply

Marsh Posté le 30-05-2009 à 22:26:28    

merci ça marche! mais du coup j'ai voulu passer à la vitesse supérieur
et intégrer cet effet de fading à un "carrousel" crée à partir de http://www.ajaxdaddy.com/demo-ajax-carousel.html qui comprend prototype.js (version1.5) effets.js et caroussel.js
et il semblerait qu'il y ait incompatibilité ?
 
http://www.jeremieparmentier.com/t [...] usel2.html
 
peut être luc@s aurais tu une idée?

Reply

Marsh Posté le 31-05-2009 à 16:43:30    

Non je n'ai pas vraiment d'idée, mais fait une recherche avec ces termes :
http://www.google.fr/search?q=jque [...] =firefox-a
Et peut-être trouveras-tu...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed