Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Разворачивающаяся карусель изображений

Предыдущая тема Следующая тема Перейти вниз

Разворачивающаяся карусель изображений

Сообщение автор Vadim в Сб 28 Июл - 4:03

Разворачивающаяся карусель изображений позволит вам удобно и эффектно показать фотографии посетителям форума! Внешний вид галереи изменяется, и вы можете настроить его под стиль своего форума! Скрипт позволяет показывать одиночные изображения, группировать их и смотреть слайд шоу.

ВЫГЛЯДИТ ЭТО ТАК

Безграничный вклад в создание этого скрипта внес Домовой, за что ему огромная признательность!

Данный скрипт работает в версиях punBB и phpBB3. В общем то «карусель» можно поставить в любое удобное для вас место на форуме, куда сможете добраться через шаблоны.

Я опишу, как поставить «карусель» на главную страницу под шапку форума.

Для punBB

Идем в шаблоны ПА - Оформление - Шаблоны (Общие настройки) открываем шаблон «index_body (Главная страница)» В самый верх шаблона вставляем код:

Код:
<div class="carousel">
<script type='text/javascript' src='http://www.patmax.eu/J1/120727225153.js'></script>
<link rel="stylesheet" type="text/css" href="http://www.patmax.eu/CSS1/120330112525.css" />
  <script type="text/javascript" src="http://www.patmax.eu/J1/120404181157.js"></script>
  <script type="text/javascript" src="http://www.patmax.eu/J1/120330112609.js"></script>
  <script type="text/javascript">
      jQuery(function() {
          jQuery(".jMyCarousel").jMyCarousel({
              visible: '100%'
          });
      });
  </script>
<div class="jMyCarousel">
<ul>
 
  <li>
<a href="http://i017.radikal.ru/1207/aa/e57b1d465abc.jpg" rel="iLoad|Назавание галереи" title="Название изображения"> <img
src="http://i017.radikal.ru/1207/aa/e57b1d465abc.jpg" height="120" width="160" title="Название галереи"/></a>
</li>

  <li>
<a href="http://s55.radikal.ru/i148/1207/f9/8b7428eb6d0e.jpg" rel="iLoad|Назавание галереи" title="Название второго изображения"> <img
src="http://s55.radikal.ru/i148/1207/f9/8b7428eb6d0e.jpg" height="120" width="160" title="Название галереи"/></a>
</li>

  <li>
<a href="http://s018.radikal.ru/i507/1207/fc/1ed51e9d93e0.jpg" rel="iLoad|Назавание галереи" title="Название третьего изображения"> <img
src="http://s018.radikal.ru/i507/1207/fc/1ed51e9d93e0.jpg" height="120" width="160" title="Название галереи"/></a>
</li>

</ul>
</div>
  </div>
<div style="width:5px; height:7px"></div>
Теперь вы можете добавить свои изображения, предварительно загрузив их на любой фотохостинг и сохранив ссылки. Также нужно отредактировать информацию о изображениях и их первоначальном размере. Все это делается здесь:

Код:
 <li>
<a href="Ссылка на изображение" rel="iLoad|Назавание галереи" title="Название изображения"> <img
src="Ссылка на изображение" height="120" width="160" title="Название галереи"/></a>
</li>
Не забудьте заменить надпись «Ссылка на изображение» URL ссылкой на ваше изображение!

Добавьте название, заменив текст «Название изображения»

А вместо «Назавание галереи» напишите название вашей фотогалереи (Показывается при наведении курсора мыши на изображение) Если вы хотите, чтобы все ваши изображения в окне просмотра показывались друг за дружкой, то название должно быть у каждой одинаковым! Если вы желаете создать несколько альбомов, напишите различные названия фотогалереи, в таком случае изображения сгруппируются по указанным альбомам.

Параметр «height="120" width="160"» задает ширину и высоту первоначального размера изображений, для того чтобы «карусель» была ровной, этот параметр должен быть одинаковым у каждого изображения.

Продублируйте данный код, для каждого изображения (Вставив ссылки и названия) столько раз, сколько пожелаете видеть изображений.

Когда все закончите, не забудьте опубликовать шаблон!

Убираем лишние отступы, оформляем «карусель» красивой рамочкой, добавив в CSS:

Код:
.carousel{
padding:1px;
border: double 3px #120A8F; /*Цвет рамочки*/
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius:8px;
}
Для phpBB3

Здесь все тоже самое, только скрипт ставится в ПА - Оформление - Главная - Общая информация - Приветствие на главной странице

Заголовок приветствия: Оставить поле пустым
Текст приветствия:

