Как передать через атрибут изображения?

Question

[Александр Коновалов]

Здравствуйте! Есть массив с изображениями:

<?php if (!empty($images)): ?>
					<?php foreach($images as $img): ?>
					<?php 
						$name = pathinfo($img['filename'], PATHINFO_FILENAME);
						$ext = pathinfo($img['filename'], PATHINFO_EXTENSION);
					?>
					<img class="panzoom__content" src="/uploads/<?php echo $img['filename']; ?>" />
					<?php endforeach; ?>
				<?php endif; ?>

Как передать эти изображения в попап через атрибут data-img?

<a href="#modal-order" data-toggle="modal" data-img=""></a>

<script>
	$(document).ready(function() {
	$(".modal-name").on("click", function() {
    $("#modal-img").attr('src', $(this).attr('data-img'));
  });
});
</script>

Comments

[scottparker]

циклом пройдись по массиву и передай в атрибут data-img тега а, так же как передаешь в атрибут src тега img. в чем разница?

Answer 1

[Владимир]

Если нужен именно массив, то создать его в php, перевести в json и полученное представление поместить в атрибут, а по клику достать его оттуда, передать в JSON.parse() и работать с полученным результатом. Если нужно передавать элементы массива отдельно, то точно так же, как у вас уже сделано:

<?php if (!empty($images)): ?>
          <?php foreach($images as $img): ?>
          <?php 
            $name = pathinfo($img['filename'], PATHINFO_FILENAME);
            $ext = pathinfo($img['filename'], PATHINFO_EXTENSION);
          ?>
          <a href="#modal-order" data-toggle="modal" data-img="/uploads/<?php echo $img['filename']; ?>" ></a>
          <?php endforeach; ?>
        <?php endif; ?>

Comments

[Александр Коновалов]

Владимир в таком варианте у меня появляется несколько кнопок

[Владимир]

Александр Коновалов, не совсем понятно, что именно вам нужно, поэтому я предложил два варианта. Похоже, у вас вообще третий, выложите сюда результат и html-код, который вы хотите получить на выходе.

[Александр Коновалов]

Владимир, для решения задачи нужно найти все картинки в выбраном товаре, получить их src, далее добавить в модальном окне соответствующее количество img c этими путями

В разметке должно быть несколько тегов пока что он один <img id="modal-img">

[Александр Коновалов]

Владимир,

Array(3) [ "/uploads/1655046147-3832192997.jpg", "/uploads/1655046147-551899804.jpg", "/uploads/1655046147-2827771717.jpg" ]

есть массив с путями, нужно пробежать по этому массиву, добавить в модалку все картинки

[Владимир]

Тогда вообще непонятно, что вас с толку сбивает - приведенный в самом начале код именно это и делает: добавляет картинки в то место, в котором он находится.
Если вы хотите сделать пустой попап в который будете вставлять изображения в момент показа, чтобы картинки подгружались динамически для уменьшения времени загрузки страницы, сокращения трафика, расхода памяти и т.п., то используйте вариант с json, который я вам предложил. Что-то вроде такого:

<?php
$images=[ "/uploads/1655046147-3832192997.jpg", "/uploads/1655046147-551899804.jpg", "/uploads/1655046147-2827771717.jpg" ]; 
 ?> //просто как пример, не знаю как и откуда вы получаете массив
<a href="#modal-order" data-toggle="modal" data-img='/uploads/<?php json_encode($images); ?>' ></a>

Обратите внимание, что у атрибута data-img использованы одинарные кавычки! А на странице тогда примерно вот так:

<script>
  $(document).ready(function() {
    $(".modal-order").on("click", function() {
      let images=JSON.parse($(this).attr('data-img'));
      $.each(images, function(i, val) {
        $('<img>', {
           id: 'yourImgId',
           class: 'yourClass yourClass2 etc',
           src: val 
        }).appendTo('#yourSelector');
     });
  });
});
</script>

[Александр Коновалов]

Владимир, делаю так:

<a href="#modal-order" data-toggle="modal"  data-img="
<?php if (!empty($images)): ?>
					<?php foreach($images as $img): ?>
					<?php 
						$name = pathinfo($img['filename'], PATHINFO_FILENAME);
						$ext = pathinfo($img['filename'], PATHINFO_EXTENSION);
					?>
					/uploads/<?php echo $img['filename']; ?>
					<?php endforeach; ?>
				<?php endif; ?> " class="modal-name"><div class='btn-more'>Подробнее</div>
				</a>

