|
Lightbox2
|
Lightbox2 является простым, ненавязчивым сценарием, который используется для наложения изображения на текущей странице. Легкая настройка и работает на всех современных браузерах. =Использование= Часть 1 - Установка 1. Lightbox2 использует Prototype Framework и Scriptaculous библиотеки. Вам нужно будет включить эти три Javascript файлы в ваш заголовок (в этом порядке). <script type="text/javascript" src="js/prototype.js"> </script > <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"> </script > <script type="text/javascript" src="js/lightbox.js"> </script > 2. Включить Lightbox2 CSS файл (или добавить к вашим стилям Lightbox2 CSS). <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 3. Проверить CSS и убедитесь, что ссылки prev.gif и next.gif файлы в нужном месте. Кроме того, убедитесь, что loading.gif и close.gif файлы, как ссылки вверху lightbox.js файл в нужном месте. Часть 2 - Активация 1. Добавить rel="lightbox" атрибут для любой ссылки для подключения Lightbox. Например: <a href="images/image-1.jpg" rel="lightbox" title="my caption"> изображения # 1 </ A> Дополнительно: Используйте title атрибут, если вы хотите показывать подписи. 2. Если у вас есть набор соответствующих картинок, которые вы хотели бы сгруппировать, выполните шаг 1, но дополнительно включите имя группы в квадратные скобки. Например: <a href="images/image-1.jpg" rel="lightbox[roadtrip]"> изображения # 1 </ A> <a href="images/image-2.jpg" rel="lightbox[roadtrip]"> изображение # 2 </ A> <a href="images/image-3.jpg" rel="lightbox[roadtrip]"> изображение # 3 </ A> Нет ограничений на количество групп и количество изображений в группе для страницы. Суть проблемы: При использовании скрипта под названием Lightbox версии 2, наблюдается ошибка с отображением. @Не удается загрузить страницу. Операция прервана@ Решение: Изменить местоположение вызова скриптов. Данные скрипты (кроме CSS) расположить в конце страницы перед закрывающим тегом </BODY> <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="/js/lightbox.js"></script> </body> |
|