Изюминкой этого информера является не только его компактность и в тоже время информативность, но и возможность увеличения превьюшек при наведении на них курсора мыши.
Вы можете посмотреть вживую, как это работает, перейдя по ссылке "Демо".
Реализация решения.
1. Первым делом создаём сам информер. Для этого заходим во вкладку "Информеры" панели управления сайтом и нажимаем кнопку "Создать информер". Данные для отображения такие:
Раздел: Фотоальбомы
Тип данных: Материалы
Способ сортировки: Количество просмотров А
Количество материалов: 9
Количество колонок: 1
Жмём кнопку "Создать". Получаем на выходе код информера типа $MYINF_4$ (цифра может отличаться, в зависимости от того, сколько уже было создано информеров вами)
2. Заходим в редактирование шаблона информера и заменяем весь присутствующий там код на следующий:
3. Заходим в шаблон "Первый контейнер" (или по месту, где вам нужно вставить информер), я выбрал в качестве демо-сайта стандартный дизайн системы, поэтому я копирую любой блок в первом контейнере, например
<!-- <block9> -->
<?if($SEARCH_FORM$)?>
<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> --><!--<s3163>-->Поиск<!--</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> -->$SEARCH_FORM$<!-- </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?>
<!-- </block9> -->
И после редактирования его заголовка и содержимого вставляю полученный блок среди других блоков первого контейнера
<tr>
<td width="170" bgcolor="#318EB7" background="/.s/t/211/5.gif" class="blockT1"><span class="blockTitle"><!-- <bt> --><!--<s5204>-->Популярные<!--</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 id="thumbs">$MYINF_4$</div>
</td>
</tr>
<tr>
<td colspan="2"><img border="0" src="/.s/t/211/8.gif" width="200" height="5"></td>
</tr>
</table><br>
4. Теперь осталось лишь прописать в файле стилей CSS немного стилей:
div.thumb { float: left; padding: 1px; width: 60px; height: 60px; }
div.thumb img { border: 2px solid white; cursor: pointer }
а после тега bоdy страниц модуля "Фотоальбомы" добавить cкрипты
<script type="text/javascript">
$(window).load(function() {
$('p.msg').html('Mouse over images for pulse effect, click to open link in new window.');
});
$(document).ready(function() {
$('div.thumb img').hoverpulse().each(function() {
var $img = $(this);
var link = $img.attr('data-link');
$img.attr('title','Перейти на страницу с фото: ' + link);
$img.click(function() {
window.open(link);
return false;
});
});
});
</script>
Решение простое, а эффект замечательный!
Небольшое дополнение: если вы хотите, чтобы при наведении на мини картинку она была побольше, чем в демо-примере, откройте скрипт для редактирования и найдите там строки:
top: ('-'+opts.size+'px'),
left: ('-'+opts.size+'px'),
height: (h+2*opts.size)+'px',
width: (w+2*opts.size)+'px'
}, opts.speed);
Поменяйте цифры 2 на другие, например
top: ('-'+opts.size+'px'),
left: ('-'+opts.size+'px'),
height: (h+8*opts.size)+'px',
width: (w+8*opts.size)+'px'
}, opts.speed);
Адаптация для uCoz: PS-Studio.Info
Спасибо, разобрался сам. Просто у Вас написано, что скрипты надо вставлять в страницу фотоальбома, и, конечно, только там и работает, а надо вставлять во все страницы сайта, что я потом и сделал, после чего заработало везде.
вы просто немного невнимательно прочитали материал, у меня написано:
...а после тега bоdy страниц модуля "Фотоальбомы" добавить cкрипты...
Спасибо, разобрался сам. Просто у Вас написано, что скрипты надо вставлять в страницу фотоальбома, и, конечно, только там и работает, а надо вставлять во все страницы сайта, что я потом и сделал, после чего заработало везде.
С сожалением хочу сказать, что у меня при наведении курсора на минифото в блоке фото не увеличивается и не работает ссылка на фото. Что делать?
Добавил: вставил сам запись "onclick="window.open('$PHOTO_URL$');""в информер стала работать ссылка на конкретное фото. А как увеличение сделать?
Если вы все сделали, как описано в решении, а увеличение не работает, возможно, происходит конфликт каких-либо скриптов, можете также проверить правильность пути до файла со скриптом.
С сожалением хочу сказать, что у меня при наведении курсора на минифото в блоке фото не увеличивается и не работает ссылка на фото. Что делать?
Добавил: вставил сам запись "onclick="window.open('$PHOTO_URL$');""в информер стала работать ссылка на конкретное фото. А как увеличение сделать?
Все,в исходниках ссылку поправил,файл скрипта там,демо также заработало. Спасибо за подсказку!
Наверное не совсем понятно выразился, но нужен файл jquery.hoverpulse.js
(фото появились после указания правильного номера информера)
Сайт nomeroff.org
Трудно понять, в чем может быть проблема, не зная адрес сайта.
По ссылкам материалов больше нет. После всех вышеизложенных манипуляций информер встал куда нужно (в первый контейнер), но фото не отображаются. Подскажите в чём может быть проблема?