1

Google グループでこの質問に回答がないことがわかり、Fancyboxで同じバグに直面しています。

1 ページに複数の画像ギャラリーがあります。次の前のボタンなどで次の画像に移動すると、他のギャラリーの画像に移動します。

ライトボックスを使用すると、次のようなことができます。

<a href="url" rel="fancybox[gallery1]" >link</a>

画像ギャラリーの gallery1 からすべての画像を取得します。私のアルバムは動的であるため、JavaScript ファイルでは実行できません。

これは可能ですか？

このナビゲーションをどのように制御しますか?

<div class="Album" />
<div class="AlbumImg">
   <a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
   <div id="Gallery0">
      <a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
      <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a>
   </div>
  <div id="Gallery0">
     <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a>
   </div>
   <div id="Gallery0">
      <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a>
   </div>
   <img class="first" src="Tokyo" title="Tokyo" />
   </a>
</div>

<div class="AlbumImg">
   <a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
   <div id="Gallery1">
      <a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
      <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a>
   </div>
  <div id="Gallery1">
     <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a>
   </div>
   <div id="Gallery1">
      <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a>
   </div>
   <img class="first" src="Tokyo" title="Tokyo" />
   </a>
</div>

これは、すべてのアルバムが多数の画像を保持するコードです。最初のアルバムの最後の画像をクリックして次に移動すると、2 番目のアルバムの最初の写真が表示されます。しかし、同じアブの最初の画像に戻りたい

4

2 に答える 2

1

貼り付けたコードには多くのエラーが含まれています...

div同じ を持つ複数のidがあり、属性が引用符内に含まれていません。どちら<div class="AlbumImg">にも一致しない終了タグがあり</a>ます。これがあなたの例にとって重要かどうかはわかりませんが、必ず調べてください。また、Ruben が言ったように、 fancyboxrelはライトボックスと同じように属性でも動作するはずです。

コードは次のようになります。

<div class="albums">
    <div class="gallery1">
        <a href="http://placehold.it/350x150.png" rel="gallery1">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a>
        <a href="http://placehold.it/350x150.png" rel="gallery1">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a>
        <a href="http://placehold.it/350x150.png" rel="gallery1">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a> 
    </div>
    <div class="gallery2">
        <a href="http://placehold.it/350x150.png" rel="gallery2">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a>
        <a href="http://placehold.it/350x150.png" rel="gallery2">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a>
        <a href="http://placehold.it/350x150.png" rel="gallery2">
            <img alt="" src="http://placehold.it/150x150.png"/>
        </a> 
    </div>
</div>

ギャラリーを循環させたい場合は、fancyboxにパラメーターを渡す必要があります。ドキュメントを参照してください。次のようになります。

$(document).ready(function() {
        $('a').fancybox({
            'cyclic':true
        }); 
});
于 2012-06-26T17:51:35.170 に答える
0 
<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg">

これはうまくいくはずですか？それが機能する場合は、「-」を忘れない
でください。jqueryコードを提供できますか？

于 2012-06-26T14:43:01.097 に答える