Как показать одну запись в сплывающем окне?

Question

при клике на quick-view подгружается этот блок "quick-view-modal" со всеми article а как сделать чтобы только подгружался блок "quick-view-modal" и в нем конкретный article на который кликнули ?

Спасибо!

$(".quick-view").click(function () {
     var id = $(this).attr("data-id");
                    
                        
     $('.quick-view').fancybox({
                        
            content: $('.quick-view-modal'),
            padding: 0,
                        helpers : {
                overlay : {
                    locked  : false
                }
            },
            afterLoad: function() {
                multishop_initslider(true);
            }
                    });
});

<a href="#" data-id="{{$product->id}}" class="hover-label quick-view"><i class="icon ion-plus"></i><span>Быстрый просмотр</span></a>


<div class="cont maincont quick-view-modal">
  <article class="product-item-1"> </article>
  <article class="product-item-2"> </article>
  <article class="product-item-3"> </article>
</div>

Answer 1

Используйте beforeShow, чтобы скрыть все записи, кроме нужной, до того, как откроется модальное окно.

$(".quick-view").click(function () {
  var id = $(this).attr("data-id");
                    
  $('.quick-view').fancybox({
                        
    content: $('.quick-view-modal'),

    padding: 0,

    helpers: {
      overlay: {
        locked: false
      }
    },
    
    beforeShow: function() {
      $('.product-item').hide().filter('[data-id="' + id + '"]').show();
    },

    afterLoad: function() {
      //multishop_initslider(true);
    }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript" src="https://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script>
<link rel="stylesheet" type="text/css" href="https://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.7" media="screen" />

<a href="#" data-id="1" class="hover-label quick-view"><i class="icon ion-plus"></i><span>Быстрый просмотр - 1</span></a><br/>
<a href="#" data-id="2" class="hover-label quick-view"><i class="icon ion-plus"></i><span>Быстрый просмотр - 2</span></a><br/>
<a href="#" data-id="3" class="hover-label quick-view"><i class="icon ion-plus"></i><span>Быстрый просмотр - 3</span></a><br/>

<div class="cont maincont quick-view-modal" style="display: none;">
  <article class="product-item" data-id="1">1</article>
  <article class="product-item" data-id="2">2</article>
  <article class="product-item" data-id="3">3</article>
</div>

БЛОГ НА HUSL

Как показать одну запись в сплывающем окне?

Ответы (1 шт):