Карусель изображений в блоке "Последние изображения" на главной странице конференции с помощью 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

CabinetAdmin 23 май 2016, 20:24 Сообщение

Если подправите код, как сказано в пятом сообщении, то будет открываться сразу при клике по картинке.

Скрипт это вот он - gallery.slide.js
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

а с помщью чего его открывать для правки?
  • 0

CabinetAdmin 23 май 2016, 20:28 Сообщение

Можете с помощью обычного блокнота.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

вот переделал и поставил вверху, посмотрите, пожалуйста, все нормально или где-то косяк?
Ну пожалуйста! Вы же добрый тигр! )))
  • 0

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

какие-то поля большие у меня, как бы их уменьшить?
  • 0

romaamor 23 май 2016, 21:21 Сообщение

kuprin писал(а): какие-то поля большие у меня, как бы их уменьшить?
Да, у Вас плагин не корректно работает. Идём к Anvar и громко ругаемся.
http://bb3.mobi/forum/viewtopic.php?t=2 ... 8bd5d1157b
  • 0

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

ой, я не хочу ругаться ни с кем ))) мне бы подсказали бы лучше )))
  • 0

romaamor 23 май 2016, 21:46 Сообщение

Переименуйте папку просилвер на All
  • 0

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

CabinetAdmin писал(а): Единственное что можно было бы подправить, это ширину, ну это на мой взгляд, вместо width: 911px;:

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

	width: 100%;
	max-width: 1615px;
так на смартфоне с невысоким разрешением просто ужас получается при такой ширине.
  • 0

romaamor 23 май 2016, 21:52 Сообщение

romaamor писал(а): Переименуйте папку просилвер на All
Точно, там prosilver. :)
kuprin писал(а): max-width: 1615px;
100% нет ? Или 98%
  • 0

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

чота я устал ))) пусть пока так
  • 1

CabinetAdmin 24 май 2016, 15:41 Сообщение

kuprin писал(а): так на смартфоне с невысоким разрешением просто ужас получается при такой ширине.
Да... Есть такое :scratch:
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

roma 26 мар 2024, 18:06 Сообщение

Для 3.3.11 актуально?
  • 0

CabinetAdmin 26 мар 2024, 20:41 Сообщение

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

Похожие темы