Question

好的，这就是困境。有一个滑块，当你点击缩略图时，较大的图像出现在上面的div中。挺直的。现在我已成功为更大的图像分配了一个点击功能，以便弹出Fancybox。

$('#launchImg').click(function(){
    $('.room-thumbnail').fancybox({
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic',
            'titlePosition'     : 'over'
            }).trigger('click');
            return false;
});

唯一的问题是，当点击较大的图像时，它会从缩略图中获取图像（实际上不是缩略图，只是调整了大小的全尺寸图像）并且已经为它们分配了一个点击功能

$('.room-thumbnail').click(function() {
    var img = new Image();

    $(img)
        .load(function () {
            $('#room-ajax-loader').css('display', 'none');
            $(this).hide();

            $('#room-big-image a').attr('href', $(this).attr('src'));

            $('#room-big-image a').append(img);

            $(this).fadeIn(function() {
                $('#room-big-image img:first-child').remove();
            });
        })
        .attr('src', $(this).attr('href'));
    if (!$(this).hasClass('thumbnail-current')) {
        grayscale($('.thumbnail-current'));
    }

    $('.room-thumbnail').removeClass('thumbnail-current');
    $(this).addClass('thumbnail-current');
    $('#room-ajax-loader').css('display', 'block');
    return false;
});

所以我得到的问题是，一旦我点击了打开fancybox的大图像，一切都像掌上电脑一样，但是在我关闭fancybox之后，缩略图不再改变它们上方的较大图像，而是从滑块启动fancybox，我不想发生这种情况。

基本上，我是如何从缩略图中取消绑定fancybox的？

这是html：

<div id="slider0" class="des-row">

        <div class="des-container">
              <div class="des-container-left">
                <div id="room-big-image">
                            <a id="launchImg" title="" href="images/produits/t-shirts/fresh_tf84_kaki/fresh_tf84_kaki.jpg" >
                    <img src="images/produits/t-shirts/fresh_tf84_kaki/fresh_tf84_kaki.jpg" alt="fresh_tf84_kaki.jpg" style="width:350px; height:auto;" /></a>
                </div>
            </div>



        <div class="des-container-right">
            <div id="room-slider-first-container">

              <a id="room-slider-button-left" class="button-left-orange" href="#"></a>
              <a id="room-slider-button-right" class="button-right-orange" href="#"></a>
              <div id="room-slider-button-left-disabled" class="button-left-disabled"></div>
              <div id="room-slider-button-right-disabled" class="button-right-disabled"></div>
              <div id="room-ajax-loader"></div>
              <!-- begin room-slider-second-container -->
              <div id="room-slider-second-container"><!-- begin room-slider-slide -->
                <div id="room-slider-slide">

                   <a rel="group1" href="images/produits/t-shirts/fresh_tf84_kaki/fresh_tf84_kaki.jpg" class="room-thumbnail"><img src="images/produits/t-shirts/fresh_tf84_kaki/fresh_tf84_kaki.jpg" alt="fresh_tf84_kaki.jpg" /></a>

                   <a rel="group1" href="images/produits/t-shirts/fresh_tf84_kaki/fresh_tf84_kaki_closeup.jpg" class="room-thumbnail"><img src="images/produits/t-shirts/fresh_tf84_kaki/fresh_tf84_kaki_closeup.jpg" alt="fresh_tf84_kaki_closeup.jpg" /></a>

                 </div><!-- end room-slider-slide -->
              </div><!-- end room-slider-second-container -->
            </div><!-- end room-slider-first-container -->
        </div><!-- end des-container-right -->
    </div><!-- end des-container -->
  </div><!-- end slider0 - des-row -->

谢谢，如果你已经读过这篇文章了！和平。

Answer 1

如果单击大图像是什么会引发fancybox，你为什么不这样做？

$('#launchImg').fancybox({
 'transitionIn'      : 'elastic',
 'transitionOut'     : 'elastic',
 'titlePosition'     : 'over'
});

Fancybox - 从发布幻灯片中解除绑定缩略图

1 个答案: