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中回显中的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

您可以发布执行点击事件的HTML代码吗？您还引用了ID为＆＃34; a＆＃34;的元素，您是否也确定这一点，或者您想要引用锚标记<a>。如果你真的有一个名为＆＃34; image_id＆＃34;的属性，也必须进行检查。我怀疑。所以回顾一下，发布你执行点击操作的html代码，这样我就可以帮到你了。

Answer 2

一个选项可能是将这些值附加到网址＆＃34; ajax-gallery.php？album_id = your_album_id＆amp; image_id = your_image_id＆＃34;

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

#include

通过这种方式，您将获得ajax-gallery.php中的变量。可能你必须做＆＃34; $ _ GET [＆＃34; album_id＆＃34;]＆＃34;我没有测试过，所以让我知道。祝你好运！

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

2 个答案: