サイトを開発していて、いくつかの新しい機能を追加したいと考えています。私は Fancybox を使用しています。
問題は次のとおりです。
POI をクリックすると、いくつかの POI には複数の写真が含まれているため、次のコードを使用すると、fancybox が正しくトリガーされますが、ギャラリー全体ではなく 1 つの写真のみが表示されます。
私がしていることは、そのhtmlを非表示のdiv内にコピーして別のdivに追加して、正しくトリガーできるようにすることです.
動作しますが、写真は 1 枚しか表示されず、他の 2 枚以上の写真は表示されません。
私のhtml
<div id="pois">
<div id="torrebenefebvlc" class="pointer hoversin" alt="2" style="margin-top: 295px; margin-left: 305px; position: absolute;">
<img src="http://www.vistadesarrollos.com/avancedeobra2/images/POI-90.png">
<div style="display:none">
<div id="slideimg" style="">
<a class="fancybox" href="http://www.vistadesarrollos.com/avancedeobra2/images/avance/torrebenefeb2013vlc.jpg" data-fancybox-group="gallery2" rel="gallery2">
<img style="" src="http://www.vistadesarrollos.com/avancedeobra2/images/avance/torrebenefeb2013vlc.jpg"></a>
<a class="fancybox" href="http://www.vistadesarrollos.com/avancedeobra2/images/avance/torrebenefeb2013vlc2.jpg" data-fancybox-group="gallery2" rel="gallery2">
<img style="" src="http://www.vistadesarrollos.com/avancedeobra2/images/avance/torrebenefeb2013vlc2.jpg"></a>
</div>
</div>
</div>
</div>
ご覧のとおり、これは私のファンシーボックスからの私のhtmlです。
JQUERY:
function clickfotovid(){
$("#pois div").click(function() {
eldiv = $(this).find('div').find('div').html()
//eltamano = eldiv.length;
//alert(eldiv)
/*if(eltamano > 97){
slidershow(1,eldiv)
}
else{
slidershow(0,eldiv)
}*/
fancyboxftw(eldiv)
});
}
function fancyboxftw(html){
$("#cargastuff").html("");
$("#cargastuff").wrapInner("<div id='sliderimg'></div>")
$("#sliderimg").html(html)
$("#sliderimg a").each(function () {
if ($(this).has('img').length) {
$(this).fancybox();
$("#sliderimg a:first").trigger('click')
}
});
}
何か案は?何が起こっている?ちなみに、親divの両方が非表示になっています。
編集:したがって、問題は、ギャラリーを実行する代わりに両方を表示するだけの2つ以上の画像がある場合でした。
編集2:
Fancybox は機能しますが、ギャラリーに画像が 1 つしか表示されません:/
編集3:
まだ何もない:/
編集4:
こちらがjsfiddle http://jsfiddle.net/yZ7N5/