2012-04-02 9 views
0

Google画像検索のような画像プレビュー機能を実装するにはどうすればよいですか?サムネイルをクリックすると、Googleはバックグラウンドでウェブサイトのプレビューを表示し、フォアグラウンドで画像をプレビューします。GoogleとLightbox +のような画像プレビュー機能Iframe

Lightbox/Fancybox(またはそのクローン)とiframeオプションを使用することは可能ですか?提案や解決策はありますか?

+0

:以下の例を試してみてください。 //userlogos.org/node/4924&docid=agRsH34bP-1G7M&imgurl=http://userlogos.org/files/logos/pek/stackoverflow2.png&w=300&h=225&ei=E016T-_aKI_EtAbOtJj6AQ – Ali

+0

ライトボックスを閉じるとどうなりますか?ページに留まるか、画像が配置されているページにリダイレクトされますか? – JFK

+0

Googleでは、画像ウィンドウが閉じられると、画像が配置されているページにページがリダイレクトされます。 – Ali

答えて

0

このタイプのライトボックスの作成は簡単です。 Lightbox/Fancyboxを使用する必要はありません。 あなたがモデルのために使用することができ、このオンラインの多くの例が実際にある...例えば私はこの1つだけ http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

を見つけた私は、一般的に、ポップアップのようなもののこのタイプのために何をすべきかのdivを作るです次のプロパティを持つ:

position:fixed; 
top:left; 
height:100%; 
z-index:(something high); 
background-color:rgba(255,255,255,0.8); 
display:none; 

これは、半透明層とのページをカバーする、または私は一般的に幕を表示するために何をすべきか カーテンだろう「ディスプレイ:なし」に設定機能添付で表示」にします:ブロック "(または、jqueryの.toggle()をページのどこかのクリックイベントに使用します)。

ポップアップの内容もdisplay:noneとして初期化されていることを確認してください。 CSSの

私はdivの内部に画像を置いて、position:absoluteで配置します。

私はカーテン/ポップアップここで、このページで、このタイプの... HTTPを使用:EDIT 「選択し詳細はこちらをクリックして」//asdf.us/imgrid/greatgrids クリックして

:あなたのコメントを読んだ後で、これはライトボックス付きのiframeを使用することに関するものです。いくつかのサイト(たとえばstackoverflow.comなど)ではiframeのリンクが許可されていないため、iframeの使用には注意が必要です。 http://www.google.com/imgres?tbnid=kPx4DAW9zSohZM:&imgrefurl=http:私はこのボックスと前景、元のように画像内の別のページの内容を表示したい

<html><head><style> 
iframe, #curtain{ 
position:fixed; 
top:0; 
left:0; 
width:100%; 
height:100%; 
} 
#curtain{ 
background-color:rgba(255,255,255,0.8); 
z-index:10; 
text-align:center; 
} 
#theimg{ 
padding:20px; 
border:1px solid black; 
} 
</style> 
</head> 
<body> 
<iframe src="http://en.wikipedia.org/wiki/Stack_overflow"></iframe> 
<div id="curtain"> 
    <img id="theimg" src="http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/220px-Wikipedia-logo-v2.svg.png"></img> 
</div> 
</body></html> 
+0

私のコメントを確認してください、ありがとう。 – Ali

+0

私はこのコードで私の以前の答え – pepperdreamteam

+0

を更新しました。画面のサイズよりも高さが高く、位置がない画像には問題があります。画像が正しく表示されません。 – Ali

関連する問題