4

クリック時に画像を「クイックルック」する優れたJavaScript / jQueryプラグインはありますか?

シンプルにしたいので、画像のサムネイルをクリックすると、フルサイズにズームアウトします。

理想的には、上記の画像にクラスを与えるだけでセットアップされ、JavaScript/jQuery が残りを行います。

Apple.comのこのページの画像の一部と同様に、[インポート] の下の最初の画像を参照してください。

ライトボックスのような複雑なもの、スライドショー、長い紹介、背景のフェードアウトは必要ありません。

4

3 に答える 3

2

これはあなたが探しているものかもしれません：

http://gettopup.com/

お役に立てば幸いです。

于 2010-02-19T09:39:50.113 に答える
1

jQuery UI ダイアログ プラグインを使用すると非常に簡単です。thumbこれは、クラスが画像のサイズをサムネイル サイズに合わせて、画像に同じ src url を再利用することを前提としています。サムネイルの URL が異なる場合、つまり画像が異なる場合は、フル サイズの画像をサムネイル画像 (カスタム属性?) と共に保存するか、サムネイルの URL をフル サイズの画像の URL に変換する方法が必要です。画像のサムネイルの名前に「_thumb」を追加すると、後者は簡単です。文字列replace関数を使用するだけです。

$('img.thumb').click( function() {
    $('<div><img src="' + $(this).attr('src') + '" /></div>').dialog({
        autoOpen: true,
        modal: true, // if you want it to be modal
        close : function(event,ui) {
             $(this).destroy();
        }
    });
});

http://cs-services.its.uiowa.edu/launchpadで同様の動作を確認できます。左上のお知らせをクリックしてください。

于 2010-02-13T20:42:50.217 に答える
0

私のライトボックスを試すことができますhttp://jslightbox.felixhagspiel.de/ jQuery を必要とせず、レスポンシブで IE8 と互換性があります。-attribute を画像に追加するだけdata-jslghtbxで、クリックすると画像が開きます。代わりに、このような大きな画像への参照を渡すことがdata-jslghtbx='img/lightbox/apple-big.jpg'できるので、ライトボックスで大きなサイズの画像を開くサムネイルに小さなサイズの画像を使用できます。さらに、グループを使用して複数の画像を表示できます。

于 2014-10-23T11:23:28.983 に答える