не показывал истинного изображения

Question

Я построил лайтбокс, чтобы продемонстрировать мои большие изображения. У меня есть 4 изображения, но когда я нажимаю номер 1, он отображает номер 2, и когда я нажимаю на номер 2, он также отображает номер 2. Другими словами, он будет показывать только изображение номер 2, а не другие.

JQuery здесь:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function(){ 

      $('.lightbox').click(function(){ 
       $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); 
       $('.box').animate({'opacity':'1.00'}, 300, 'linear'); 
       $('.backdrop, .box').css('display', 'block'); 
      }); 

      $('.close').click(function(){ 
       close_box(); 
      }); 

      $('.backdrop').click(function(){ 
       close_box(); 
      }); 

     }); 

     function close_box() 
     { 
      $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ 
       $('.backdrop, .box').css('display', 'none'); 
      }); 
     } 

    </script> 

Когда я хочу, чтобы мои фотографии, так что я делать так, чтобы только увидеть их:

function gallery() 
    { 
     if ($stmt = $this->mysqli->prepare('SELECT `rank`, `img`, `navn` FROM `gallery`')) { 
      $stmt->execute(); 

      /* Bind resultatet */ 
      $stmt->bind_result($rank, $img, $navn); 

      /* Hent rækker og udskriv data */ 
      while ($stmt->fetch()) { 
      if($rank != 1) 
      { 
      ?> 
      <a href="#" class="lightbox"><img src="/indhold/gallery/<?php echo $img;?>" alt="<?php echo $navn;?>"></a> 

      <div class="backdrop"></div> 
      <div class="box"><div class="close">x</div><img src="/indhold/gallery/index/<?php echo $img;?>" alt="<?php echo $navn;?>"></div> 
      <?php 
      } 
      } 

      /* Luk statement */ 
      $stmt->close(); 

     } else { 
      /* Der er opstået en fejl */ 
      echo 'Der opstod en fejl i erklæringen: ' . $this->mysqli->error; 
     } 
     } 
.backdrop { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: #000; 
    opacity: .0; 
    filter: alpha(opacity= 0); 
    z-index: 50; 
    display: none; 
} 
.box { 
    position: absolute; 
    top: 20%; 
    left: 30%; 
    height: 175px; 
    width: 370px; 
    background: #fff; 
    z-index: 51; 
    padding: 10px; 
    display: none; 
} 
.close 
{ 
    float: right; 
    margin-right: 10px; 
    margin-bottom: 20px; 
    cursor: pointer; 
} 

Answer 1

Sorry мужчина, посмотрев на свой веб-сайт, я не знаешь, какого черта ты пытаешься сделать. Я хотел бы использовать встроенное диалоговое окно jQuery или получить плагин lightbox. Либо это, либо просто скачайте бесплатную галерею изображений (найдите google для «бесплатной галереи изображений jQuery»). Это было бы намного проще. :)