如何打开带有可变参数的"Bootstrap modal dialog"

Question

图库html代码：

<div id="imgGallery" class="col-lg-3 col-md-4 col-6 col-xs-12 wow fadeInUp hovereffect" data-wow-delay="0.2s">
    <img class="img-thumbnail" src="https://source.unsplash.com/sesveuG_rNo/400x300" name="bear" alt="">
    <div class="overlay">
        <h2>Effect 14</h2>
        <a class="info">Show More</a>
    </div>
</div>
<div id="imgGallery" class="col-lg-3 col-md-4 col-6 col-xs-12 wow fadeInUp hovereffect" data-wow-delay="0.4s">
    <img class="img-thumbnail" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" name="birds" alt="">
    <div class="overlay">
        <h2>Effect 14</h2>
        <a class="info">Show More</a>
    </div>
</div>
<div id="imgGallery" class="col-lg-3 col-md-4 col-6 col-xs-12 wow fadeInUp hovereffect" data-wow-delay="0.2s">
    <img class="img-thumbnail" src="https://source.unsplash.com/2gYsZUmockw/400x300" name="pig" alt="">
    <div class="overlay">
        <h2>Effect 14</h2>
        <a class="info">Show More</a>
    </div>
</div>
<div id="imgGallery" class="col-lg-3 col-md-4 col-6 col-xs-12 wow fadeInUp hovereffect" data-wow-delay="0.4s">
    <img class="img-thumbnail" src="https://source.unsplash.com/EMSDtjVHdQ8/400x300" name="rabbits" alt="">
    <div class="overlay">
        <h2>Effect 14</h2>
        <a class="info">Show More</a>
    </div>
</div>

用于查找和发送图库名称的 JS 代码 php:

$('.info').click(function() {
    var galleryName = $(this).closest('#imgGallery').find('img.img-thumbnail').attr('name');
    $.ajax({
        url: "gallery/testingGallery/imgFinder.php",
        dataType: "json",
        type: "post",
        data: {
            galleryName: galleryName
        },
        success: function(xhr) {
            console.log(xhr.imgNormal);
            console.log(xhr.imgThumb);
            console.log(xhr.imgCount);
            $("#galleryModal").modal('show');
        },
        error: function(xhr) {
            console.log("Some error found");
        }
    });
});

PHP 查找目录、图像和计数图像的代码：

<?php
$dirname = $_POST["galleryName"];

$imgGallery = glob($dirname . "/".$dirname."_*.*");
$thumbGallery = glob($dirname . "/thumb_*.*");

$countImages = count($imgGallery);

echo json_encode(array("imgNormal" => $imgGallery, "imgThumb" => $thumbGallery, "imgCount" => $countImages));
?>

现在，点击 a.info 需要打开 bootstrap 带有变量的模态对话框，在来自 PHP 的 JS 中接受：需要创建尽可能多的 li，因为我们 imgCount 从 PHP 获得，图像源 imgNormal & imgThumb

以模态对话框为例，有这样一个结构：

<div class="modal-body">
    <div class="item">
        <div class="clearfix" style="max-width:474px;">
            <ul id="vertical">
                <li data-thumb="gallery/testingGallery/bear/thumb_bear_1.jpg">
                    <img src="gallery/testingGallery/bear/bear_1.jpg" />
                </li>
                <li data-thumb="gallery/testingGallery/bear/thumb_bear_2.jpg">
                    <img src="gallery/testingGallery/bear/bear_2.jpg" />
                </li>
                <li data-thumb="gallery/testingGallery/bear/thumb_bear_3.jpg">
                    <img src="gallery/testingGallery/bear/bear_3.jpg" />
                </li>
                <li data-thumb="gallery/testingGallery/bear/thumb_bear_4.jpg">
                    <img src="gallery/testingGallery/bear/bear_4.jpg" />
                </li>
            </ul>
        </div>
    </div>
</div>

用于自定义模式对话框的 JS：

  $(document).ready(function() {
    $('#vertical').lightSlider({
      gallery:true,
      item:1,
      vertical:true,
      verticalHeight:295,
      vThumbWidth:50,
      thumbItem:8,
      thumbMargin:4,
      slideMargin:0
    });  
  });

