JQuery set img src depending on where you click

I used javascript for loading a picture on my website depending on which "small" photos in ul you clicked... I had something like that :

<script type="text/javascript">
   function viewImage(src, legende) {
      document.getElementById("imageBig").src = "images/photos/"+src;
      document.getElementById("legend").innerHTML = legende;
   }
 </script>

and in html simply : things like that :

<ul id="ulPhotos">
<li>
   <a href="#centre" onclick="javascript:viewImage('flute.jpg','La Reine de la Nuit au Comedia')">
      <img src="images/photos/carre-09.jpg" alt="" />
   </a>
   <a href="#centre" onclick="javascr开发者_如何学运维ipt:viewImage('perichole.jpg','Manuelita - <em>La P&eacute;richole</em> &agrave; l&#8217;Op&eacute;ra Comique')">
      <img src="images/photos/carre-03.jpg" alt="" />
   </a>
</li>
<li>
    <a href="#centre" onclick="javascript:viewImage('12.png','R&eacute;cital &agrave; Carnac, septembre 2008')">
        <img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac R&eacute;" />
    </a>
    <a href="#centre" onclick="javascript:viewImage('01.jpg','')">
        <img src="images/photos/carre-01.jpg" alt="" />
    </a>
</li>
</ul>

so you see, I could, depending on which small photos in the unordered list you clicked, load some particular photos, by passing the src string in argument to my viewImage function...

but I decided to use Jquery to get some fade-in effect. But I can't find a way to pass an argument that would tell my JQuery function which photo to load depending on where I clicked...

stuck here :

$(document).ready(function(){
    $('#ulPhotos').click(function() {
        var newSrc = $('#imageBig').attr("src", "images/photos/11.jpg");
    }); 
});

I don't want the 11.jpg to be hardcoded, I need to pass it through argument when I click on a special li element in my ul element of id #ulPhotos...

I hope I'm clear enough sorry !

---

karim79 gives a correct solution, but doesn't actually explain your problem.

You are attaching the click handler to the list itself instead of directly to the images. When an attached jQuery behavior callback fires, this is the element that was clicked, which you want to be the a links surrounding the images. In your current case this will be the list itself.

You don't necessarily need to add a class to the thumbnails. $('#ulPhotos a') will get you to them just as easily. I do agree with the suggestion to use a data- attribute on the clickable to know which large image you want to show.

In addition, if you are going to add secondary click behavior to the a elements, you probably want to prevent the default behavior from happening, so something like:

$('#ulPhotos a').click(function (event) {
  $('#imageBig').attr('src', $(this).attr('data-big-image'));
  event.preventDefault();
});

---

A pretty straightforward solution would be to assign a common (thumb or whatever) class to all the small images, and store the filename of the bigger images within their rel attributes, e.g.:

<img src="something.jpg" rel="something_big.jpg" class="thumb"/>
<img src="somethingElse.jpg" rel="somethingElse_big.jpg" class="thumb"/>
<img id="bigImage" src="something_big.jpg"/>

$(".thumb").click(function() {
    $("#bigImage").attr('src', $(this).attr("rel"));
});

data is another storage mechanism you might consider.

It is also quite common (and simple) to follow a particular convention and 'assemble' the filename of the larger image based on the src of the clicked smaller one, for example:

<img src="something.jpg" class="thumb"/>
<img src="somethingElse.jpg" class="thumb"/>
<img id="bigImage" src="big_something.jpg"/>

$(".thumb").click(function() {
    $("#bigImage").attr('src', 'big_' + $(this).attr("src"));
});

That assumes that all of your full-sized images are prefixed with 'big_', so it's a simple matter of appending 'big_' to the src of the clicked thumbnail.

---

thanks to both of you, my website is working, I give the final code for beginners like me who could have the same needs...

here's the function :

<script type="text/javascript">
     $(document).ready(function(){

$('#ulPhotos a').click(function() {
    var newSrc= $(this).find('img').attr('src').split("/");
    bigPictureName = 'big'+newSrc[2];
    $('#imageBig').attr("src", "images/photos/"+bigPictureName).hide();
    $('#imageBig').fadeIn('fast');

    var alt = $(this).find('img').attr('alt'); 
    $('#legend').html(alt);
    }); 
    });

</script>

here are the html elements :

 <ul id="ulPhotos">
      <li><a href="#centre"><img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="<em>La Reine de la Nuit</em> au Comedia"/></a>
    <a href="#centre"><img src="images/photos/03.jpg" title="Manuelita, La Périchole à l&rsquo;Opéra Comique" alt="Manuelita, <em>La Périchole</em> à l&#8217;Opéra Comique" /></a></li>
    <li><a href="#centre" ><img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /></a>

I used the alt attribute to append the legends so as to be able to add some html tags like <em > because the title appears when you hover your mouse on the thumbnails, and I didn't want people to see strange tags for them...

sometimes, it's a little slow when you click very fast it can stay on the previous photo for a little while at first try, maybe because I didn't use a CDN to put the minified version of jquery (I read such an advice), don't know, I'm truly a beginner, but it's nothing serious anyway...

by the way, the page is here..http://www.marion-baglan.net/photos.htm