18041 sujets

Questions générales et questions de débutants

[Résolu!]Galerie avec jquery

Bonjour j'ai crée une galerie avec jquery en suivant les étapes mais, je n'obtient pas le carré visible en dessous des petites icones( voir http://polo-web.servhome.org/)
Voici mon code java:

jQuery(function($){ 
 
  var settings = { 
    thumbListId: "thumbs", 
    imgViewerId: "viewer", 
    activeClass: "active", 
    activeTitle: "Photo en cours de visualisation", 
    loaderTitle: "Chargement en cours", 
    loaderImage: "images/loader.gif" 
  }; 
 
  var thumbLinks = $("#"+settings.thumbListId).find("a"), 
    firstThumbLink = thumbLinks.eq(0), 
    highlight = function(elt){ 
      thumbLinks.removeClass(settings.activeClass).removeAttr("title"); 
      elt.addClass(settings.activeClass).attr("title",settings.activeTitle); 
    }, 
    loader = $(document.createElement("img")).attr({ 
      alt: settings.loaderTitle, 
      title: settings.loaderTitle, 
      src: settings.loaderImage 
    }); 
 
  highlight(firstThumbLink); 
 
  $("#"+settings.thumbListId).after( 
    $(document.createElement("p")) 
      .attr("id",settings.imgViewerId) 
      .append( 
        $(document.createElement("img")).attr({ 
          alt: "", 
          src: firstThumbLink.attr("href") 
        }) 
      ) 
  ); 
 
  var imgViewer = $("#"+settings.imgViewerId), 
    bigPic = imgViewer.children("img"); 
 
  thumbLinks 
    .click(function(e){ 
      e.preventDefault(); 
      var $this = $(this), 
        target = $this.attr("href"); 
      if (bigPic.attr("src") == target) return; 
      highlight($this); 
      imgViewer.html(loader); 
      bigPic 
        .load(function(){ 
          imgViewer.html($(this).fadeIn(250)); 
        }) 
        .attr("src",target); 
    }); 
 
});

Et mon code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Polo-WeB</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="css.css" />
	   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	   <script src="gallery.js" type="text/javascript"></script>
   </head>
   <body>
     <ul id="thumbs"> 
  <li> 
    <a href="images/big/signa_war.png"> 
      <img alt="Signature War by Ekoi" 
        src="images/small/s_wars.png" /> 
    </a> 
  </li> 
  <li> 
    <a href="images/big/legend_a.jpg"> 
      <img alt="Signature Legend war by Ekoi" 
        src="images/small/s_legends.png" /> 
    </a> 
  </li>
  <li> 
    <a href="images/big/a_legend.png"> 
      <img alt="Avatar legend by Ekoi" 
        src="images/small/a_legends.png" /> 
    </a> 
  </li>   
  <li> 
    <a href="images/big/obito_signature.png"> 
      <img alt="Signature obito uchiwa by Ekoi" 
        src="images/small/s_obitos.png" /> 
    </a> 
  </li> 
  <li> 
    <a href="images/big/obito_avatar.png"> 
      <img alt="Avatar obito uchiwa by Ekoi" 
        src="images/small/a_obitos.png" /> 
    </a> 
  </li> 
</ul>


   </body>
</html>

Merci !
Modifié par Ekoi (17 Jan 2010 - 13:43)
Merci, mais tu pourrais me dire qu'elle son ces deux lignes codé en html dans mon javascript s'il te plaît ? (je précise que j'ai fais un copier coller pour le java je l'ai analyser mais je ne trouve pas d'html dedans)
Sujet clos
Aller à