Предыдущая и следующая кнопка в модальном бутстрапе с базой данных - PullRequest
Новая
       7

Предыдущая и следующая кнопка в модальном бутстрапе с базой данных

0 голосов
/ 27 февраля 2019

Я изучаю язык php и jquery.Я хотел сделать галерею изображений, которая открывается модалом с начальной загрузкой.Я использую PHP SQL, потому что мне нужно редактировать каждое изображение.Я должен был сделать следующую и предыдущую кнопку, чтобы переключить каждую картинку, но я не понимаю, как это реализовать с помощью php ID.

мой php: 

$statement = $db->prepare('SELECT * FROM items WHERE items.category = ?');
$statement->execute(array($id));
while ($item = $statement->fetch())
{
   echo '<a data-toggle="modal" data-target="#ModImage'.$item['id'].'">
          <img src="image/'.$item['image'].'" class="polaroid" >
        </a>

        <div id="ModImage'.$item['id'].'" class="modal fade" tabindex="-1" role="dialog" name="openmodal">
          <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <img src="image/'.$item['image'].'" class="ModalImage">
                </div>
                <div class="modal-footer">
                    <div class="cleft">
                      <h1 class="hleft"><</h1>
                    </div>
                    <div class="cright">
                      <h1 class="hright">></h1>
                    </div>
                </div>
            </div>
          </div>
        </div>';
}

и jquery: 

$("div[id^='ModImage']").each(function(){

  var currentModal = $(this);

  currentModal.find('.cright').click(function(){
  currentModal.modal('hide');
  currentModal.closest("div[id^='ModImage']").nextAll("div[id^='ModImage']").first().modal('show');
  });

  currentModal.find('.cleft').click(function(){
  currentModal.modal('hide');
  currentModal.closest("div[id^='ModImage']").prevAll("div[id^='ModImage']").first().modal('show');
  });

});
...