[Résolu] Selectionner un diaporama avec une liste déroulante en jquery

Bonjour, j'ai réaliser ce tuto avec succès : http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html

Maintenant ce que je veux faire c'est ajouter une liste déroulante pour aller sur une autre galerie (par exemple la galerie d'images des chats dans l'exemple) !

Merci de m'aiguiller par rapport à mon code :

diaporama.html

<style>
img {vertical-align:middle; border:none;}
#thumbs {overflow:auto; list-style:none; padding:0;}
#thumbs li {float:left;}
#thumbs a {display:block; padding:5px; outline:none;}
#thumbs a:hover, #thumbs a:focus {background:#fff;}
#thumbs a.active {background:#DCDCDC;}
#viewer {position:relative;}
#viewer img[src*="loader"] {position:absolute; left:50%; top:50%;}
</style>

      <div>
        <label for="choix">Choix</label>
          <select id="choix">
            <option value="choixchien">diapo chiens</option>
            <option value="choixchat">diapo chats</option>
          </select>
      </div>
<br />
<div id="controles">
  <div id="diapochien">
    <ul id="thumbs">
      <li>
        <a href="images/chien1.png" title="Début">chien1</a>
      </li> 
      <li>
        <a href="images/chien2.png">chien2</a>    
      </li>
      <li>
        <a href="images/chien3.png">chien3</a>
      </li>
      <li>
        <a href="images/chien4.png">chien4</a>
      </li>
    </ul>
  </div>

  <div id="diapochat">
    <ul id="thumbs">
      <li>
        <a href="images/chat1.png" title="Début">chat1</a>
      </li> 
      <li>
        <a href="images/chat2.png">chat2</a>    
      </li>
      <li>
        <a href="images/chat3.png">chat3</a>
      </li>
      <li>
        <a href="images/chat4.png">chat4</a>
      </li>
    </ul>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="gallery.js" type="text/javascript"></script>
<script>
  $(function() {
    $('#choix').change(function() {
      var te = $('#choix option:selected').val();
      if (te == 'choixchien') $('#diapochien').text();
      if (te == 'choixchat') $('#diapochat').text();
  }
});

</script>

gallery.js

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);
    });

});

Bien sur ma page diaporama.html est juste une ébauche vu que je sais pas aller plus loin.
Ma liste déroulante ne fonctionne pas!
Merci
Modifié par woubi (21 Jun 2014 - 15:59)

J'ai trouvé avec ajax !
Merci