Вывод любого контента в ulightbox для uCoz

4203 просмотров Alan_Writer 21.03.2015

Нередко при создании сайта или наполнении, для разных целей например экономии места или создания определенного функционала - возникает необходимость вывести какой-то контент в ajax-окне. Можно использовать стандартные uwnd-окна uCoz, а можно использовать (что еще проще) - стандартную функцию ulightbox. То что с помощью нее можно выводить при нажатии на картинку окно с полной картинкой - это наверное многие знают, но точно также можно выводить и любой другой контент.

а) Ну ладно, для начала покажу как с помощью нее сделать чтоб при клике на ссылку выводилось окошко с полным изображением. Просто берем ссылку, в href вставляем собственно ссылку на полное изображение, и добавляем атрибут class="ulightbox", вот примерно так:
Код
<a href="ссылка на картинку" class="ulightbox">текст ссылки или мини-картинка</a>
Получиться что-то типа этого - ларка (кликни).

b) Теперь разберем немного нетипичный вариант, то есть не с картинкой, а с любым блоком и любым контентом. Там лишь немного иначе, создаете блок с любой необходимой информацией, присваиваете этому блоку уникальный id - который нигде на странице больше не должен повторяться, и скрываете его с помощью style="display:none;" - ведь он не должен отображаться пока не будет вызван кликом по определенной ссылке. Выглядеть это должно примерно так:
Код
<div style="display:none;" id="block1">Любая нужная вам информация!</div>

Ну и собственно в нужном месте прописываем эту ссылку, также к ней добавляем атрибут class="ulightbox", но в href вставляем не ссылку, как в первом примере с изображением, а id того блока который мы создали (id прописывается со знаком #). Вот так это должно выглядеть:
Код
<a href="#block1" class="ulightbox">Вызов блока "block1"</a>
И вот пример - ссылка (кликни).

Вот и все, надеюсь объяснил понятно.

Теги: Ajax-окна, вывод, контент, всплывающее окно, ucoz, ulightbox
4 Комментария
avatar
2
В любом случае, спасибо за урок!
avatar
1
Пытаюсь использовать ваш метод для вывода информации о товаре, но, видимо, как раз из-за того, что на главной странице интернет-магазина показано несколько товаров, то в окне лайтбокса выводится не тот товар, по которому кликнул, а рандомный. wacko wacko
Это беда, потому что уже битый час не могу решить этот ребус.
avatar
3
Идентификаторы должны быть разные. То есть у одного блока и ссылки один идентификатор (например block1 как в статье), а у каждого другого - свои разные.