具有数据库的模式引导程序中的上一个和下一个按钮

时间:2019-02-27 20:16:57

标签: javascript php jquery bootstrap-modal

我正在学习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');
  });

});

0 个答案:

没有答案