1

ギャラリーを設定していますが、解決方法がまったくわからないという小さな問題があります。これが私のプロジェクトをどのように構築したかです：

  • サムネイルをクリックすると、いくつかの情報を含む標準のインライン ファンシー ボックスが起動します
  • 各インライン ファンシー ボックス内には、次のようにファンシー ボックス イメージ ギャラリーへの手動トリガーがあります。
<a id="galerie'.$projet->id.'" href="#" onclick="$(\'a#proj'.$projet->id.'\').eq(0).trigger(\'click\'); return false;"><img src="img/ico_img.png" alt="images"> Galerie d\'images</a>

ギャラリーに画像が1つしかない2つのプロジェクトを除いて、すべて正常に動作します（私の開発Webサイトで確認できます）。 「Quartiersnords de Valenton」および「Complexe sportif de l'aviation」を参照）。これらのプロジェクトで何が起こっているのか、1 つの画像を表示するとファンシーボックス ギャラリーが壊れてしまう理由がわかりません...

これが私のコードです：

echo '
<div class="centreur">
<div class="wrapper">
<span class="thumb"><a href="#info'.$projet->id.'" class="fancybox-info" title=""><img class="thumbnail" src="img/projets/'.$image0['id'].'-'.$image0['projet'].'.jpg" alt="'.$projet->titre.'"/></a></span>
<div class="caption">'.$projet->titre.'</div>
</div>
<div class="hidden">
<div id="info'.$projet->id.'" style="min-width:400px;max-width:400px;" class="descrframe">
<h2>'.$projet->titre.'</h2>'.$prix.'
<div>
<center><img class="firstslide" src="img/projets/'.$image0['id'].'-'.$image0['projet'].'.jpg" alt="'.$projet->titre.'"/></center>
</div>
<div class="linkstyle"><a id="galerie'.$projet->id.'" href="#" onclick="$(\'a#proj'.$projet->id.'\').eq(0).trigger(\'click\'); return false;"><img src="img/ico_img.png" alt="images"> Galerie d\'images</a></div>
<table class="transtable"><tbody>
'.$ville.$pays.$maitrise.$equipe.$mandataire.$cout.$superficie.$date.'
</tbody></table>
</div>';
$i = 0;
foreach($images as $image){
$galid = $i == 0 ? 'id="proj'.$projet->id.'"' : '';
echo '<a href="img/projets/'.$image->id.'-'.$image->projet.'.jpg" class="fancybox-thumb" rel="proj'.$projet->id.'" title="'.$image->credit.'" '.$galid.'></a>';
$i++;
}
echo '</div></div>';
}

そして、ここに私のファンシーボックスの設定があります:

$(".fancybox-thumb").fancybox({
    prevEffect  : 'elastic',
    nextEffect  : 'elastic',
    openEffect  : 'fade',
    closeEffect : 'fade',
    margin      : [120,50,500,50],
    padding     : [0,0,0,0],
    loop        : false,
    maxWidth    : 900,
    maxHeight   : 600,
    topRatio    : 0.5,
    openOpacity : true,
    closeOpacity: true,
    beforeShow: function(){
        $.fancybox.wrap.bind("contextmenu", function (e) {
                return false;
        });
        }
    helpers : {
        title : {
            type : 'outside'
        },
        overlay : {
            opacity : 0.9,
            css : {
                'background-image' : 'url(img/pattern.png)',
                'background-color' : 'rgba(0,0,0,0.8)'
            }
        },
        thumbs  : {
            width   : 50,
            height  : 50,
            position: 'bottom'
        }
    }
});

$(".fancybox-info").fancybox({
    prevEffect  : 'elastic',
    nextEffect  : 'elastic',        
    openEffect  : 'fade',
    closeEffect : 'fade',
    margin      : [120,50,50,50],
    padding     : [0,0,0,0],
    loop        : false,
    maxWidth    : 900,
    maxHeight   : 600,
    topRatio    : 0.5,
    openOpacity : true,
    closeOpacity: true,
    beforeShow: function(){
        $.fancybox.wrap.bind("contextmenu", function (e) {
                return false;
        });
        },
    helpers : {
        overlay : {
            opacity : 0.9,
            css : {
                'background-image' : 'url(img/pattern.png)',
                'background-color' : 'rgba(0,0,0,0.8)'
            }
        }
    }
});

それが重要な場合は、fancybox v2.1.3 と jquery v1.7.2 を使用します。

この奇妙な動作を解決するためにどこを見ればよいかわからないので、どんな助けも大歓迎です! 前もって感謝します！クプチェ

PS: 私はフランス人なので、下手な英語を許してください :)

4

0 に答える 0