Главная » Администрирование сайта » Настройка основных модулей » Разделы фотоальбома с картинками на главной странице фотоальбома

Разделы фотоальбома с картинками на главной странице фотоальбома

30.01.2012 в 01:21
Автор: DPolyakov   
Перейти в базу знаний

В базе знаний есть новая инструкция по этой теме

При разработке одного проекта я столкнулся с одной незадачей: нужно было вывести на главную страницу фотоальбома все его категории и в качестве "превью" для каждой категории установить последнюю добавленную в нее фотографию. Стандартными средствами uCoz это сделать нельзя, поэтому пришлось прибегнуть к ухищрениям. Я решил выводить категории через информер, а фотографии подгружать при помощи javascript. Сейчас расскажу как я всё реализовал:

1. Создаем информер в панели управления сайтом: http://адрес_сайта.ру/panel/?a=informers



2. Заходим в Управление дизайном информера и вставляем туда следующий код:
Вариант 1:
Code

<a class="galery_one" href="$CATEGORY_URL$"><span id="c$NUMBER$" class="galery_index"> </span>$CATEGORY_NAME$</a>
<script type="text/javascript">$('#c$NUMBER$').load('$CATEGORY_URL$ .phtTdMain:first > div > a > img');</script>

Вариант 2:
Code

<a class="galery_one" href="$CATEGORY_URL$"><span id="c$NUMBER$" class="galery_index"> </span>$CATEGORY_NAME$</a>
<script type="text/javascript">
$.get("$CATEGORY_URL$", function(data){
var img = $(data).find('.phtTdMain:first').find('img');
$('#c$NUMBER$').html(img);
});
</script>
Вы можете изменить html-разметку под свои нужды, главное чтобы в коде остался вызов скрипта и элемент с id="c$NUMBER$"

3. В шаблон главной фотоальбома http://адрес_сайта.ру/panel/?a=tmpl;m=9;t=1 вставляем Код вызова информера для шаблонов системы (например $MYINF_1$)

Сохраняем, проверяем результат.

В конце немного пояснений, что же делает скрипт в шаблоне информера: при его вызове скрипт переходит по ссылке $CATEGORY_URL$ в категорию, на странице категории копирует код первой фотографии в этой категории и вставляет это код внутрь блока с id="c$NUMBER$". Вот почему элемент с таким атрибутом должен обязательно быть в коде информера.

Посмотреть пример работы можно на сайте divakovdance.ru

jquery, информеры, фотоальбом

Рейтинг: 48  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 153316          Комментариев:

Похожие инструкции