[FIXED] Hide blocks instead of deleting

Issue

I have a small slider that switches the preview image to the main image. It works fine now

blade.php

<div class="custom-carousel">
    @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
    <div class="custom-carousel__title">
        @if($loop->first)
        <span>{{ $article_block_image->title }}</span> @endif
    </div>
    @endforeach @endif @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
    <div class="main-image">
        @if($loop->first)
        <picture>
            <source srcset="{{ $article_block_image->mobile_image }}" media="(max-width: 576px)" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
            <source srcset="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
            <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 }}">
        </picture>
        @endif
    </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->preview_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}" data-main-src="{{ $article_block_image->main_image }}" data-mobile-src="{{ $article_block_image->mobile_image }}">
        </div>
        @endforeach @endif
    </div>
</div>

js

$('.img-to-select__item').click(function () {
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  let mainSrc = $(this).children('img').data('main-src')
  let mobileSrc = $(this).children('img').data('mobile-src')
  let title = $(this).children('img').attr('title')
  let alt = $(this).children('img').attr('alt')
  $('.main-image > picture').html(`
    <source srcset="${mobileSrc}" media="(max-width: 576px)" alt="${alt}" title="${title}">
    <source srcset="${mainSrc}" alt="${alt}" title="${title}">
    <img src="${mainSrc}" alt="${alt}" title="${title}">
  `);
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

But now the problem is that when I switch images, all the blocks are deleted, and then they seem to be loaded back, because of which everything on the page twitches and does not work as we would like

Is it possible to do something so that these blocks are loaded immediately and when switching unnecessary ones are hidden, and the necessary ones are shown?

If I add style="display: none" then how do I then need to rework the script so that everything is just hidden and shown, and not deleted and reopened

If I use .hide() and .show() instead of .html() does it work?

Like so

.hide(`
    <source srcset="${mobileSrc}" media="(max-width: 576px)" alt="${alt}" title="${title}">
    <source srcset="${mainSrc}" alt="${alt}" title="${title}">
    <img src="${mainSrc}" alt="${alt}" title="${title}">
  `)

and what should be the check condition here at all, when using .hide() and .show()

Solution

Change your view to this:

<div class="custom-carousel">
    @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
    <div class="custom-carousel__title">
        @if($loop->first)
        <span>{{ $article_block_image->title }}</span> @endif
    </div>
    @endforeach @endif @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
    <div class="main-image" style="display: {{ $loop->first?'block':'none'}}">
        <picture>
            <source srcset="{{ $article_block_image->mobile_image }}" media="(max-width: 576px)" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
            <source srcset="{{ $article_block_image->main_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}">
            <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 }}">
        </picture>
    </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->preview_image }}" alt="{{ $article_block_image->image_alt }}" title="{{ $article_block_image->image_title }}" data-title="{{ $article_block_image->title }}" data-main-src="{{ $article_block_image->main_image }}" data-mobile-src="{{ $article_block_image->mobile_image }}">
        </div>
        @endforeach @endif
    </div>
</div>

then in your JS you can do:

$('.img-to-select__item').click(function () {
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  let index = $(this).index(); // I think
  $('.main-image').hide();
  $('.main-image').eq(index).show();
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

The idea is to instead of replacing the HTML of the element to find the appropriate element and show it

Answered By - apokryfos