Последние темы на форуме:

4.0058479532164 1 1 1 1 1 Рейтинг: 4.01 (171 голосов)

Оглавление:

lightbox  Захотелось сделать цивильное открытие картинок на сайте во всплывающем окне 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 открытии картинок во всплывающем окне:
Образец работы скрипта lightbox Образец работы скрипта lightbox

Комментарии  

+2 #1 Delik 27.09.2011 09:34
а на карточке товара виртуемарте (не сама фотка товара а картинки в описании) в будет работать?
0 #2 Valery 27.09.2011 10:45
А почему же нет?
Этот скрипт и на форуме SMF и в Adsmanager и в фотоалерее трудится ...
Дописать только надо в этом маркете где-то rel="lightbox"
+2 #3 Delik 27.09.2011 16:49
спасибо, Valery, скрипт дельный
ну за исключением того, что нужны 2 картинки
+1 #4 PMS 14.12.2011 07:10
Ну надо ж - только озадачился - зашел именно сюда - и... - вот оно...
да....
Вот спасибо - бум пробовать...

Попробовал. При первой вставке скрипта ругнулся Апача на ошибку - но более ни разу не повторялось.
И еще. Если в материале ранее стоит просто img без ссылки и твоего скрипта, то далее, если использую скрипт для следующего img, то скрипт не работает.

Правда не всегда....
+1 #5 Xandr 02.11.2012 05:06
Пожалуй, лучший скрипт. Спасибо!

Добавить комментарий

  Вы можете безопасно авторизоваься с помощью любимой социальной сети:

     

Коммент без ссылок, символов, кодов и прочей ереси!