Как показать блок после последнего блока в ряду?

Question

[Иван Симонов]

Здравствуйте
Мой код fiddle

Не могу понять как реализовать, чтобы при клике на .item - показать блок <div class="block">block</div> (изначально он скрыт) после ряда.
Если кликнуть на итем4,5,6 - этом блок должен появиться после данного ряда

Пример
При клике на продукт - появляется блок карточка
Подскажите пожалуйста логику реализации

Comments

[artuh_a]

А если использовать еще обертку у этих блоков? Как-то так, если я правильно понял.

[Иван Симонов]

artuh_a, Желательно без обертки, т.к это довольно сложно адаптировать, если будет две карточки в ряду

Answer 1

[Exploding]

(изначально он скрыт) после ряда

Его нет изначально там, т.к. при ресайзе (поворот экрана например) страницы кол-во блоков в ряду будет меняться и довольно глупо - расставлять скрытые блоки заранее.
Блок появляется после определенного элемента. Значит для определения "последнего в ряду" вам необходимо вычислить ширину ряда и положение текущего блока, на котором кликнули. Дальше думаю уже все понятно.

Но зачем эта боль, если давно для таких целей используют всплывающие оверлеи?

Comments

[Иван Симонов]

Спасибо. В целях самообразования. Блок описание в данном случае для примера показан

[Иван Симонов]

Покажите пожалуйста пример всплывающего оверлея

[Exploding]

ivan00007, Ну так в примере жеж прям в вашем есть:

<div class="magnifier" style="position: absolute;z-index: 0;width: 440px;height: 380px;left: 453.5px;top: 1175.33px;visibility: visible;overflow: hidden;border: 1px solid black;/* display: none; */"><img src="http://amigo.ru/upload/iblock/4f9/4f92f2d31d743040e7729465a82b3d96.jpg" style="position: relative; max-width: none; left: 96.56px; top: 36.56px; width: 343px; height: 343px;"></div>

При наведении на картинку из того блока, о котором сабж собственно:)

Но я бы использовал dialog, если говорить конкретно о сабже.

Answer 2

[artuh_a]

Держи

$('.item').on('click', function() {
        $('.active').removeClass('active');
        $(this).addClass('active');

        var index = $(this).index('.item');
        var block = $('.block');

        function transferBlock(i) {
          block.insertAfter($('.item').eq(i));
        }

        switch((index + 1) % 3) {
          case (0):
            transferBlock(index);
            break
           case(1):
            transferBlock(index + 2);
            break
          case(2):
            transferBlock(index + 1);
            break;
        }
    });

Comments

[artuh_a]

отметь решением, если подходит