2

サムネイルが表示され、クリックすると関連するGIFが読み込まれ、ファンシーボックスに表示される愚かなGIFギャラリーを作成しています。

私が持っているファンシーボックスのコードは次のとおりです。

$(".fancyGIF").fancybox({
        arrows: false,
        openEffect: 'elastic',
        openSpeed: 150,
        closeEffect: 'elastic',
        closeSpeed: 150,
        closeClick: true,
        onStart: function(){
            $("img").width("400");
        },
        helpers: {overlay : null}
    });

多くのonStart:GIF は非常に小さいため、元のサイズよりも 150% または 200% 大きくロードしたいので、イメージを元のサイズよりも大きくロードしようとしています。これどうやってするの？私は多くのことを試しました:(

編集:さらに調査した結果、 onStart 関数がまったく機能していないように見えます。これにより、結果が得られない理由が説明されます。私はconsole.log('foobar');そこに入れましたがalert('whipcrackaway');、結果はまったくありません。理由がわかりません。エラーも一切ありません。

4

2 に答える 2

3

まず、コードで fancybox v2.x API オプションを使用しているので、そのバージョンを使用していると思いますね。

次に、最初の仮定が正しければ、それonStartは有効な fancybox v2.x オプションではなく v1.3.x です (fancybox v2.x オプションは新しく、以前のバージョンと互換性がありません)。

3 番目に、いくつかの計算を行い、2 つの要素のサイズを変更する必要があります。それは、fancybox コンテナーと、fancybox コンテナー内の画像です。

このリンクで 150x150px の画像にリンクしていることをイメージしてください

<a class="fancyGIF" href="myGIFimage150x150.gif">open bigger size at 200% (300x300px)</a>

...そして、たとえば元のサイズの 200% で fancybox に表示したい場合は、次のbeforeShowようなコールバック でこのカスタム スクリプトを設定します。

$(".fancyGIF").fancybox({
  beforeShow: function () {
    // set new fancybox width
    var newWidth = this.width * 2;
    // apply new size to img
    $(".fancybox-image").css({
      "width": newWidth,
      "height": "auto"
    });
    // set new values for parent container
    this.width = newWidth;
    this.height = $(".fancybox-image").innerHeight();
  }
});

の値を変更してvar newWidth = this.width * 2;、必要なサイズを設定します。

JSFIDDLEを参照してください

注：これはfancybox v2.1.3+用です（自己責任で使用してください;）

于 2013-01-08T17:47:43.570 に答える
0

onStart はコンテンツがロードされる前に実行されるため、画像はまだ「存在」していません。

まず、最新バージョンの Fancybox 2 を入手することをお勧めします (onStart は fancybox 1.3 の機能であることがわかりました): http://fancyapps.com/fancybox/

次に afterLoad コールバック関数を使用します。

$(".fancyGIF").fancybox({
    afterLoad: function(current, previous) {
        current.inner // points to the new content
            .find('img').css({width: '200%'});
    }
});

これにより、すべての画像が 2 倍のサイズに拡大されます。ピクセル値を設定して、すべての画像が同じサイズになるようにすることもできます。または、別の関数を指定して条件付きにします。

$(".fancyGIF").fancybox({
    afterLoad: function(current, previous) {
        var $img = current.inner.find('img');
        $img.css({width: normaliseWidth($img)});
    }
});

function normaliseWidth($img) {
    var width = $img.width();
    if (width < 100) { // if smaller then 100px
        return (width * 2) +'px'; // blow up to twice the size
    } else {
        return width +'px';
    }
}

- 編集 -

このhtmlを使用

<a href="http://upload.wikimedia.org/wikipedia/commons/9/9d/Animalien-smiley.gif" class="fancyGIF">
    <img src="http://upload.wikimedia.org/wikipedia/commons/9/9d/Animalien-smiley.gif" alt="alien" />
</a>

ここで動作することがわかります: http://jsfiddle.net/pT7jC/1/ console.log を追加したことに注意してください。開発者コンソールを開くと、ログに記録された "current" の内容が表示されます。これは、あらゆる種類の有用な情報を含むオブジェクトです

于 2013-01-08T11:31:21.397 に答える