How to display clicked image in lightbox?

Question

PHP

Hello.

I ran into the problem of displaying the clicked image in the lightbox, more precisely, I don’t even know how it should be, that is, I wrote the code to check, but it only shows me the last one, which I uploaded to the server.
Below I will give you the code, it is without comments, and it is so clear what it does.

// HTML and PHP code (displaying images from the gallery)

<p class="photos_header">Загруженные фотографии</p>
<div id="uploaded_imgs">			
<?
<code lang="php">
  $avasQuery = "SELECT * FROM photos WHERE uploader='$user' AND type='p'";
  $res = $database->query($avasQuery);
  $n = mysql_num_rows($res);
  for($x = 0; $x < $n; $x++)
  {
    $img = mysql_fetch_array($res);
?>
</code>
               <a class="img_show"><img src="imgs/photos/<? echo $user; ?>/<? echo $img['photo_filename']; ?>"></a>
<?
       }
?>		
</div>

//the LightBox block itself, in which I want to display the clicked image

<div id="selected_img">
  <img src="imgs/photos/<? echo $user; ?>/<? echo $img['photo_filename']; ?>">
</div>

// well, the js/jquery code itself (but it's true... effects)

$(".img_show").click(function()
{
  $("#photos").hide();
  modalFone(); // на это не обращайте внимание, здесь хранится стиль самого "модального окна" (тоесть opacity: 0.6 и тому подобное) 
  $("#black_fone").show();
  $("#selected_img").show();
  $("#black_fone").click(function()
  {
    $("#selected_img").hide();
    $("#photos").show();
    $("#black_fone").show();
  });				
);

I looked for a lot of materials in search engines, as well as looked at youtube.com - nothing helped, otherwise I would not have registered here.
Thanks in advance.

Answer 1

What prevents you from using third-party scripts that will work?
www.lokeshdhakar.com/projects/lightbox2 for example?
I once wrote for myself, look at this shit coder :D, maybe you can draw something, he wrote when he was a fool himself, but all the same it works)))

$(document).ready(function(){

       $('div.image').live('click', function(){ 
                var index = $("div.image").index($("div[data-rel='modal']"));
                var id = $(this).attr("id");
                link = $(this).attr("data");
                $("div.image:eq("+index+")").attr('data-rel','');
                $('div.image#'+id).attr("data-rel","modal");
                var string = 'link='+ link ;
                $('<div class="overlay"></div>').appendTo('body');
                $('<img class="loader" style="position: fixed;background: rgba(0,0,0, 0.5);padding:20px;left:50%;top:50%;z-index: 99999;" src="/css/loader_rem.gif">').appendTo('body');
                $('<div class="modal"></div>').appendTo('body').html('<img class="lightboximage" src="'+link+'"><div class="close"></div><!--<div class="prev">Назад</div><div class="next">Вперед</div>-->'); 

           });
           $('div.close').live('click', function(){
                $('.overlay').remove();
                $('.modal').remove();
                $('.loader').remove();
           });
       $('div.overlay').live('click', function(){
                $('.overlay').remove();
                $('.modal').remove();
                $('.loader').remove();
           });
     });

PS See efimov.ws/main/develop/javascript/like-lightbox-jq... there is a lot of stuff, don't pi brain