Информация

  • FastVps - Хостинг для форума
  • RegPartner - Домены по правильным ценам

"4admins.ru" Рекомендует

SlimBox - галерея изображений

Разные довески в сообщениях
  • Автор 
    Сообщение
Аватара пользователя
Сообщения: 223
Зарегистрирован: 05 июл 2010, 23:05
Благодарил (а): 136
Поблагодарили: 41 раз в 35 сообщениях
Пол: Мужской
Адрес форума: .....
Баллы репутации: 16

SlimBox - галерея изображений

Сообщение Добавлено: 05 мар 2011, 03:37

Вот решил написать такой небольшой FAQ по установке галереи на форум.
Для начала смотрим Демо
1. Скачиваем архив с файлами
2. Закачиваем к себе на форум картинки через Менеджер картинок
3. Открываем файл slimbox2.css и меняем ссылки loading.gif, prevlabel.gif, nextlabel.gif и closelabel.gif на свои
4. Закачиваем к себе на форум остальные файлы
5. Открываем шаблон overall_header и перед </head> вставляем следующее:
Код: Выделить всё
<script type="text/javascript" src="ваша ссылка на jquery-1.5.1.min.js"></script> 
<script type="text/javascript" src="ваша ссылка на slimbox2.js"></script>
<link rel="stylesheet" href="ваша ссылка на slimbox2.css" type="text/css" media="screen" />

Все, SlimBox готов к использованию.
Теперь необходимо добавить BB коды
Использование BBCode
Код: Выделить всё
[slim={URL1}]{URL2}[/slim]

Замена HTML
Код: Выделить всё
<a href="{URL1}" rel="lightbox"><img style="border: 1px solid black;" src="{URL2}" alt="" /></a>

Здесь border это обводка, если она вам не нужна, то ставьте 0px.

Текст подсказки
Код: Выделить всё
[slim=URL миниатюры]URL полного изображения[/slim]


Это был BB код для одиночных изображений.
Теперь для галереи.
Использование BBCode
Код: Выделить всё
[slimgroup={URL1}]{URL2}[/slimgroup]

Замена HTML
Код: Выделить всё
<a href="{URL1}" rel="lightboxgroup"><img style="border: 1px solid black;" alt="" title="" src="{URL2}" /></a>

Текст подсказки придумайте сами :)
Ну вот пожалуй и всё, если что не так обращайтесь :privet:
Вложения
SlimBox.zip
(36.71 Кб) Скачиваний: 172

За это сообщение пользователя nar200 поблагодарили:
Пионер

Аватара пользователя
Сообщения: 122
Зарегистрирован: 03 янв 2011, 01:47
Благодарил (а): 68
Поблагодарили: 6 раз в 5 сообщениях
Пол: Мужской
Адрес форума: http://veshenskaya.4adm.ru
Баллы репутации: 4

Re: SlimBox - галерея изображений

Сообщение Добавлено: 19 мар 2011, 21:39

nar200 писал(а):
Код: Выделить всё
[slim=URL миниатюры]URL полного изображения[/slim]

Правильно будет так
Код: Выделить всё
[slim=URL полного изображения]URL миниатюры[/slim]

За это сообщение пользователя Пионер поблагодарили:
nar200

Аватара пользователя
Сообщения: 97
Зарегистрирован: 04 авг 2010, 01:28
Благодарил (а): 9
Поблагодарили: 0 раз в 0 сообщении
Город: Киев
Пол: Мужской
Адрес форума: http://xx.80lvl.ru/index.php
Баллы репутации: 1

Re: SlimBox - галерея изображений

Сообщение Добавлено: 20 апр 2011, 15:54

вопрос такой- куда заливать папку вложение???

Аватара пользователя
Сообщения: 97
Зарегистрирован: 04 авг 2010, 01:28
Благодарил (а): 9
Поблагодарили: 0 раз в 0 сообщении
Город: Киев
Пол: Мужской
Адрес форума: http://xx.80lvl.ru/index.php
Баллы репутации: 1

Re: SlimBox - галерея изображений

Сообщение Добавлено: 20 апр 2011, 16:00

все понял

Аватара пользователя
Сообщения: 223
Зарегистрирован: 05 июл 2010, 23:05
Благодарил (а): 136
Поблагодарили: 41 раз в 35 сообщениях
Пол: Мужской
Адрес форума: .....
Баллы репутации: 16

Re: SlimBox - галерея изображений

Сообщение Добавлено: 26 мар 2012, 20:26

Версия 2.
Что нового:
  • Обновлён jQuery до версии 1.7.2
  • Русифицировал картинки
  • Написал новый BB Code для обработки изображения без превью для slim и slimgroup
  • Автоматическое уменьшение добавленного изображения между тегами slim или slimgroup
Минусов у SlimBox'a всего два:
  • Не уменьшает изображения до нужного размера по экрану пользователя
  • Открывает все картинки на странице, по группам разбить невозможно
1. Скачиваем архив с файлами, разархивируем
2. Закачиваем к себе на форум картинки через Менеджер картинок
3. Открываем файл slimbox2.css и меняем ссылки loading.gif, prev.gif, next.gif и closelabel.gif на свои, сохраняем
4. Закачиваем к себе на форум через Менеджер картинок файлы jquery.min.js, slimbox2.js и slimbox2.css
5. Открываем шаблон overall_header.html и перед </head> вставляем следующее:
Код: Выделить всё
<script type="text/javascript" src="ваша ссылка на jquery.min.js"></script> 
<script type="text/javascript" src="ваша ссылка на slimbox2.js"></script>
<link rel="stylesheet" href="ваша ссылка на slimbox2.css" type="text/css" media="screen" />

Добавляем BB коды:
Использование BBCode
Код: Выделить всё
[sl]{URL1}[/sl]

Замена HTML
Код: Выделить всё
<a href="{URL1}" rel="lightbox"><img style="border: 0px solid black;" style="max-width:200px; max-height:120px;" src="{URL1}" /></a>&nbsp


Здесь border - обводка, black - цвет обводки, если она вам не нужна, то ставьте 0px.
max-width - ширина миниатюры, max-height - высота миниатюры.

Текст подсказки
Код: Выделить всё
[sl]URL изображения[/sl]


Это был BB код для одиночных изображений.

Теперь для галереи.
Использование BBCode
Код: Выделить всё
[slimgroup]{URL1}[/slimgroup]


Замена HTML
Код: Выделить всё
<a href="{URL1}" rel="lightboxgroup"><img src="{URL1}" style="max-width:200px; max-height:120px;" /></a>&nbsp


Текст подсказки
Код: Выделить всё
[sl]URL изображения[/sl]


Все, установка SlimBox на ваш форум закончена.
Внешне эта модификация очень похожа на LightBox, но использует скрипт jQuery, что не вызывает конфликтов между скриптами.
PS. Может в ближайшем времени добавлю BB код галереи HighSlide. Тоже очень хорошая галерея.
Вложения
SlimBox v2 RUS by nar200.zip
(40.06 Кб) Скачиваний: 98


Вернуться в BBcode phpbb3

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 8