Захотелось сделать цивильное открытие картинок на сайте во всплывающем окне Lightbox, а не просто target="_blank". С налету задача оказалась невыполнимой - был установлен какой-то плагин 200кб, который работать не хотел, хотя грузился, потом еще и еще....
Прочесывание просторов интернета выдало кучу разнообразных эффектов открытия фото во всплывающем окне - все пляшет, летает, меняет свои размеры на экране. Но, надо понимать, что не попуасы мы - нахера нам все эти бусы, от которых устаешь уже на просмотре 5й фотографии, причем размер загружаемого скрипта имеет прямое отношение к скорости загрузки страницы. Если сама страница 100кб, нахер нужен скрипт, который еще 100-120кб? Это же увеличение времени загрузки сайта в 2 раза!
По ходу дела решение красивого открытия фото во всплывающем окне типа Lightbox найдено, допилено, и приколхожено ко всем компонентам сайта Joomla! (AdsManager, JoomGallery, JoomShopping и форуму SMF) причем само решение открытия фото и картинок во всплывающем окне весит всего аж ..... 10кб! Ощутите разницу!
Описание установки скрипта открытия картинок и фото во всплывающем окне дам применительно к Joomla!, но при наличии клавиатуры приколхозить его можно к чему угодно.
Скачиваем сам lightbox скрипт lightbox и распаковываем в папку:
site.ru\templates\lightbox\
Открываем файл шаблона /templates/папка шаблона сайта/index.php и подключаем скрипт js и стили css:
находим:
<jdoc:include type="head" />
добавляем после:
<script type="text/javascript" src="/templates/lightbox/lightbox.js"></script>
Открываем файл стиля template.css и внизу добавляем следующие стили:
/*LIGHTBOX*/ #lightbox{background-color:#EEEEEE;padding:10px;border-bottom:2px solid #666666;border-right:2px solid #666666;} #lightboxDetails{font-size:0.8em;padding-top:0.4em;} #lightboxCaption{float:left;} #keyboardMsg{float:right;} #closeButton{top:5px;right:5px;} #lightbox img{border:none;clear:both;} #overlay img{border:none;} #overlay{background-image:url(/templates/lightbox/overlay.png);} /*END LIGHTBOX*/
Все - теперь можно использовать lightbox скрипт!
Картинки в материале должны быть офомлены c использованием тега data-fancybox, а полный код с title и alt будет такой:
<a href="images/stories/001-all-other/114-lightbox.png" title="Образец работы скрипта lightbox" data-fancybox target="_blank"><img src="images/stories/001-all-other/114-lightbox_.png" class="image_thumb" alt="Образец работы скрипта lightbox" width="116" height="80" /></a>
А вот результат действия скрипта lightbox открытии картинок во всплывающем окне:
Комментарии
Этот скрипт и на форуме SMF и в Adsmanager и в фотоалерее трудится ...
Дописать только надо в этом маркете где-то rel="lightbox"
ну за исключением того, что нужны 2 картинки
да....
Вот спасибо - бум пробовать...
Попробовал. При первой вставке скрипта ругнулся Апача на ошибку - но более ни разу не повторялось.
И еще. Если в материале ранее стоит просто img без ссылки и твоего скрипта, то далее, если использую скрипт для следующего img, то скрипт не работает.
Правда не всегда....
RSS лента комментариев этой записи