JQuery set img src depending on where you click
- by Anna
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érichole</em> à l’Opéra Comique')"><img src="images/photos/carre-03.jpg" alt="" /></a></li>
<li><a href="#centre" onclick="javascript:viewImage('12.png','Récital à Carnac, septembre 2008')"><img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac Ré" /></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 !