Код:
<div class="carousel">
<script type='text/javascript' src='http://www.patmax.eu/J1/120727225153.js'></script>
<link rel="stylesheet" type="text/css" href="http://www.patmax.eu/CSS1/120330112525.css" />
  <script type="text/javascript" src="http://www.patmax.eu/J1/120404181157.js"></script>
  <script type="text/javascript" src="http://www.patmax.eu/J1/120330112609.js"></script>
  <script type="text/javascript">
      jQuery(function() {
          jQuery(".jMyCarousel").jMyCarousel({
              visible: '100%'
          });
      });
  </script>
<div class="jMyCarousel">
<ul>
 
  <li>
<a href="http://i017.radikal.ru/1207/aa/e57b1d465abc.jpg" rel="iLoad|Назавание галереи" title="Название изображения"> <img
src="http://i017.radikal.ru/1207/aa/e57b1d465abc.jpg" height="120" width="160" title="Название галереи"/></a>
</li>

  <li>
<a href="http://s55.radikal.ru/i148/1207/f9/8b7428eb6d0e.jpg" rel="iLoad|Назавание галереи" title="Название второго изображения"> <img
src="http://s55.radikal.ru/i148/1207/f9/8b7428eb6d0e.jpg" height="120" width="160" title="Название галереи"/></a>
</li>

  <li>
<a href="http://s018.radikal.ru/i507/1207/fc/1ed51e9d93e0.jpg" rel="iLoad|Назавание галереи" title="Название третьего изображения"> <img
src="http://s018.radikal.ru/i507/1207/fc/1ed51e9d93e0.jpg" height="120" width="160" title="Название галереи"/></a>
</li>

</ul>
</div>
  </div>
<div style="width:5px; height:7px"></div>
Изображения добавляются тем же способом, что и в версии «punBB». Описано выше.

По желанию ставим регулирующий отступ, добавив в CSS:

Код:
#pun-announcement {
padding:0;
}
Внимание: При установленной «карусели» не работает скрипт "Оформление блока статистики с помощью вкладок" от Dana Domirani я не смог это исправить.

Дополнительно:

Параметр

Код:
<div style="width:5px; height:7px"></div>
в шаблоне задает отступ под «каруселью» если он вам не нужен - можете удалить, либо отредактировать на свой вкус.

Дополнительно (Тонкая настройка для профессионалов):

Сам «iLoad» - скрипт, написанный на «javascript» является основой всего туториала, ссылка на него находится в этой строке:

Код:
<script type='text/javascript' src='http://www.patmax.eu/J1/120727225153.js'></script>
Вы можете загрузить «iLoad» на свой компьютер и отредактировать по собственному желанию, а затем перезалить например на «patmax.eu» и заменить ссылку в скрипте.

«iLoad» распространяется бесплатно для некоммерческих проектов при условии сохранения копирайтов и ссылок в файле.

Скрипт, а также подробное описание его тегов находятся здесь: http://studioad.ru/index/0-8

Vadim
 
 

Пол : Мужчина
Сообщения : 542
Возраст : 28
Место обитания : Дом, семья, работа...
Карма : Без предупреждений
Благодарности : 55
Регистрация : 2012-03-01

http://anamnez.sosbb.ru/

Вернуться к началу Перейти вниз

Re: Разворачивающаяся карусель изображений

Сообщение автор spammer в Пт 31 Авг - 15:15

а для PHPBB2 ?

spammer
 
 

Пол : Мужчина
Сообщения : 181
Возраст : 22
Место обитания : Хабаровск
Настроение : 39
Карма : Без предупреждений
Благодарности : 26
Регистрация : 2012-08-20

http:// http://anti-lcdev.sosbb.ru

Вернуться к началу Перейти вниз

Re: Разворачивающаяся карусель изображений

Сообщение автор Домовой в Пт 31 Авг - 21:06

@spammer пишет:а для PHPBB2 ?
Там этот туториал работает не корректно.

Домовой
 
 

Пол : Мужчина
Сообщения : 6976
Возраст : 92
Место обитания : :яинатибо отсеМ
Карма : Без предупреждений
Благодарности : 3216
Регистрация : 2010-01-30

http://udomovogo.rusff.ru

Вернуться к началу Перейти вниз

Re: Разворачивающаяся карусель изображений

Сообщение автор spammer в Сб 1 Сен - 0:39

Жвль

spammer
 
 

Пол : Мужчина
Сообщения : 181
Возраст : 22
Место обитания : Хабаровск
Настроение : 39
Карма : Без предупреждений
Благодарности : 26
Регистрация : 2012-08-20

http:// http://anti-lcdev.sosbb.ru

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения