Карусель изображений в блоке "Последние изображения" на главной странице конференции с помощью jQuery.
Модификация позволяет сделать слайд-карусель из изображений загруженных в phpBB Gallery на главной странице форума.
Первое что необходимо, это включить отображение этого блока на главной странице. Идём в модуль управления галереей: Конфигурация галереи → phpBB интеграция → "Последние изображения" на главной странице конференции → да. Там же устанавливаем количество строк - 1, столбцы на ваше усмотрение.
Далее скачиваете архив: закачиваете скрипт, файл стилей
Далее подключаем файлы, в шаблоне
Примечание
Так как модификация используется на jQuery, то выше у вас должна быть подключена её библиотека.
Файлы стиля можно не закачивать, а добавить в конец темы стиля.
Далее устанавливаем блок с изображениями на главную страницу, открываете
после найденного с новой строки добавляете (для prosilver и его клонов):
для subsilver2 и его клонов:
Если в этом шаблоне есть
Небольшие пояснения.
Для клонов prosilver блок поддерживает резиновый стиль, для subsilver2 нет, в файле стиля находите:
и меняйте
Так же можно настроить блок под себя. В настройках скрипта
3 - количество перемещений, если количество перемещений не хватает и некоторые изображения не появляются, то измените значение на большее число, либо на меньшее если изображений не много.
При клике на стрелку перемещения вправо или влево, изображения перемещаются с небольшим "разбегом", этот разбег можно: увеличить, уменьшить или совсем убрать. Находите две строки:
и меняете значение по своему усмотрению.
Так же можете поэкспериментировать со значениями в начале файла:
При наведении на изображение всплывает его название, затемнение сделано с небольшой анимацией, которую при желании можно изменить или убрать.
Модификация позволяет сделать слайд-карусель из изображений загруженных в phpBB Gallery на главной странице форума.
Первое что необходимо, это включить отображение этого блока на главной странице. Идём в модуль управления галереей: Конфигурация галереи → phpBB интеграция → "Последние изображения" на главной странице конференции → да. Там же устанавливаем количество строк - 1, столбцы на ваше усмотрение.
Далее скачиваете архив: закачиваете скрипт, файл стилей
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 -->
Код: Выделить всё
<!-- 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;
При клике на стрелку перемещения вправо или влево, изображения перемещаются с небольшим "разбегом", этот разбег можно: увеличить, уменьшить или совсем убрать. Находите две строки:
Код: Выделить всё
var delay = i * 100;
Так же можете поэкспериментировать со значениями в начале файла:
Код: Выделить всё
itemDisplayed = 6;
itemToSlide = itemDisplayed * 9;
currentSlide = 1;
При наведении на изображение всплывает его название, затемнение сделано с небольшой анимацией, которую при желании можно изменить или убрать.
Комментарии: 28
Да, у Вас плагин не корректно работает. Идём к Anvar и громко ругаемся.
http://bb3.mobi/forum/viewtopic.php?t=2 ... 8bd5d1157b
так на смартфоне с невысоким разрешением просто ужас получается при такой ширине.CabinetAdmin писал(а): Единственное что можно было бы подправить, это ширину, ну это на мой взгляд, вместоwidth: 911px;
:Код: Выделить всё
width: 100%; max-width: 1615px;
Похожие темы
-
Возможно ли на phpbb устроить редактор изображений в сообщениях. В уже загруженных изображениях? Я не говорю о сложных действиях, но хотя бы о...