Карусель изображений в блоке "Последние изображения" на главной странице конференции с помощью jQuery.
Изображение
Модификация позволяет сделать слайд-карусель из изображений загруженных в phpBB Gallery на главной странице форума.

Первое что необходимо, это включить отображение этого блока на главной странице. Идём в модуль управления галереей: Конфигурация галереи → phpBB интеграция → "Последние изображения" на главной странице конференции → да. Там же устанавливаем количество строк - 1, столбцы на ваше усмотрение.

Далее скачиваете архив:
phpBB Gallery Consecutive Slide.rar
61.64 КБ 427 скачиваний
закачиваете скрипт, файл стилей gallery_slide.css (в зависимости от вашего стиля) и изображения стрелок на форум.

Далее подключаем файлы, в шаблоне overall_header.html перед </head> добавляете:

Код: Выделить всё

<link href="путь до файла/gallery_slide.css" rel="stylesheet" type="text/css" />
<script src="путь до файла/gallery.slide.js"></script>
Примечание
Так как модификация используется на jQuery, то выше у вас должна быть подключена её библиотека.
Файлы стиля можно не закачивать, а добавить в конец темы стиля.



Далее устанавливаем блок с изображениями на главную страницу, открываете index_body.html находите:

Код: Выделить всё

<!-- INCLUDE forumlist_body.html -->
после найденного с новой строки добавляете (для prosilver и его клонов):

Код: Выделить всё

<!-- BEGIN imageblock -->
<div class="forumbg">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt><!-- IF imageblock.U_BLOCK --><a href="{imageblock.U_BLOCK}">{imageblock.BLOCK_NAME}</a><!-- ELSE -->{imageblock.BLOCK_NAME}<!-- ENDIF --></dt>
</dl>
</li>
</ul>
<ul class="topiclist topics">
<li class="panel">
<div class="prev"></div>
<div class="imagerow">
<!-- BEGIN imagerow -->
<ul class="list">
<!-- BEGIN image -->
<li>{imageblock.imagerow.image.UC_THUMBNAIL}
<div class="uc_image_name">
<!-- IF imageblock.imagerow.image.UC_IMAGE_NAME -->{imageblock.imagerow.image.UC_IMAGE_NAME}<!-- ENDIF -->
</div>
</li>
<!-- END image -->
<!-- BEGIN no_image --><!-- END no_image -->
</ul>
<!-- END imagerow -->
</div>
<div class="next"></div>
</li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<!-- END imageblock -->

для subsilver2 и его клонов:

Код: Выделить всё

<!-- BEGIN imageblock -->
<table class="tablebg" cellspacing="1" width="100%">
<tr>
<th align="center" nowrap="nowrap"><!-- IF imageblock.U_BLOCK --><a href="{imageblock.U_BLOCK}">{imageblock.BLOCK_NAME}</a><!-- ELSE -->{imageblock.BLOCK_NAME}<!-- ENDIF --></th>
</tr>
<tr>
<td class="row2" valign="top" >
<div class="panel">
<div class="prev"></div>
<div class="imagerow">
<!-- BEGIN imagerow -->
<ul class="list">
<!-- BEGIN image -->
<li>{imageblock.imagerow.image.UC_THUMBNAIL}
<div class="uc_image_name">
<!-- IF imageblock.imagerow.image.UC_IMAGE_NAME -->{imageblock.imagerow.image.UC_IMAGE_NAME}<!-- ENDIF -->
</div>
</li>
<!-- END image -->
<!-- BEGIN no_image --><!-- END no_image -->
</ul>
<!-- END imagerow -->
</div>
<div class="next"></div>
</div>
</td>
</tr>
</table>
<br clear="all" />
<!-- END imageblock -->
Если в этом шаблоне есть <!-- INCLUDE gallery/recent_body.html -->, удалите его, чтобы не дублировать блоки.

Небольшие пояснения.
Для клонов prosilver блок поддерживает резиновый стиль, для subsilver2 нет, в файле стиля находите:

Код: Выделить всё

.panel {
position: relative;
width: 720px;
margin: 0 auto;
}
и меняйте 720px на своё значение, в зависимости от вашего стиля.

Так же можно настроить блок под себя. В настройках скрипта

Код: Выделить всё

if(onMoving || currentSlide >= 3) return false;
3 - количество перемещений, если количество перемещений не хватает и некоторые изображения не появляются, то измените значение на большее число, либо на меньшее если изображений не много.

При клике на стрелку перемещения вправо или влево, изображения перемещаются с небольшим "разбегом", этот разбег можно: увеличить, уменьшить или совсем убрать. Находите две строки:

Код: Выделить всё

var delay = i * 100;
и меняете значение по своему усмотрению.

Так же можете поэкспериментировать со значениями в начале файла:

Код: Выделить всё

itemDisplayed	= 6;
itemToSlide		= itemDisplayed * 9;
currentSlide	= 1;

При наведении на изображение всплывает его название, затемнение сделано с небольшой анимацией, которую при желании можно изменить или убрать.

Комментарии: 28

eska 11 янв 2014, 18:51 Сообщение

Отличная вещь, надо будет тоже прикрутить
  • 0

GoDFaTHeR 17 янв 2014, 01:15 Сообщение

Былоб хорошо открывать по клику по картинке,а не по всплывающей ссылке
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

GoDFaTHeR 17 янв 2014, 01:18 Сообщение

CabinetAdmin » 11 янв 2014, 05:23 писал(а):закачиваете скрипт, файл стилей gallery_slide.css (в зависимости от вашего стиля) и изображения стрелок на форум.
Для сервиса подойдет такой вариант?
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

CabinetAdmin 17 янв 2014, 14:55 Сообщение

GoDFaTHeR » Сегодня, 04:18 писал(а):Для сервиса подойдет такой вариант?
Файл заливается через "Менеджер картинок" и используется, как и любое изображение или флеш. Тут правда есть нюанс, файл стиля в списке файлов отображается только после загрузки, потом увы - нет.
GoDFaTHeR » Сегодня, 04:15 писал(а):открывать по клику по картинке,а не по всплывающей ссылке
Можно вообще убрать затемнение и ссылку, вот этот кусок:

Код: Выделить всё

<div class="uc_image_name">
<!-- IF imageblock.imagerow.image.UC_IMAGE_NAME -->{imageblock.imagerow.image.UC_IMAGE_NAME}<!-- ENDIF -->
</div>
Можно сделать так, чтобы вся площадь затемнения вместе с названием были ссылкой.
В файле стиля:

Код: Выделить всё

.uc_image_name a {
position: relative;
top: 10px;
left: 4px;
opacity: 0;
color: #fff;
font: 10px Helvetica, Arial, sans-serif;
text-decoration: none;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
заменить на:

Код: Выделить всё

.uc_image_name a {
position: relative;
top: 0px;
left: 0px;
opacity: 0;
color: #fff;
font: 10px Helvetica, Arial, sans-serif;
text-decoration: none;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
height: 100%;
display: block;
padding: 4px 0px 0px 4px;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

GoDFaTHeR 18 янв 2014, 00:52 Сообщение

CabinetAdmin » Сегодня, 06:55 писал(а):файл стиля в списке файлов отображается только после загрузки, потом увы - нет.
по этому лучше просто добавить нужный код в тему стиля...
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

tedii 14 ноя 2014, 15:38 Сообщение

здравствуйте а куда это файл совать ?gallery.slide.js
  • 0

CabinetAdmin 14 ноя 2014, 16:40 Сообщение

Обычно в папку template того стиля, который используется. И использовать путь до файла такого вида - {T_SUPER_TEMPLATE_PATH}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

kuprinДмитрий 23 май 2016, 15:33 Сообщение

Так, у меня опять не получилось.
Два вопроса
1 - что делать с файлем "стиль"
2 - что делать с изображением кнопок, которые закачиваем - где прописывать на них путь?
  • 0

CabinetAdmin 23 май 2016, 15:58 Сообщение

С файлом стиль ничего не надо делать, он нужен лишь для того чтобы при открытии index.html вы увидели тоже самое, что и в демо примере.
В файле gallery_slide.css - images/next.png и images/prev.png. Кстати да, я почему-то забыл об этом упомянуть...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

kuprinДмитрий 23 май 2016, 18:01 Сообщение

То есть, действовать нужно так (если я правильно понял)
1 - закачиваем на сайт через менеджер картинок две стрелки
2- правим у себя на компе файл gallery_slide.css, указываем там вместо images/next.png и images/prev.png адрес картинок, закаченных на сайт (кстати, полностью путь указывать?)
3 - закачиваем на сайт уже файл gallery_slide.css
Так?
  • 0

kuprinДмитрий 23 май 2016, 18:23 Сообщение

какая-то "шляпа" получилась ))). Все показывает, но при нажатии в Интернет Эксплоере фото не прокручиваются, а в Хроме прокручиваются. Как так?
Сами фото не нажимаются и еще и закрыли мне "последние сообщения" и "время". Жесть )))
Поэтому убрал "карусель" вниз форума.
Посмотрите, пожалуйста!
вот ссылка http://ogf.gtaserv.ru/index.php
Все сделал по инструкции, вот только как-то непонятно все работает, кстати вот такой строки в моем фале css я не нашел почему-то:
"Так же можно настроить блок под себя. В настройках скрипта
КОД: ВЫДЕЛИТЬ ВСЁ
if(onMoving || currentSlide >= 3) return false;"


нету у меня в файле такого.
  • 0

CabinetAdmin 23 май 2016, 19:34 Сообщение

kuprin писал(а): кстати вот такой строки в моем фале css я не нашел
При чём тут файл css? В инструкции - "В настройках скрипта".
kuprin писал(а): Сами фото не нажимаются и еще и закрыли мне "последние сообщения" и "время". Жесть )))
Можно было бы и тему почитать, в пятом сообщении как раз об этом речь.

Зашёл к вам на форум. Не увидел закрытые сообщения и время... :unknown
Единственное что можно было бы подправить, это ширину, ну это на мой взгляд, вместо width: 911px;:

Код: Выделить всё

	width: 100%;
	max-width: 1615px;
И, пожалуй, ограничил бы количество изображений. Я не знаю сколько их там, но аж ждать пришлось при перемотке, где-то после третьего или четвёртого перелистывания...
kuprin писал(а): при нажатии в Интернет Эксплоере фото не прокручиваются
В эксплорере?... У меня даже мысли не было адаптировать мод под ие...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

kuprinДмитрий 23 май 2016, 20:10 Сообщение

Спасибо, Вы, делайте на меня скидку как на новичка )))
Если я вверху поставлю, то закроет. А при клике мышке фото должны открываться или нет? У меня почему-то не открываются
  • 0

kuprinДмитрий 23 май 2016, 20:20 Сообщение

CabinetAdmin писал(а):
kuprin писал(а): кстати вот такой строки в моем фале css я не нашел
При чём тут файл css? В инструкции - "В настройках скрипта".
Это где? )))
  • 0

Похожие темы