Question

我正在尝试在自己的项目中重新创建fancybox product quick view想法。我正在努力让我的图像轮播开始/工作。要在模态中加载内容，我必须使用带有Ajax调用的函数。我可以使用我自己的自定义滑块或使用owl carousel开始，但我想按照演示的方式进行：）

我有两个问题：

1）在演示中，他们将图像作为HTML中的隐藏div。这是我在项目中无法做到的事情，因为这些图像仅在我进行ajax调用时才可用。我希望点击按钮后可以使用它们。

2）接下来在演示中他们使用onInit，而我的ajax调用是在beforeShow函数中进行的，否则它将无效。

所以我的问题是有没有办法使用动态图像，仍然使用标准的Fancybox轮播/演示创意？所以我的想法是点击图片。接下来显示模态，然后加载ajax / json内容。从那时起，有一个旋转木马创建？！标准的Fancybox甚至可以实现这一点吗？

我已经阅读过关于instances的信息，但是当开始时没有图像存在时应该如何工作。

// test image
  <div class="image-container">
    <a href="link" title="Lorem ipsum dolor sit amet dolor">
        <img src="lorem-ipsum-dolor-sit-amet-dolor.jpg" class="img-responsive">
    </a>
    <div class="item-action hidden-xs hidden-sm hidden-md">
     <a href="javascript:;" class="quick_view" title="Quick shop">
       Quick shop
     </a>
    </div>
  </div>

// the modal 
 <div id="quick-view-test" class="cd-quick-view" style="display:none;"></div>

 // Jquery
 $(".quick_view").on('click', function() {
        var url =  $(this).closest('.quick-view-item').data('handle') + '/?format=json';
        $.fancybox.open({
          src  : '#quick-view-test',
          type: 'inline',     
          beforeLoad: function ( instance ){
             quick_shop(url)
          }

        });
    });

function quick_shop(url){

        $.getJSON(url, function(data) {
            // Images

            var slider = $('.quick-view .slider');


                $.each(images, function(index, image_id) {
                    img_url = imageIdToUrl(image_id, '500x500x2');

                  var img = new Image();
                  img.src = img_url;

                  var $newImage = $("<li></li>").append(img).data('index', index);
                        slider.append($newImage);

                 });
                });
          }

Answer 1

逻辑应该是另一种方式。因此，当用户点击 - ＆gt;制作ajax请求以获取图像 - ＆gt;以编程方式启动fancybox，例如$.fancybox.open( [ array containing gallery items], [ gallery options ] );

在onInit外面的Fancybox模态图像轮播？

1 个答案: