Fancybox - 从启动幻灯片中取消绑定缩略图

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'
});