php - 在模态窗口和ajax请求中显示轮播

Question

我什至不确定我是否走对了路，而且我对 ajax/jquery 很陌生。

我试图在一页上加载类别中的 20 个缩略图。当用户单击拇指时，它会在模式中以全尺寸显示。然后我希望用户能够看到该类别中的下一张图像。

现在，当我单击图像时，它只显示空弹出窗口，并且控制台中没有错误。

所以这是我显示该类别的图像的地方

        // some other code here
$result = $pdo->prepare("SELECT * FROM images WHERE image_album = ? ORDER BY image_id ASC LIMIT 24");
$result -> bindParam(1, $album_id, PDO::PARAM_INT);
$result->execute();
echo '
   <div id="gallery" class="section-scroll main-section">
      <section id="gallery-wrapper" class="">       
         <div class="gallery-content three-columns">';
    for($i=0; $row = $result->fetch(); $i++)
    {
        echo '            
            <a class="mix category-2 open-overlay" href="ajax-gallery.php" >
            <img width="1000" height="600" src="images/gallery/'.$row['image_name'].'" data-src="images/gallery/'.$row['image_name'].'"/>
                <div class="hidden-xs">
                    <div>
                        <span><h3>Full size</h3></span>
                    </div>
                </div>
            </a>';
    }
        // some more code

然后在ajax-gallery.php中我有

if(!empty($_POST["album_id"]) && !empty($_POST["image_id"])) {

$album_id = $_POST['album_id'];            
$image = $_POST['image_id'];

    $value = $pdo->prepare('SELECT * FROM images WHERE image_album = ? ORDER BY image_id = ? ASC');
    $value->bindParam(1, $album_id, PDO::PARAM_INT);
    $value->bindParam(2, $image_id, PDO::PARAM_INT);
    $value->execute();
    $result = $value->fetch();    

    foreach ($result as $row)
    {
        echo '
        <section id="gallery">
            <div class="gallery-content fullscreen"><a class="close-button"><i class="icon-close"></i></a>
                <div class="gallery">
                    <div class="loading-spinner"></div>
                    <div id="images" class="owl-carousel">
                        <div class="item"><figure><img src="images/gallery/'.$row['image_name'].'" /></figure></div>
                    </div>
                    <div class="controls"></div>
                </div>
            </div>
        </section>      
        ';
    }

ajax-gallery.php中的echo中的HTML是用户点击缩略图时的轮播。

这是js部分，我确信它是错误的。

$(document).ready(function(){
$('#gallery, #a').click(function() {
   $.post('ajax-gallery.php',
        {
            "album_id": $(this).attr('album_id'),
            "image_id": $(this).attr('image_id')
        },
        function (response) {

        });
 });
});

更新:

这是当您指向拇指时

Answer 1

一种选择是将这些值附加到网址“ajax-gallery.php?album_id=your_album_id&image_id=your_image_id”

将变量附加到网址后，您可以执行以下操作:

$(document).ready(function(){
   $('#gallery .mix category-2').click(function() {
      var url = $(this).attr('href')
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
     })
     .done(function(data) {
        console.log("success");
     })
     .fail(function() {
        console.log("error");
     })
   })
})

这样你就可以得到ajax-gallery.php中的变量了。也许你必须做“$_GET[“album_id”]”我没有测试它，所以让我知道。祝您工作顺利!