Как открыть «Bootstrap модальный диалог» с переменными параметрами

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 код для поиска каталога, images и count images:

<?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 модальный диалог с переменными, принятый в JS из PHP: необходимо создать как много 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
    });  
  });

PS Прошу прощения за мой язык Engli sh.

Answer 1

Во-первых, вы не должны использовать «imgGallery» в качестве идентификатора для нескольких элементов. Вы должны использовать «imgGallery» как класс для каждого нужного вам элемента.

Измените код 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>

Наконец, вам нужно динамически создать HTML внутри элемента ul модального элемента. Измените код вашего обработчика кликов на:

<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" в ваш модал, иначе ничего не будет отображаться.