Integrate fields in a block-CodePudding

I have a block where the main picture changes when clicked

$('.img-to-select__item').click(function () {
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  $('.main-image > img').attr('src', $(this).children('img').attr('src'));
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

.custom-carousel {
  text-align: center;
}
.main-image > img {
  width:50px;
}
.img-to-select > .img-to-select__item > img {
  heigh:30px;
  width: 30px;
}
.img-to-select {
  overflow: hidden; 
  display: flex; 
  justify-content:space-around;
}
.img-to-select > .img-to-select__item {
   display: flex; 
   justify-content:space-around;
}

.img-to-select > .img-to-select__item.selected {
   border: 2px solid red;
}

 <div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="custom-carousel__title">
        <span>Title
        </span>
      </div>
      <div class="main-image">
        <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

But I can't integrate the whole thing under the data from the site.

So I'm trying to do this, but it turns out that the selected class is added to all img-to-select__items. And all main-images are displayed, but there should only be one

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="custom-carousel__title">
        <span>
          Title
        </span>
      </div>
      @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
      <div class="main-image">
        <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
      </div>
      @endforeach @endif
      <div class="img-to-select">
        @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
        <div class="img-to-select__item selected">
          <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
        </div>
        @endforeach @endif
      </div>
    </div>
  </div>
</div>

Here I use main_image everywhere, but let's say I have another preview_image picture, I want to use it in this block

@if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
        <div class="img-to-select__item selected">
          <img src="{{ $article_block_image->preview_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
        </div>
        @endforeach @endif

But if I do this now, then this picture will become the main one and change accordingly, and I need the selection to be preview_image and only main_image will change

Preview and main pictures are the same, just different size

CodePudding user response：

Try this in the second @foreach, where you use the class "selected", check the $loop by index, and for the first element, for example, apply this class

 <div class="custom-carousel-section">
      <div class="custom-container">
        <div class="custom-carousel">
          <div class="custom-carousel__title">
            <span>
              Title
            </span>
          </div>
          @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
          <div @if ($loop->first) class="main-image"@else  style="display: none" @endif>
            <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
          </div>
          @endforeach @endif
          <div class="img-to-select">
            @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
            <div @if ($loop->first)class="img-to-select__item  selected" @else class="img-to-select__item" @endif>
              <img src="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
            </div>
            @endforeach @endif
          </div>
        </div>
      </div>
    </div>

https://laravel.com/docs/8.x/blade#the-loop-variable laravel docs about it