Плагин лайтбокса jQuery, который прокручивается вместе со страницей

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

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

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

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

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


javascript jquery lightbox jquery-plugins
person hekevintran    schedule 21.01.2010    source источник
comment
Что бы вы ни делали, убедитесь, что все работает нормально, если область просмотра меньше, чем размер, выбранный для лайтбокса. В последнее время я столкнулся с несколькими сайтами для отображения фотографий, которые используют лайтбоксы, которые всплывают с большим фиксированным размером, так что часть изображения и даже кнопка закрытия для лайтбокса выходят за пределы области просмотра (и полностью недоступны, если лайтбокс имеет фиксированное положение, что эффективно отключает полосы прокрутки). И, в отличие от собственного графического интерфейса браузера, часто нет возможности масштабировать или прокручивать изображение, поэтому они менее полезны для изображений большого размера, чем то, что они заменяют.   -  person Kevin Reid    schedule 22.01.2010

Ответы (4)


arrow_upward
5
arrow_downward

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

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

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

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

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

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

Базовый CSS для фиксированного лайтбокса в области просмотра

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

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

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

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

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

person Robert Hurst    schedule 21.01.2010
comment
Когда я говорил о втором типе лайтбоксов, я имел в виду последний из двух описанных мной. - person hekevintran; 21.01.2010

arrow_upward
0
arrow_downward

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

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

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

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

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

arrow_upward
0
arrow_downward

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

#lightbox {
  position: fixed;
}

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

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

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

person Lasithds    schedule 05.08.2013

arrow_upward
0
arrow_downward

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

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

Взгляните на функцию showLargeImage в файле all.js.

person dangarfield    schedule 05.02.2014