これは私の麺を焼いています、どんなプロのアイデア/アドバイスも大いに感謝します。
以下にマークアップがあります...
<a href="#" class="launch-fancybox">Preview Image Gallery</a>
<!-- lots of mark up in between -->
<a href="enlarge-1.jpg" class="fancybox"><img src="thumb-1.jpg" alt=""/></a>
<a href="enlarge-2.jpg" class="fancybox"><img src="thumb-2.jpg" alt=""/></a>
<a href="enlarge-3.jpg" class="fancybox"><img src="thumb-3.jpg" alt=""/></a>
<a href="enlarge-4.jpg" class="fancybox"><img src="thumb-4.jpg" alt=""/></a>
次に、私のfancybox jquery ...
$('.fancybox').on('click', function () {
var data = $(this).attr('data-rel');
$('.fancybox[data-rel="' + data + '"]').attr('rel','fancybox-thumb').fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : null,
overlay : {
opacity : 0.8,
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
},
closeClick: true
});
});
ここで私の質問は、クラス「launch-fancybox」とのリンクを取得して、クラス「fancybox」との最初/最も近いリンクを見つけ、上記のスクリプトを実行するにはどうすればよいかということです。
基本的に、最初のサムネイルのクリックをシミュレートしたいと思います。ただし、代わりに「launch-fancybox」リンクをクリックしてください。
私がこれをどのように行うことができるかについてのアイデアや指針は素晴らしいでしょう。
ありがとう
================================================== ====
jqueryを関数に入れてみました...
fancybox = function () {
var data = $(this).attr('data-rel');
$('.fancybox[data-rel="' + data + '"]').attr('rel','fancybox-thumb').fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : null,
overlay : {
opacity : 0.8,
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
},
closeClick: true
});
};
$('.fancybox').on('click', fancybox);
$('.launch-fancybox').on('click', function (e){
e.preventDefault();
$(this).closest('.fancybox').click();
});