закрыть

Этот сайт создан автотуристами для автотуристов. Здесь можно выкладывать отчеты о походах и экспедициях, статьи по тематике сайта, новости. Этот сайт не принадлежит какому-либо спортивному или туристическому клубу, организации и т.д. посему никакой дискриминации по клубному признаку. Мы рады видеть у себя представителей всех клубов, конфессий и концессий. Не будем притеснять и наших двухколесных братьев – мотоциклистов, а так же автоспортсменов и вообще всех кому интересны путешествия с использованием механических транспортных средств. Сайт не преследует коммерческих целей, если и будет какая реклама, то только чтобы заплатить за хостинг и домен.

 

О проекте

Создать PDF Печать

Как использовать эффект LightBox?

Автор:
Super Administrator
Дата добавления:
05.03.2009

Ответ

1. Предположим, что есть изображение image.jpg размером 800х600 точек, которое мы хотим показать в своей статье, однако ширина страницы на сайте не позволяет нам это сделать корректно. В этом случае нам поможет использование эффекта lightbox.

Продемонстрирую на примере:
С помощью пиктограммы (закладка "Закачать") загружаем на сайт изображение image.jpg, в закладке "Информация об изображении" ставим размер 160х120. 
В окне редактора появилось уменьшенное изображение image.jpg. Переключаемся в режим редактирования html (пиктограмма  ), видим тэг, отвечающий за вывод изображения: <img alt="" width="160" height="120" src="images/stories/{username}/image.jpg" />  (здесь и везде {username} это ваш логин на сайт/форум)  

Приводим его к виду: <a rel="lightbox;width=800;height=600;" href="images/stories/{username}/image.jpg"><img alt="" width="160" height="120" src="images/stories/{username}/image.jpg" /></a>
Выключаем режим редактирования html, сохраняем материал.
Теперь при нажатии на изображение image.jpg мы видим его размером 800х600.
Проблема решена.

 

Добавить комментарий к изображению можно с помощью параметра title: <a title="Название фотографии" rel="lightbox"...>. Комментарий будет показываться не только при наведении указателя на миниатюру, но и при показе большой фотографии.

При необходимости выравнивания изображения относительно текста надо поместить его внутрь тэга <div>, например:
<div style="float:right;"> ... тэг, выводящий изображение ... </div>

2. Если вы хотите объединить фотографии, расположенные на странице, в галерею, надо добавить во все строки, выводящие нужные вам изображения параметр group: rel="lightbox[group];"

3. Чтобы поместить на страницу flash video с youtube надо вставить в исходник страницы следующий html тэг: <a rel="lightbox; width=480; height=295;" title="video" href="http://www.youtube.com/v/V8sRLVQIFsE&amp;hl=ru&amp;fs=1&amp;autoplay=1">Нажмите здесь, чтобы посмотреть видео</a>, разумеется со своей ссылкой и размером клипа. Необходимые для этого данные можно взять со страницы вашего клипа на youtube.com

Результат работы тэга из примера: Нажмите здесь, чтобы посмотреть видео. (клип для примера был выбран наугад)

Категория