画像をクリックすると、 Pinterestと同じ効果を作成したいと思います。モーダルウィンドウが開きますが、ページのURLも変更されます。この最後の部分は非常に重要です。ブラウザのアドレスバーのURLは変更されていますが、元のページのコンテンツはバックグラウンドで表示されます（そのため、それよりもはるかに複雑な場合でも、モーダルと呼んでいます）。私は理想的にはjQueryソリューションを探しています。
[編集]もちろん、Pinterestの動作は[戻る]ボタンを壊さないことを付け加えておきます。これもまた重要です。
これは、 Pinterestが独自のモーダルルックを実現する方法と、それを複製する方法についての私の評価です。
何よりもまず、URLリンクの処理はサーバー側で分析され、リンクがPinterestサイト自体から発信されているかどうかが確認されます。とはいえ、ブラウザのURLアドレスバーと履歴は動的に作成され、訪問者によって実際に実行されることはありません。
明確にするために：アドレスバーは、モデル体験が行われているときの実際の場所ではありません！これを証明するには、Pinterestオブジェクトをクリックし、モーダルビューでアドレスバーに移動し、そのURLの場所の最後にマウスカーソルを置いて、Enterキーを押します。次に、その場所にリダイレクトします。ホームページを離れたことがないことをさらに確認するには、Firebug/Firefoxの[ネット]タブまたはChromeの[ネットワーク]タブを表示します。
次の方法は、Pinterestがホームページにアクセスしたときに実行する方法です。生意気に見てください：
#zoomScroll。Pinterestが使用するモデル効果を再現するために、HTML/iframedコンテンツをサポートするさまざまなライトボックスを調査します。上記のプロセスの番号付きの手順を確認すると、Webサイトの目的の外観を実現する方法がわかります。
重要なステップは、すべてのビューポートを使用するようにライトボックスを設定し、必要に応じてライトボックスのCSSルールを変更して、閉じるボタンのスキングラフィックスと境界線を回避することです。
ライトボックスは、 AJAXによって入力された単一のテンプレートファイルを使用できます。div上記divは、半透明の背景のビューポートの水平方向の中央に配置されます。iframe自体は透過的であるため、基になるホームページが透けて見えます。
Pinterestに似たいくつかのスクロールルールを投入すると、適切なクローンメソッドを使用できます。
PinterestのWebページのレイアウトを複製する限り、このSOAnswerを参照してください。
テキストリンク、サムネイル、または両方の組み合わせであるカスタムPinterestボタンを使用するには、このSOAnswerを参照してください。
jsFiddleチュートリアルを使用したデータスクレイピングPinterestプロセスについては、このSOAnswerを参照してください。
arttronicsの回答にコメントするのに十分な担当者がいませんが、これを追加したいと思います。
ブラウザバーは、新しいHTML5の履歴を介して操作されます。この特定のケースは、次の方法で実行できます。
window.history.pushState({}, "Some Title", "the url")
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history/#The_pushState().C2.A0method
この男はこのピンタレストスタイルと呼んでいます
しかし、モーダルウィンドウの開口部は異なって見えます
http://codecanyon.net/item/jquery-pinterest-style-gallery-plugin/2463876
白いオーバーレイを追加できる場合は、見た目です。
これも見て
これも
これは、JQueryモーダルダイアログを使用したコードの例です。
これは実際には概念実証にすぎず、拡張される可能性があります...
ハッシュライブラリを利用すると、URLに基づいて特定の機能を実行し、それらの同じ機能への直接リンクを提供できます。このライブラリは、私たちが関心を持っているすべてのブラウザをサポートしています。
これらのパス定義の一部を単純化する実際のパスルーティングライブラリも存在します。
prettyPhotoはどうですか？URLに#prettyPhoto[gallery]/x/を追加します。