Как я могу дублировать модный эффект веб-сайта Pinterest?

Я хочу создать тот же эффект, что и на Pinterest, когда вы нажимаете на изображение: открывается модальное окно, но URL-адрес страницы также изменяется. Эта последняя часть имеет решающее значение: URL-адрес в адресной строке браузера изменился, но мы по-прежнему видим исходное содержимое страницы в фоновом режиме (поэтому я называю это модальным, хотя это может быть намного сложнее, чем это). Я идеально ищу решение jQuery.

[править] Я должен добавить, что, конечно, поведение Pinterest не нарушает кнопку "Назад", которая, опять же, имеет решающее значение.

ОТВЕТЫ

Ответ 1

Это моя оценка того, как Pinterest достигает уникального модального вида и того, как его дублировать.

В первую очередь обработка URL-ссылок проанализирована на стороне сервера, чтобы узнать, происходит ли ссылка с самого сайта Pinterest. При этом динамическая структура Адресная строка URL-адресов браузера и История динамически создается и не выполняется посетителем.

Чтобы уточнить: Адресная строка не является фактическим местом, где вы находитесь, когда происходит опыт модели! Чтобы доказать это, нажмите объект Pinterest, и когда в режиме мода перейти в адресную строку и в конце этого URL-адреса разместите свой курсор мыши strong → нажмите. Затем вы перенаправляете на это местоположение! Для дополнительной проверки, что вы никогда не покидали домашнюю страницу, просмотрите вкладку "Сеть" в Firebug/Firefox или вкладке "Сеть" в Chrome.

Следующий метод - это то, что делает Pinterest при посещении домашней страницы. Пожалуйста, смотрите осторожно:

  • Показать домашнюю страницу.
  • Подождите, пока посетитель нажмет на объект Pinterest.
  • Объект с кликом имеет уникальную веб-страницу для прямого доступа.
  • Объект с кликом не выполняется.
  • Панель браузера будет заполнена этим местоположением щелкнутых объектов, но на самом деле это не так.
  • История браузера получит щелкнув местоположение через обработку JavaScrict или Server-side.
  • AJAX загрузит кусок данных (мясо модального через ID) с объектной страницы. Подтверждаем через HTTPRequest.
  • Объект с щелчком на главной странице исчез (это можно проверить с помощью элемента Inspect).
  • Процесс AJAX поместит эту часть данных в центр экрана с белым наложением.
  • Прокрутка главной страницы отключена, а "модальные" данные AJAX получают события прокрутки через #zoomScroll.
  • При нажатии модального фона возвращается объект на веб-страницу, а адресная строка URL-адреса "визуально" возвращается.

Чтобы воссоздать эффект модели Pinterest, я бы исследовал различные лайтбокс , поддерживающие HTML/iframed. Просмотр пронумерованных шагов выше процесса покажет, как добиться желаемого поиска вашего сайта.

Ключевым шагом было бы установить лайтбокс для использования всего окна просмотра, изменяя правила CSS для лайтбокса, если это необходимо, чтобы избежать любой скрытой графики и границ закрытой кнопки.

Затем лайтбокс может использовать файл с одним шаблоном с div, который заполняется AJAX. Указанный div горизонтально центрируется в окне просмотра на полупрозрачном фоне. Сам iframe является прозрачным, что позволяет показывать основную домашнюю страницу.

Введите несколько правил прокрутки, похожих на Pinterest, и у вас есть приличный метод клонирования.

Что касается дублирования Макет страницы Pinterest, см. этот SO-ответ.

Чтобы использовать пользовательскую кнопку Pinterest, содержащую текстовую ссылку, миниатюру или комбо, см. это SO ответ.

Для процесса Сброс данных Pinterest с помощью учебника jsFiddle см. этот SO-ответ.

Ответ 2

У меня недостаточно комментариев, чтобы прокомментировать ответ arttronics, но я хотел бы добавить это:

Панель браузера управляется с помощью новой истории HTML 5. Этот конкретный случай можно сделать с помощью:

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

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history/#The_pushState().C2.A0method

Ответ 3

Этот парень назвал этот стиль pinterest

но открытие модального окна выглядит иначе

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/

Ответ 4

Вот пример с небольшим количеством кода с модальным диалогом JQuery.

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

Это действительно просто доказательство концепции и возможно расширение...

Используя хэш-библиотеку, вы можете выполнять определенные функции на основе URL-адреса и предоставлять прямые ссылки на те же функции. Эта библиотека поддерживает все браузеры, о которых мы заботимся.

Существуют также существующие библиотеки маршрутизации маршрутов, которые также упрощают некоторые из этих определений путей.

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

Ответ 5

Как насчет prettyPhoto? Он добавляет #prettyPhoto [gallery]/x/к URL-адресу.