2011-01-28 8 views
0

私はウェブサイトを持っており、その上にイメージがあります。私が望むもの:イメージをクリックすると、このウィンドウの中にウィンドウを開きたいと思います。私は画像でこれをよく見ます、私はより大きなサイズで見せたいです。jQuery - >ウィンドウ内に新しい小さなウィンドウを開く

サイトにサムネイルがあり、クリックすると背景が灰色になり、大きな画像のあるサイトの上に画像が開きます。

jQueryで可能であれば同じですが、もっと大きな画像とテキストを表示したいと思います。これはどのようにjQueryで行うことができますか?

よろしくお願いいたします。

+0

ファンシーボックスを使用してください。 jqueryライブラリを使用してビルドされました。 http://fancybox.net/ – Tauquir

+0

ライトボックスのjqueryをチェックアウトする:http://leandrovieira.com/projects/jquery/lightbox/ – Kyle

答えて

3

modal dialogは通常、ページ上の他のHTMLの上に置く適切なCSSを持つコンテナです。

これを行うには何百ものjQueryプラグインがあります。 - 2009年11月1日

jQuery Modal Box Round Up - 2009年3月16日

Top 10 jQuery Modal Box Plugins - 2009年12月29日

2009年「

19 jQuery Modal Boxes to Improve your UI:ここではそれらの19を説明した記事です私の好みのモーダルダイアログ "ブログ記事


私は使用などしました:

1

同様のlightboxか何かを考えています。

それを使用するいくつかの方法は、以下の通りである:上記のリンクをご覧ください。詳細については

<script type="text/javascript"> 
$(function() { 
    // Use this example, or... 
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel 
    // This, or... 
    $('#gallery a').lightBox(); // Select all links in object with gallery ID 
    // This, or... 
    $('a.lightbox').lightBox(); // Select all links with lightbox class 
    // This, or... 
    $('a').lightBox(); // Select all links in the page 
    // ... The possibility are many. Use your creative or choose one in the examples above 
}); 
</script> 

prettyPhotoまたはphoto galleryの任意のjqueryプラグインです。

+0

しかし、イメージの右側にイメージを開いてテキストを表示する方法...といくつかの他のHTMLのもの? – Tim

+0

@Tim「デザイン」とは何を意味するのかよく分かりませんか?各プラグインのドキュメントの例に従って、プラグインの動作を確認し、必要に応じて変更してください。 :) – Sotiris

1

簡単な解決策を試してみてください:Fancybox!楽しんで、私はこれがあなたのウェブサイトから欲しいものと長い道のりを歩み、統合が容易であると確信しています!はい、これにはjQueryが必要で、ネイティブのjQueryライトボックスコンポーネントよりも機能が優れています。

1

です。リンクをクリックし、 "例"、 "デモ"をクリックします。

LightBoxもあります。代替jQueryプラグインがあります。

関連する問題