JQuery install img src depending on where you click

Question

I used javascript to upload the image to my site, depending on which "small" photos you selected in ul ... I had something like this:

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

and in html just: things like this:

 <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 that you can see, depending on what small photos in the unordered list you clicked, upload some specific photos by passing the src line in the argument of my viewImage function ...

but I decided to use jQuery to get a gradual decrease effect. But I can't find a way to pass an argument that will tell my jQuery function which photo to upload 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 11.jpg to be hardcoded, I need to pass it through an argument when I click on the special li element in my ul id #ulPhotos element ...

I hope I'm so sorry!

Answer 1

karim79 gives the correct solution, but does not really explain your problem.

You attach the click handler to the list itself, and not directly to the images. When the associated jQuery behavior callback fires, this is the element that was clicked that you want to be the links surrounding the images. In your current case, this will be the list itself.

You do not have to add the class to the thumbnails. $('#ulPhotos a') will deliver them to you just as easily. I agree with the suggestion to use the data- attribute on the click button to find out how large the image you want to show.

Also, if you add secondary click behavior to the a elements, you probably want to prevent the default behavior, so something like:

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

Answer 2

A fairly simple solution would be to assign a common (large or any) class to all small images and save the larger file name in its rel attributes, for example:

 <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 can consider.

It is also quite common (and simple) to follow a specific convention and “collect” the file name of a larger src-based image with a smaller click, 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")); }); 

It is assumed that all your full-sized images have the prefix "big_", so just add "big_" to the src of the thumbnail clicked.

Answer 3

thanks to you, my site works, I give the final code for beginners like me, who may have the same needs ...

here is 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 add legends in order to be able to add some html tags, such as because the title appears when you hover over thumbnails, and I did not want people to see strange tags for them ...

sometimes, it’s a little slow, when you click very quickly, it may stay on the previous photo for a while from the first time, perhaps because I did not use the CDN to put the mini version of jquery (I read such a tip), I don’t know I'm really a beginner, but it's nothing serious anyway ...

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