ここにジレンマがあります。サムネイルをクリックすると、上の 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を開く大きな画像をクリックするとすべてがpalnnedとして機能するが、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 -->
ここまで読んでくれてありがとう!平和。