web-dev-qa-db-ja.com

Pinterestのウェブサイトのモーダル効果を複製するにはどうすればよいですか？

画像をクリックすると Pinterest と同じ効果を作成したい：モーダルウィンドウが開きますが、ページのURLも変更されます。この最後の部分は非常に重要です。ブラウザのアドレスバーのURLが変更されましたが、元のページのコンテンツがバックグラウンドで表示されています（そのため、それよりもはるかに複雑な場合でも、モーダルと呼んでいます）。私は理想的にはjQueryソリューションを探しています。

[編集]もちろん、Pinterestの動作は[戻る]ボタンを壊さないことを付け加えておきます。これもまた重要です。

jquerymodal-dialogpinterest
32
Sébastien

これは、Pinterestが独自のモーダルルックを実現する方法と、それを複製する方法についての私の評価です。

何よりもまず、URLリンクの処理はサーバー側で分析され、リンクがPinterestサイト自体から発信されているかどうかを確認します。とはいえ、ブラウザのURLアドレスバーとHistoryは動的に作成され、実際には実行されません訪問者によって実行されます。

明確にするために：アドレスバーは、モデル体験が行われているときの実際の場所ではありません！これを証明するには、Pinterestオブジェクトをクリックし、モーダルビューでアドレスバーに移動してそのURLの場所の最後に、マウスカーソルを置き、次にクリックしてEnterをクリックします。次に、リダイレクト自分でその場所に移動します！ホームページを離れたことがないことをさらに確認するには、Firebug/FirefoxのNet TabまたはChromeのNetwork Tabを表示します。

次の方法は、ホームページにアクセスしたときにPinterestが実行していることです。生意気に見てください：

  1. ホームページを表示します。
  2. 訪問者がPinterestオブジェクトをクリックするのを待ちます。
  3. クリックされたオブジェクトには、直接アクセスするための固有のWebページがあります。
  4. クリックされたオブジェクトはフォローされません。
  5. ブラウザバーには、このクリックされたオブジェクトの場所が表示されますが、実際にはそこにはありません。
  6. ブラウザの履歴は、JavaScrictまたはサーバーサイド処理を介してクリックされた場所を受け取ります。
  7. AJAXは、オブジェクトのページからデータの一部（IDを介したモーダルの肉）をロードします。 HTTPRequestを介して検証可能。
  8. メインページでクリックされたオブジェクトが消えました（これはInspect Elementで確認できます）。
  9. AJAXプロセスは、そのデータを画面の中央に白いオーバーレイで配置します。
  10. AJAX "モーダル"データが#zoomScrollを介してスクロールイベントを受信して​​いる間、メインページのスクロールは無効になります。
  11. モーダルバックグラウンドをクリックすると、オブジェクトがWebページに戻り、URLアドレスバーが「視覚的に」元に戻ります。

モデル効果Pinterestの使用法を再現するには、HTML/iframedコンテンツをサポートするさまざまなライトボックスを調査します。上記のプロセスの番号付きの手順を確認すると、Webサイトの目的の外観を実現する方法がわかります。

重要なステップは、すべてのビューポートを使用するようにライトボックスを設定し、必要に応じてライトボックスのCSSルールを変更して、閉じるボタンのスキングラフィックと境界線を回避することです。

ライトボックスは、AJAXによって入力されたdivを含む単一テンプレートファイルを使用できます。上記のdivは、半透明の背景のビューポートの水平方向の中央に配置されます。 iframe自体は透過的であるため、基になるホームページが透けて見えます。

Pinterestと同様のスクロールルールをいくつか投入すると、適切なクローンメソッドを使用できます。

PinterestWebページのレイアウトを複製する限り、これを参照してください SO Answer 。

カスタムPinterest Buttonを使用するにはtext-link、サムネイル、または両方の組み合わせ、これを参照 SO Answer 。

Data Scrape PinterestjsFiddleチュートリアルを使用したプロセスについては、こちらをご覧ください SO Answer 。

50
arttronics

Arttronicsの回答にコメントするのに十分な担当者がいませんが、これを追加したいと思います。

ブラウザバーは、新しいHTML5の履歴を通じて操作されます。この特定のケースは、次の方法で実行できます。

window.history.pushState({}, "Some Title", "the url")

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history/#The_pushState（）.C2.A0method

10
Jspies

これは、JQueryモーダルダイアログを使用したコードの例です。

http://jsfiddle.net/aDCQL/2/

これは実際には概念実証にすぎず、拡張される可能性があります...

ハッシュライブラリを利用すると、URLに基​​づいて特定の機能を実行し、それらの同じ機能への直接リンクを提供できます。このライブラリは、私たちが関心を持っているすべてのブラウザをサポートしています。

これらのパス定義の一部を単純化する実際のパスルーティングライブラリも存在します。

https://github.com/cowboy/jquery-hashchange

1
r0m4n

この男はこのピンタレストスタイルと呼んでいます

しかし、モーダルウィンドウの開口部は異なって見えます

http://codecanyon.net/item/jquery-pinterest-style-gallery-plugin/2463876

白いオーバーレイを追加できる場合は、見た目です。

これも見て

http://hasin.me/2012/03/10/building-a-Nice-image-gallery-like-pinterestfriendsheet-using-facebook-graph-api-and-lightbulb/

これも

http://www.asual.com/jquery/address/

1
zod

prettyPhoto はどうですか？ URLに#prettyPhoto [gallery]/x /を追加します。

0
John Koerner