В сегодняшнем материале мы будем создавать информер "Новые фото", в котором в режиме слайдшоу будут выводиться превьюшки последних добавленных фотографий фотоальбома.
Для создания такого информера потребуется, прежде всего, создать для начала стандартный информер системы. Делаем:
1. Заходим во вкладку "Информеры" Панели управления сайтом и жмём кнопку "Создать информер", выбираем раздел "Фотоальбомы", Тип данных "Материалы", Способ сортировки "Дата добавления материала А", Количество материалов 10 (здесь можете указывать свою цифру), Количество колонок - 1.
2. Жмём "Создать" и входим в редактирование шаблона созданного информера, заменяем весь имеющийся там код на такой:
Здесь мы закончили. переходим в редактирование шаблона "Главная страница фотоальбома", вставляем в секцию HEAD строку:
.slideshow img { padding: 3px; border: 1px solid #ccc; background-color: #eee; }
</style>
Либо можете вставить это в свой файл стилей
После тега bоdy вставляем скрипты
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
3. Теперь нам нужно вставить в первый контейнер код информера, который мы создали ранее, открываем первый контейнер копируем любой стандартный блок системы типа такого
<?if($CALENDAR$)?>
<table border="0" cellpadding="0" cellspacing="0" width="200">
<tr>
<td width="170" bgcolor="#318EB7" background="/.s/t/211/5.gif" class="blockT1"><span class="blockTitle"><!-- <bt> --><!--<s5171>-->Календарь<!--</s>--><!-- </bt> --></span></td>
<td width="30" bgcolor="#318EB7" background="/.s/t/211/5.gif" align="right"><img border="0" src="/.s/t/211/6.gif" width="30" height="29"></td>
</tr>
<tr>
<td colspan="2" bgcolor="#C3E1EF" background="/.s/t/211/7.gif" class="blockT2">
<div align="center"><div align="center"><!-- <bc> -->$CALENDAR$<!-- </bc> --></div></div>
</td>
</tr>
<tr>
<td colspan="2"><img border="0" src="/.s/t/211/8.gif" width="200" height="5"></td>
</tr>
</table><br>
<?endif?>
<!-- </block10> -->
И вставляем его среди других блоков, заменив содержимое и отредактировав заголовок:
<tr>
<td width="170" bgcolor="#318EB7" background="/.s/t/211/5.gif" class="blockT1"><span class="blockTitle"><!-- <bt> --><!--<s5171>-->Новые фото<!--</s>--><!-- </bt> --></span></td>
<td width="30" bgcolor="#318EB7" background="/.s/t/211/5.gif" align="right"><img border="0" src="/.s/t/211/6.gif" width="30" height="29"></td>
</tr>
<tr>
<td colspan="2" bgcolor="#C3E1EF" background="/.s/t/211/7.gif" class="blockT2">
<div class="slideshow">$MYINF_3$</div>
</td>
</tr>
<tr>
<td colspan="2"><img border="0" src="/.s/t/211/8.gif" width="200" height="5"></td>
</tr>
</table>
У вас код информера может быть и MYINF_1 и MYINF_5, в зависимости от количества созданных вами ранее информеров, так что отредактируйте цифру в коде информера при необходимости.
4. Теперь об эффектах при переходе от одного изображения к другому. Доступно множество вариантов затухание, скроллинг, зуммирование и еще много чего.
Если вы хотите применять другие эффекты, смените команду fade в коде
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
на любую другую:
blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, zoom
А можно просто перечислить разные эффекты через запятую, как это сделал я для
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'blindX, fade, cover, fadeZoom, wipe' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
Вот наш информер и готов. Будут вопросы - обращайтесь!
Адаптация для uCoz: PS-Studio.Info
Спасибо, разобрался сам. Просто у Вас написано, что скрипты надо вставлять в страницу фотоальбома, и, конечно, только там и работает, а надо вставлять во все страницы сайта, что я потом и сделал, после чего заработало везде.
Если вы все сделали, как описано в решении, а увеличение не работает, возможно, происходит конфликт каких-либо скриптов, можете также проверить правильность пути до файла со скриптом.
С сожалением отмечаю, что слайдшоу не наблюдаю, картинки все в ряд, уже второй день, обновлялся многократно, менял кол-во картинок, результата нет. Что делать?
ну,изображениям конечно нужно какое-то время,чтобы прокешироваться
Каждое действие рождает новые загадки.
Слайдшоу заработало, но теперь оно перекрывает нижний блок. И после того как слайды заканчиваются блок превращается в тонкую полоску на короткое время, а потом создаёт слайдшоу заново.
UPD: Как то само всё наладилось. Может в кэше дело было.?
Как такового оформления информера то и нет, я просто в примере вставил его в блок, по дизайну похожий с остальными блоками сайта, вы же може вставлять этот информер в блок со своим дизайном.
заключите код информера (у меня он $MYINF_2$) в блок div
<div class="slideshow">Здесь код вашего информера</div>
И ещё такой вопрос: в вашем примере информер имеет строго определённый дизайн, стиль которого прописывается в блоке. А можно ли сделать так, чтобы стиль наследовался из настроек дизайна сайта? Или только вручную все ссылки прописывать?
Информер работает, но слайдшоу не наблюдается и при попытке поставить количество фотографий - 10, они все выводятся в один ряд одновременно. Посоветуйте где поправить?
ссылку на исходники поправил,спасибо,теперь можно скачать