JQuery set img src depending on where you click

Posted by Anna on Stack Overflow See other posts from Stack Overflow or by Anna
Published on 2010-05-13T23:52:26Z Indexed on 2010/05/13 23:54 UTC
Read the original article Hit count: 284

Filed under:
|
|

Hello !

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 :

<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>

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

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 !

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript