несколько onclicks для одной функции

Question

Я пытаюсь написать страницу фотогалереи, где есть маленькие значки фотографий внизу, и когда вы нажимаете на них, они увеличиваются в главном экране. только у меня возникают проблемы с попыткой заставить javascript делать то, что я хочу. Кто-нибудь может мне помочь?

вот мой код до сих пор:

<?php 
       $host = "localhost"; 
       $user = "root"; 
       $pwd = ""; 
       $db_name = "gallery"; 

       mysql_connect($host, $user, $pwd)or die("cannot connect"); 
       mysql_select_db($db_name)or die("cannot select DB"); 


       $sql = mysql_query("SELECT * FROM foto ORDER BY id DESC LIMIT 10"); 
       $id = 'id'; 
       $foto = 'foto'; 


       while ($rows = mysql_fetch_assoc($sql)) 
       { 
        echo "<img class='littleshow'"."id='foto".$rows[$id]."'src='".$rows[$foto]."' onclick='Bigscreen(foto".$rows[$id].")'></img>"; 
       } //the onclick generates onclick="bigscreen(foto1)" and does this again 4 times on the other objects generating foto1,foto2,foto3,foto4 
       ?> 
       <div id='bigshowcase'></div> 

и мой Javascript до сих пор:

function Bigscreen() {  
     var div0 = document.getElementById('bigshowcase'); 

     var images = new array(); 
     images[0] = div0.style.backgroundImage = "url(pic/camera.jpg)"; 
     images[1] = div0.style.backgroundImage = "url(pic/dsc_4255.jpg)"; 
     images[2] = div0.style.backgroundImage = "url(pic/dsc_4373.jpg)"; 
     images[3] = div0.style.backgroundImage = "url(pic/dsc01209.jpg)"; 

     foto1 = images[0] 
     foto2 = images[1] 
     foto3 = images[2] 
     foto4 = images[3] 
} 

Я очень мало знаю о JavaScript поэтому большинство это, вероятно, неправильно. спасибо за помощь :)

Answer 1

заменить эту строку:

echo "<img class='littleshow'"."id='foto".$rows[$id]."'src='".$rows[$foto]."' onclick='Bigscreen(foto".$rows[$id].")'></img>"; 

с этим:

echo "<img class='littleshow'"."id='foto".$rows[$id]."'src='".$rows[$foto]."' onclick='Bigscreen(this)'></img>"; 

и изменить Bigscreen функцию:

function Bigscreen(img) { 
    document.getElementById('bigshowcase').innerHTML ='<img src="' + img.src + '" />'; 
} 

CSS:

<style type="text/css"> 
#bigshowcase img{max-width:600px;max-height:600px;} 
</style> 

надежды, что помогает.

EDIT:

обратите внимание, что Jquery всегда лучше:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 
    $(document).on('click', 'img.littleshow', function(){ 
     $('#bigshowcase').html('<img src="' + $(this).attr('src') + '" />'); 
    }); 
}); 
</script> 

будет делать эту работу.

Answer 2

Вы можете поместить элемент, который вы щелкнули в качестве переменной функции:

<img id="mainPic"> 
<img id="thumbImage" src="<url>" onclick="SetPic(this)"> 



var mainPic = document.getElementById("mainPic"); 

function SetPic(thumbPic) 
{ 
    mainPic.src = thumbPic.src; 
}