Как изменить изображения, используя foreach в php и javascript?

Question

Я хочу изменить изображение при нажатии кнопки. Пожалуйста, проверьте, что я делаю:

 <div>
 <?php $fetchImageArray = array();?>
   <?php foreach($photos as $photo): ?>
     <?php
       $fetchImageArray[] = $photo;
      ?>
   <?php /*<img src="<?= $product['image']; ?>" alt="<?= $product['title']; ?>" class="img-thumb-detailModal"> */?>

    <?php if($i == 0):?>
       <img  src="<?=$photo; ?>" alt="<?= $product['title']; ?>"
             class="img-thumb-detailModal" id="theImage"
             style="width:280px;height:360px;position:absolute;">

   <?php else:?>
       <img  src="<?=$photo; ?>" alt="<?= $product['title']; ?>"
             class="img-thumb-detailModal" id="theImage"
             style="width:280px;height:360px;position:absolute;visibility: hidden;">

  <?php endif;?>

  <?php
   $i++;
  endforeach;?>


  <a class="stackButton sx" onclick="plusDivs(-1)">&#10094;</a>  <!-- Right Button -->
  <a class="stackButton dx" onclick="plusDivs(1)">&#10095;</a> <!-- Right Button -->
</div>

<script>

var slideIndex = 1;
var i = 0;
function plusDivs(n)
{
    var i += slideIndex;

    document.getElementById('theImage').src="<?=$fetchImageArray[i];?>"; //$fetchImageArray[2]
} 
</script>

@ $fetchImageArray[2], если я использую 2 вместо $fetchImageArray[i], это изменяет изображения, но я должен передать $fetchImageArray[i], потому что я сохраняю исходный путь в массиве, и здесь я получаю его, передавая индекс, но затем это не работает. Если он начнет работать, то код будет в порядке.

Пожалуйста, подскажите, что я делаю не так.

Answer 1

Нельзя так использовать.

   function plusDivs(n)
    {
        var i += slideIndex;

        document.getElementById('theImage').src="<?=$fetchImageArray[i];?>"; //$fetchImageArray[2]
    }

Потому что $ fetchImageArray [i] не существует. Php не знает javascript var i.

Но вы можете сделать небольшой трюк. Вы загружаете $ fetchImageArray в javascript как массив.

Вы можете использовать laravel @foreach ($ array как $ key => $ element) и @endforeach, вам не нужно использовать их каждый раз или даже вообще. Посмотрите на Шаблоны Laravel

function plusDivs(n)
    {
        var i += slideIndex;
        var fetchImageArray = [
           @foreach ($fetchImageArray as $key => $image)
             {{$image.','}}
           @endforeach
        ]

        document.getElementById('theImage').src=fetchImageArray[i];
    }

Но вы должны проверить, находится ли ваша «переменная i» в вашем массиве. Или будет какая-то ошибка.

Надеюсь, я понимаю ваш вопрос.

Answer 2

Вы не должны возиться с php и javascript, как указано в комментариях, из вашего кода это должно быть сделано с javascript / jquery, у вас может быть такая идея:

<style>
  img {
    width:280px;
    height:360px;
    position:absolute;
  }
  .hide {
    display: none;
  }
</style>
<div>
   <?php foreach($photos as $photo): ?>
       <img src="<?=$photo; ?>" alt="<?= $product['title']; ?>" class="img-thumb-detailModal hide" id="theImage">
  <?php endforeach; ?>

  <a class="stackButton sx" onclick="plusDivs(-1)">&#10094;</a>  <!-- Left Button -->
  <a class="stackButton dx" onclick="plusDivs(1)">&#10095;</a> <!-- Right Button -->
</div>

<script>
  varar slideIndex = 1;
  showSlides(slideIndex);

  // Next/previous controls
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }

  function showDivs(n) {
    var i;
    var slides = document.getElementsByClassName("img-thumb-detailModal");
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slides[slideIndex-1].style.display = "block";
  }
</script>

Я не тестировал свой код, но у вас будет идея, для получения дополнительной информации вы можете обратиться к этому: https://www.w3schools.com/howto/howto_js_slideshow.asp