плагин лайтбокса jQuery, прокручивающий страницу - PullRequest
Новая
       7

плагин лайтбокса jQuery, прокручивающий страницу

3 голосов
/ 21 января 2010

Некоторые из эффектов лайтбокса JavaScript, которые я видел, позиционируют лайтбокс по отношению к области просмотра, поэтому при прокрутке страницы вы все равно увидите лайтбокс.

Другой вид - это те, которые расположены относительно содержимого страницы. Если вы прокручиваете страницу, содержащую один из них, лайтбокс перемещается вместе с остальной частью страницы.

Я не знаю, как называется этот второй тип (или есть ли термин для этого поведения).

Я смотрел на FancyBox и SimpleModal , но, насколько я знаю, они расположены только относительно области просмотра.

Какой плагин jQuery позволяет создавать лайтбоксы, прокручиваемые вместе со страницей?

Ответы [ 4 ]

5 голосов
/ 21 января 2010

это было бы на самом деле до CSS.

лайтбоксы - это просто элементы div, которые расположены абсолютно (они перемещаются вместе со страницей) или фиксированы (они расположены относительно окна браузера.

Базовый лайтбокс HTML

<div class="lightbox_wrapper">
<div class="lightbox">
содержимое лайтбокса, загруженное ajax
</div>
</div>

Базовый CSS для прокрутки лайтбокса

div.lightbox {height: 250px; ширина: 250px; Маржа: авто; позиция: относительная; }
div.lightbox_wrapper {height: 250px; ширина: 100%; топ: 200px; слева: 0 позиция: абсолютная; }

Базовый CSS для фиксированного видового экрана

div.lightbox {height: 250px; ширина: 250px; Маржа: авто; позиция: относительная; }
div.lightbox_wrapper {height: 250px; ширина: 100%; топ: 200px; слева: 0 позиция: фиксированная; }

Теперь я считаю, что большинство распространенных лайтбоксов заставляют вас включать их css или они добавляют их в DOM при загрузке. Если они, как и вы, включают файл CSS, то просто найдите класс, который объявляет свойства лайтбокса, и измените метод position. в противном случае вам придется добавить значения в ваш собственный CSS и объявить их такими важными.

Свойство CSS помечено как важное

div.lightbox_wrapper {height: 250px; ширина: 100%; топ: 200px; Слева: 0 позиция: фиксированная ! важный; }

Что касается другого вида лайтбокса, я его не видел, поэтому вам придется объяснить больше в комментарии ниже ...

0 голосов
/ 05 февраля 2014

Я ценю, что это старый вопрос, однако я видел, что гуру JS в designmodo очень хорошо реализовали эту версию:

http://designmodo.com/startup/#component-grid

Посмотрите на функцию showLargeImage в файле all.js.

0 голосов
/ 05 августа 2013

отредактируйте свой лайтбокс CSS, как показано ниже 

#lightbox {
  position: fixed;
}

чтобы центрировать всплывающее окно лайтбокса в окне, отредактируйте скрипт, как показано ниже 

top = ($window.height()- YOUR_LIGHT_BOX_HIGHT) / 2;

Я использовал Lightbox v2.51 и работал хорошо. единственная проблема заключается в том, что пока фон прокручивается, а всплывающее окно фиксируется и центрируется.

0 голосов
/ 22 января 2010

Роберт Херст прав в теории, но если вам нравится FancyBox, он поддерживает оба режима через конфигурацию

Если вы посмотрите внизу страницы http://fancybox.net/howto, у нее есть опция

centerOnScroll Если true, контент центрируется, когда пользователь прокручивает страницу

вот пример того, как вы бы вызвали его: 

jQuery(document).ready(function(){
    $('#a').fancybox({
      centerOnScroll: false
    });
});
...