P.S。我为我的英语感到抱歉。

Answer 1

首先，您不应该使用 "imgGallery" 作为多个元素的 ID。您应该使用 "imgGallery" 作为每个您需要的元素的 class。

将 HTML 代码更改为：

<div id="imgGallery1" class="imgGallery col-lg-3 col-md-4 col-6 col-xs-12 wow fadeInUp hovereffect" data-wow-delay="0.2s">
    <img class="img-thumbnail" src="https://source.unsplash.com/sesveuG_rNo/400x300" name="bear" alt="">
    <div class="overlay">
        <h2>Effect 14</h2>
        <a href="#" class="info">Show More</a>
    </div>
</div>
<div id="imgGallery2" class="imgGallery col-lg-3 col-md-4 col-6 col-xs-12 wow fadeInUp hovereffect" data-wow-delay="0.4s">
    <img class="img-thumbnail" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" name="birds" alt="">
    <div class="overlay">
        <h2>Effect 14</h2>
        <a href="#"  class="info">Show More</a>
    </div>
</div>
<div id="imgGallery3" class="imgGallery col-lg-3 col-md-4 col-6 col-xs-12 wow fadeInUp hovereffect" data-wow-delay="0.2s">
    <img class="img-thumbnail" src="https://source.unsplash.com/2gYsZUmockw/400x300" name="pig" alt="">
    <div class="overlay">
        <h2>Effect 14</h2>
        <a href="#"  class="info">Show More</a>
    </div>
</div>
<div id="imgGallery4" class="imgGallery col-lg-3 col-md-4 col-6 col-xs-12 wow fadeInUp hovereffect" data-wow-delay="0.4s">
    <img class="img-thumbnail" src="https://source.unsplash.com/EMSDtjVHdQ8/400x300" name="rabbits" alt="">
    <div class="overlay">
        <h2>Effect 14</h2>
        <a href="#"  class="info">Show More</a>
    </div>
</div>

在模态正文中，像这样删除所有 li 元素：

        <div class="modal-body">
            <div class="item">
                <div class="clearfix" style="max-width:474px;">
                    <ul id="vertical">

                    </ul>
                </div>
            </div>
        </div>

最后，您需要在模态的 ul 元素内动态创建 HTML。将您的点击处理程序代码更改为：

<script>
        $('.info').click(function() {
            // change closest('#imgGallery') to closest('.imgGallery')
            var galleryName = $(this).closest('.imgGallery').find('img.img-thumbnail').attr('name');
            // reset modal body list html
            $('#vertical').html('');

            $.ajax({
                url: "gallery/testingGallery/imgFinder.php",
                dataType: "json",
                type: "post",
                data: {
                    galleryName: galleryName
                },
                success: function(xhr) {
                    console.log(xhr.imgNormal);
                    console.log(xhr.imgThumb);
                    console.log(xhr.imgCount);

                    if (xhr.imgCount == 0) { // no images in gallery
                        console.log('Gallery \'' + galleryName + '\' has no images');
                        return;
                    }

                    var modalBodyContent = '';
                    // for every expected image, create list element with appropriate data
                    for (var i = 1; i <= xhr.imgCount; i++) {
                        modalBodyContent += ' <li data-thumb="gallery/testingGallery/' + galleryName + '/thumb_' + galleryName + '_' + i + '.jpg">' +
                            ' <img src="gallery/testingGallery/' + galleryName + '/' + galleryName+'_' + i + '.jpg"/> ' +
                        '</li>';
                    }
                    // set new modal body list html
                    if (modalBodyContent !== '') {
                        $('#vertical').html(modalBodyContent);
                        $("#galleryModal").modal('show');
                    }
                },
                error: function(xhr) {
                    console.error("Some error found");
                }
            });
        });

    </script>

PS：不要忘记将 id "galleryModal" 添加到您的模式中，否则将不会显示任何内容。

如何打开带有可变参数的"Bootstrap modal dialog"

How to open a "Bootstrap modal dialog" with variable parameters

html

php

ajax

jquery

gallery