JQuery set img src depending on where you click

Question

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="javascript: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 !

Answer 1

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

Answer 2

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.