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

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

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


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

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

10.11.2016 в 03:25      0  

Все работает, спасибо, только как теперь убрать обычные альбомы ( которые не как информеры а как ссылки) без ущерба для всего остального. Ведь если я уберу категории информеры тоже полетят? или может быть просто скрыть эти надписи ( в коде пробовал искать не нашел.
16.11.2016 в 17:20      0  

Просто уберите код категорий из шаблона: $CATEGORIES$
08.03.2016 в 08:02      0  

что имею: сайт http://shkola-slautnoe.ucoz.ru/photo/ в фотоальбоме ДВА больших раздела, внутри которых по несколько альбомов.
Что сделал: создал информер как показано на картинке из инструкции, вставил код из инструкции, пошел в ПУ-дизайн-управление дизайном(шаблоны)-главная страница фотоальбома   Заменил $BODY$ на $MYINF_1$
Результат: превьюшки отображаются только для ДВУХ больших разделов, но при входе в эти разделы превьюшек нету. 
Подскажите, пожалуйста, что доделать?
19.02.2016 в 08:20      +1  

Друзья, кто-нибудь может ответить? Можно ли "Категории раздела" переименовать (Мои фотографии и Моя семья переназвать по-другому)?
http://katrin331.ucoz.net/photo/

Разобралась, вопрос закрыт smile
13.04.2016 в 11:16      0  

Катерина, посмотрела ваш сайт, я полный чайник... создала раздел Фотоальбом, но в у меня не выходят Категории разделов? помогите пожалуйста настроить... Заранее спасибо!!!
13.04.2016 в 21:27      0  

Наверху в иконках управления жмите на "i", под ней вылезет меню, в нем жмите на "Панель управления", далее в открывшемся окне жмите на "Фотоальбомы" слева, далее в открывшемся окне жмите на Управлениями категориями", далее дерзайте :))
08.11.2015 в 10:11      0  

Здравствуйте! Сделала все по инструкции, получилось, спасибо!
Такой вопрос - название альбома стоит ПОСЛЕ его картинки. Можно ли сделать так, чтобы название было ПОД картинкой?
28.11.2015 в 20:17      0  

проводите (в меру) манипуляции с $CATEGORY_NAME$  в коде информера.
08.11.2016 в 20:42      0  

Какие именно манипуляции?
25.10.2015 в 12:15      0  

Хотелось бы, чтобы в начале выводили последние категории, то есть сначала выводится наивысший id категорий, а далее по убывающей. Как реализовать может кто-нибудь подскажет?

Проблема решена!
06.10.2015 в 15:36      0  

Сделал по другому.
25.09.2015 в 00:41      0  

Здравствуйте!
Всё сделал по инструкции, однако получилось так, что появилось название альбома, а картинка из него не появилась.
http://vsevolodozerki.ucoz.net/photo/

Спасибо!
02.04.2015 в 21:18      0  

Доброго времени суток! Пользовалась этим информером, все замечательно работало. Но сейчас занимаюсь адаптированием сайта под мобильные устройства, и вот тут никак не разберусь. На главной странице фотоальбома выводятся категории в виде фото в две колонки. И вот эти 2 колонки никак не хотят влазить в экран при вертикальном расположении планшета 8" или айфонов. Как правильно установить ширину фото, чтобы они автоматически подстраивались под мобильное устройство. Заранее благодарю.
03.04.2015 в 09:30      0  

<img src="ссылка на картинку" style="width:100%;">
03.04.2015 в 09:55      0  

Так картинки информером выбираются автоматически, я же явно ссылки на них не прописываю. Использую один в один указанный информер и .galery_one в CSS, вот вроде понимаю, что надо в .galery_one прописывать ширину, да не получается.
03.04.2015 в 10:03      0  

Нужно просто уточнять в CSS.
Т.е. если у вас картинка не имеет своего класса - берёте родительский класс и делаете следующим образом (например):
Цитата
.galery_one img {width:100%;}
03.04.2015 в 10:15      0  

Да, именно это и вставляю, но не срабатывает. Спасибо. Поняла, что иду все же в правильном направлении.
24.03.2015 в 12:41      0  

Доброго времени суток
Не могли бы подсказать как сделать в новостях фотографии из фотоальбома как тут http://sannikovo.ucoz.ru/ всё перепробовал вроде алиментарно Но не получается  

Заранее СПАСИБО
24.03.2015 в 12:51      0  

В новостях на указанном сайте фотографии прикреплены к самим материалам, фотоальбом здесь не причём.
Включите возможность загружать изображения при добавлении новостей и добавляйте/выводите.
Что бы вывести изображение в новости необходимо использовать специальные операторы: $IMG_URL1$ и так далее.
13.03.2015 в 13:16      0  

Такой вопрос, вставил второй информер.
Немного пошаманил с расстановкой текста и картинок с указанным тут же вариантом:

.galery_one { 
 display: inline-block; 
 width: 150px; 
 text-align: center;
}

Но вот как не крути, не могу добиться того чтобы сами картинки, или уж хотя бы текст под ними были по центру (текст относительно картинки) а картинки относительно самого блока...

Сайт: http://pvo-photo.ru

Буду очень благодарен за подсказку
1 2 3 ... 7 8 »