1

次/前を有効にするデモと同じように、画像の周りのリンクに data-fancybox-group 属性が設定されたこの html がありますが、機能していません。ボタン js と css を含めていますが、正しく読み込まれているので、なぜ機能しないのかわかりません。誰でも助けることができますか？

   <ul class="gallery photos">                              

      <li>
        <div>
          <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/amy-robbins/">Amy Robbins</a></h4>
          <div class="photocontent">
            <p>
              <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1.jpg">
            <img class="alignnone size-thumbnail wp-image-1082" title="Homepage-Together" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/amy-robbins/" class="cta">Show image</a>
    </div>

  </li>
  <li>
    <div>
      <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/unicef-hq07-0149indrias-getachew/">Indrias Getachew</a></h4>
      <div class="photocontent">
        <p>
          <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/070149F.jpg">
            <img class="alignnone size-thumbnail wp-image-942" title="070149F" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/070149F-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/unicef-hq07-0149indrias-getachew/" class="cta">Show image</a>
    </div>
  </li>
  <li>
    <div>
      <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/dsc-0103/">DSC 0103</a></h4>
      <div class="photocontent">
        <p>
          <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/DSC_0103.jpg">
            <img class="alignnone size-thumbnail wp-image-943" title="DSC_0103" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/DSC_0103-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/dsc-0103/" class="cta">Show image</a>
    </div>
  </li>
</ul>

スクリプトはこれ以外は完全に機能しています。js は次のとおりです。

$('.homepnl.photo li, .gallery.photos li, .lb-photos').each(function(i,itm){
var photolink = $('.photocontent a',$(itm)).attr('href');
// var title = $('.wp-caption-text',$(itm)).text();

$('a',$(itm)).click(function(evt){
  evt.preventDefault();
});


// $(itm).attr('title',title);
$(itm).attr('href',photolink);
$('.photocontent p a').attr(data-fancybox-group','gallery');

//applying the fancybook plugin to the item. 
$(itm).fancybox({href:photolink, 'autoDimensions': true });

});

これの締め切りは昨日だったので、どんな助けも大歓迎です！

ページはこちら: http://nduna.demo.provokateur.com/media-center/

4

2 に答える 2

5

fancybox OLDER 2.0 VS fancybox 2.0+

Fancybox OLDER 2.0 ( http://fancybox.net/ )

  • グループ化の属性のみ をサポートしているようですrel

Fancybox 2.0+ ( http://fancyapps.com/fancybox/ )

  • rel=属性 &&data-fancybox-group属性の両方をサポート

したがって、2.0 より古いバージョンの fancybox を使用している場合、これはおそらくあなたの問題です :)

于 2013-09-03T09:40:13.120 に答える
0

あなたが見逃しているのは、アンカータグの一致する「rel」属性だと思います。Fancybox のドキュメント ( http://fancybox.net/howto ) から:

注 - ギャラリーは、同じ「rel」タグを持つ要素から作成されます。例:

/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>     

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 

/* This will create two galleries */

$("a.grouped_elements").fancybox();

編集：

したがって、コードから、次のようなことができます (すべての画像に対して):

<a rel="gallery-one" href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1.jpg"><img class="alignnone size-thumbnail wp-image-1082" title="Homepage-Together" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1-200x88.jpg" alt="" width="200" height="88" /></a>

編集2

ページのコンソールで次のコードを実行すると、各画像に次/前のボタンが追加されます。fancybox の動作について 100% 確信があるわけではありませんが、イニシエーターでの jQuery の .attr() セレクターの使用に問題がある可能性があります。

jQuery('.photocontent p a').data('fancyboxGroup','gallery').fancybox();
于 2012-12-07T13:44:04.367 に答える