1

fancybox を初めて使用しましたが、うまくいきません。

私はいくつかのサムネイルを続けて持っていますが、それをクリックすると、リンクの代わりに THUMBNAIL が開き、さらに悪いことに DOM からサムネイルが削除されます。私はこの問題についてfancybox srcを掘り下げましたが、それがたくさんあり、おそらく機能を殺してしまうので、ここに投稿すると思いました.

コードは次のとおりです。

生の HTML は、次のような CMS から取得されます。

<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">

次に、バックボーン ビュー レンダーでいくつかの処理を実行します。重要な部分は次のとおりです。

    var imgs = this.$el.find("img"); //:a jquery group of the img elements above
    this.content = this.$el.find("span.postcontent");
    //empty current
    this.content.empty();
    //make replacement
    for(i= 0;i<imgs.length;i++)
    {

        var curImg = $(imgs[i]);
        var curLink = $("<a/>");
        curLink.attr("href",curImg.attr('data-orig'))
        curLink.append(curImg);
        curLink.on("click",function(e){
            e.preventDefault();
            $.fancybox.open(imgs)
        });
        this.content.append(curLink)
    }

私は今、次のようにhtmlをレンダリングしました:

   <a href="http://blah..blah..flickr..big..001_b.jpg">
    <img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
   </a>
   <a href="http://blah..blah..flickr..big..002_b.jpg">
    <img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
   </a>

これまでのところとても良いです...今、リンク/親指をクリックすると、ファンシーボックスのことを行いますが、リンクされた画像ではなくTHUMBNAILが表示されます。ライトボックスの真ん中に小さく、ページでクリックされたサムネイルが本当に面倒ですそれ自体が dom から完全に削除されました。

       <a href="http://blah..blah..flickr..big..001_b.jpg"> 
         ///THIS IS MISSING COMPLETELY..... ggggggrrrrr 
       </a>
       <a href="http://blah..blah..flickr..big..002_b.jpg">
        <img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
       </a>
4

4 に答える 4

2

Fancybox がそのように使用されているのを見たことがありません。通常、そのようにトリガーする必要はありません$.fancybox.open。タグにバインドするだけfancybox()です<a>。

HTML:

<a href="big-image.jpg" class="fancybox">
    <img src="thumbnail.jpg">
</a>

JavaScript:

$('.fancybox').fancybox();

DOM がそのように見えるようになったら、その関数を使用してみてください。

[編集]

あなたの DOM 操作を完全に機能させることはできませんでしたが、このフィドルでテストしたところ、機能しているようです: http://jsfiddle.net/haRnQ/4/

注:デモ用にスタイルや画像をインポートしていないため、スタイルは解除されますが、それでも機能します。

于 2012-06-13T20:36:00.523 に答える
2

どちらも役に立ちましたが、決定的な答えではなかったので、私は前の2つに答えて投票しています。「グループ」のみをjquery配列として使用する場合、オプションも指定する必要があるため、正しい答えはこれを行うことです（2つの引数を渡します）：

            $.fancybox.open(imgs,
                {
                    href:this.href,
                    title:curImg.attr("title")
                }
            );
于 2012-06-13T21:27:33.947 に答える
1

これを変更してみてください

$.fancybox.open(imgs)

これで

$.fancybox({
 href: this.href
});

これimgsは、サムネイル (すべての<img>要素) のコレクションであり、fancybox に移動されclickますが、閉じた後に元に戻ることはありません。

いずれにせよ、classtoを追加することをお勧めします。<a>そうしないと、ページにある他のアンカーが fancybox を開こうとする可能性があります。

于 2012-06-13T20:37:39.250 に答える
0

Fancybox は画像をアンカーでラップすることを好むと思います。モーダルがアクティブなときにアンカーをクリックしないように、スライド ショーをアクティブ化するときにFancyboxがアンカーを削除するため、これは重要です。

サムから FB を呼び出すと、モーダルが閉じられた後にサムを削除して回復しないことで経験したように動作します。

これは私の典型的な FB セットアップです (サム ギャラリーではありません)。

<a href="image1.jpg" class="fb" rel="fb1"><img src="image1.jpg" alt="" /></a>
<div style="display: none">
    <a href="image2.jpg" class="fb" rel="fb1"></a>
    <a href="image3.jpg" class="fb" rel="fb1"></a>
    ...
</div>
于 2015-04-01T22:04:19.577 に答える