Но у меня в попапе только один тег img:

Получается вот такое - несколько картинок добавляется в один тег

[Владимир]

Александр Коновалов, Тут по коду вроде бы правильно, но в итоге все ваши картинки оказались в src единственного тега img. Судя по этому, ваш js не может правильно обработать то, что вы закидываете в data-img. Попробуйте мой подход с json-представлением.

Еще момент: попробуйте переписать код вот так, на мой взгляд будет значительно удобнее:

<?php 
if (!empty($images)){
  foreach($images as $img){
    $name = pathinfo($img['filename'], PATHINFO_FILENAME);
    $ext = pathinfo($img['filename'], PATHINFO_EXTENSION);
    $imgArr[]='/uploads/'.$img['filename'];
  }
}
?>
<a href="#modal-order" data-toggle="modal"  data-img='<?php echo json_encode($imgArr); ?>' class="modal-name">
  <div class='btn-more'>Подробнее</div>
</a>

Как потом обработать json я выше уже писал, подставьте только нужные вам селекторы.

[Александр Коновалов]

Владимир, спасибо, работает! Но возникла другая проблема: после закрытия попапа и открытия другого, к картинкам из старого добавляются новые. Как очищать всю информацию после закрытия?

[Владимир]

Александр Коновалов, пожалуйста! Не забудьте отметить решением)
Судя по поведению, это у вас не старый и новый попап, это один и тот же. Чтобы не картинки не накапливались, просто добавьте вызов $('#yourSelector').empty() перед итератором:

<script>
$(document).ready(function() {
   $(".modal-order").on("click", function() {
      let images=JSON.parse($(this).attr('data-img'));
      $('#yourSelector').empty(); // Очищаем содержимое попапа, потом запускаем итератор
      $.each(images, function(i, val) {
        $('<img>', {
           id: 'yourImgId',
           class: 'yourClass yourClass2 etc',
           src: val 
        }).appendTo('#yourSelector');
     });
  });
});
</script>

Где yourSelector - это селектор вашего попапа, замените его на нужный.

[Александр Коновалов]

Владимир, так открывается пустой попап

[Владимир]

Александр Коновалов, вы же сами написали, что "Но возникла другая проблема: после закрытия попапа и открытия другого, к картинкам из старого добавляются новые." Я правильно понял, что первый раз открывается попап с нужными, а потом, по мере использования попапа, начинают добавляться все новые и новые изображения?

[Александр Коновалов]

Владимир, именно так

[Александр Коновалов]

Владимир, может, не работает, потому что я изменил код, сейчас вот так:

<script>
	$(document).ready(function() {
	$(".modal-name").on("click", function() {
    $("#modal-name").html($(this).data("name"));
    $("#modal-description").html($(this).data("description"));
    $("#modal-attr1").html($(this).data("attr1"));
    $("#modal-attr2").html($(this).data("attr2"));
    $("#modal-art").html($(this).data("art"));
    let images=JSON.parse($(this).attr('data-img'));
    $('.carousel__slide').empty();
    $.each(images, function( i, val ) {
      $('#mainCarousel .carousel__track').append(`<div class="carousel__slide" data-src="${val}" data-fancybox="gallery"><img src='${val}'></div>`);
      $('#thumbCarousel .carousel__track').append(`<div class="carousel__slide" data-src="${val}"><img class='panzoom__content' src='${val}'></div>`);
    });
  });
});
</script>

[Александр Коновалов]

Владимир, разобрался, спасибо!

[Владимир]

Александр Коновалов, не за что, вы сами разобрались. А что было? Неправильный селектор?

[Александр Коновалов]

Владимир, да, не тот указывал. Тут новая проблема) пока Карусель была не настроена, не обратил внимание.

Почему в массиве лишние пути указываются, их тоже надо чистить или выбирать по id карточки?

[Владимир]

Александр Коновалов, тут вам надо смотреть сначала, как формируется массив на стороне сервера. Если там все в порядке, то смотреть уже надо что делается на странице - возможно нужно очищать элементы перед передачей туда нужного вам пути. Или js некорректно пишет в переменные, как вариант, но это вряд ли.

[Александр Коновалов]

Владимир, поможете решить за вознаграждение?

[Владимир]

Александр Коновалов, только если у вас есть время до понедельника подождать - раньше никак не могу.