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