Modification Tuto : Une galerie d'images simple avec jQuery

Bonjour à tous,

Je remercie en premier lieu tous les participants de ce forum et également toutes les personnes qui contribue à réaliser des Tutos.

Voici mon problème :
J'ai suivi le tuto suivant : Une galerie d'images simple avec jQuery afin de réaliser une galerie d'image

et je souhaite y apporter une petite modification, je souhaiterais récupérer la valeur 'href' de la photo en cours de sélection afin de remplir l'attribut value d'un champ input.

J'ai donc essayer de modifier le fichier JS afin d'utiliser jQuery pour le faire mais toutes mes tentatives n'ont pas fonctionnées.

Je me suis donc résolu à utiliser du bon vieux JS comme suit sur chaque élément <a> :

<script type="text/javascript">
	function remplirInput(id,txt) {
	  document.getElementById(id).value = txt;
	}
</script>	

<a onclick="remplirInput('id_input',this.href);\" href=''></a>

Ce code fonctionne mais cela ne rempli pas mon input lors du chargement de la galerie car la première image sélectionnée n'a pas été cliqué.

Je me doute bien que cela doit être possible directement avec jquery dans le code de la galerie mais je n'ai pas réussi à faire en sorte que mon input soit automatiquement rempli.

Voici ce que j'ai compris, il faut modifier 2 chose, la première la fonction qui mets en surbrillance la première image :

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

Puis modifier la fonction qui permet lors du click d'une miniature de charger la grande photo

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

Dans cette fonction la variable target contient la valeur que je souhaite placée dans mon input

Je remercie touts les personnes qui prendront le temps de me lire et éventuellement de me répondre, je précise que je ne cherche pas un code tout fait je suis dans une démarche d'apprentissage et souhaite donc comprendre pour apprendre.
Modifié par Grinvald (25 Jan 2012 - 18:15)

Re-bonjour,

Après une journée complète de lecture et de test sur jQuery, j'ai enfin réussi à faire ce que je veux.

J'ai ajouter ces lignes dans mon script js :

var PhotoName = firstThumbLink.attr("href");
$('#nom_photo').attr('value', PhotoName);

Ces lignes me permettent de récupérer l'attribut href du premier élément chargé de la galerie et ensuite de placer la valeur récupérée dans l'attribut value de mon input dont l'id est : nom_photo.


Ensuite pour que l'attribut value de mon input change lorsqu'un utilisateur clique sur une autre photo, j'ai modifié la fonction suivante comme suit :

thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this = $(this),
          target = $this.attr("href");
		 [b] $('#nom_photo').attr('value', target);[/b]
      if (bigPic.attr("src") == target) return;
      highlight($this);
      imgViewer.html(loader);
      bigPic
        .load(function(){
          imgViewer.html($(this).fadeIn(250));
        })
        .attr("src",target);
    });

A présent cela fonctionne, maintenant je me demande si ce j'ai fais est optimum, un spécialiste pourrait-il me répondre ?

Merci.
Modifié par Grinvald (25 Jan 2012 - 18:32)