Google画像検索のような画像プレビュー機能を実装するにはどうすればよいですか?サムネイルをクリックすると、Googleはバックグラウンドでウェブサイトのプレビューを表示し、フォアグラウンドで画像をプレビューします。GoogleとLightbox +のような画像プレビュー機能Iframe
Lightbox/Fancybox(またはそのクローン)とiframeオプションを使用することは可能ですか?提案や解決策はありますか?
Google画像検索のような画像プレビュー機能を実装するにはどうすればよいですか?サムネイルをクリックすると、Googleはバックグラウンドでウェブサイトのプレビューを表示し、フォアグラウンドで画像をプレビューします。GoogleとLightbox +のような画像プレビュー機能Iframe
Lightbox/Fancybox(またはそのクローン)とiframeオプションを使用することは可能ですか?提案や解決策はありますか?
このタイプのライトボックスの作成は簡単です。 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>
私のコメントを確認してください、ありがとう。 – Ali
私はこのコードで私の以前の答え – pepperdreamteam
を更新しました。画面のサイズよりも高さが高く、位置がない画像には問題があります。画像が正しく表示されません。 – Ali
:以下の例を試してみてください。 //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
ライトボックスを閉じるとどうなりますか?ページに留まるか、画像が配置されているページにリダイレクトされますか? – JFK
Googleでは、画像ウィンドウが閉じられると、画像が配置されているページにページがリダイレクトされます。 – Ali