Вид категорий фотоальбома с превью для uCoz

5310 просмотров Alan_Writer 07.12.2013

Вид категорий фотоальбома с превью для uCoz. Если Вам надоел стандартный, некрасивый и не информативный вид категорий фотоальбома (или даже другого модуля), и вы хотели бы видеть его таким, как на других CMS, то есть интересное решение.

В данном интересном решении, категории будут выводится при помощи информера, который будет отображать основную информацию категории: её название, общее количество картинок в ней, описание (если оно есть), ну самое главное - последнюю добавленную картинку.

Скрипт был взят из паблика, но в нем была небольшая ошибка с картинками. Теперь она исправлена, скрипт проверен и на 100% работоспособен.

Установка модификации:

1). Создаем новый информер: [ Фотоальбомы · Категории · Колонки: (по желанию) ]
Шаблон информера:

Код

<div class="g-album">
<div class="g-album-p">
<a href="$CATEGORY_URL$">
<span class="g-album-s" id="c$NUMBER$">
<span class="g-album-b"></span>
</span>
</a>
</div>
<div class="g-album-i">
<b>$CATEGORY_NAME$</b><br>
Фотографий: $NUM_DATA$<br>
<div class="g-album-descr">$CATEGORY_DESCR$</div>
</div>
</div>

<script type="text/javascript">
$('#c$NUMBER$').load('$CATEGORY_URL$ .phtTdMain img:eq(0)');
</script>

2). Вставьте следующие стили в свой основной CSS:

Код

.g-album {display:inline-block; overflow:hidden; border:1px dashed #ccc; border-radius:3px; padding:5px; margin-bottom:15px;}
.g-album-p {float:left; width:100px;}
.g-album-b {float:left; width:90px; height:67px;}
.g-album-i {float:left; width:150px;}
.g-album-s img {width:90px; height:67px; border-radius:3px;}
.g-album-descr {font-size:10px; color:#666; margin-top:5px;}

При желании и знаниях CSS, вы сможет легко изменить вид и оформление этого вида категорий на свой вкус.

На этом все. Оценивайте, комментируйте, подписывайтесь кароч!

Теги: новые категории, Информер для ucoz, категории фотоальбома, категории с превью, Вид категорий

Похожие материалы

Красивый информер файлов для uCoz…

2 Комментария

Порядок вывода комментариев:

Спам

defaultNick8670 • 22.12.2020

Вопрос решился.
Чтобы изображения категорий отображались, на страницах категорий должны выводиться фотографии, из которых скрипт будет брать первую.
Я же заменил все фотки на этот информер smile

Кстати, ошибка в консоли никуда не делась.

Спам

defaultNick8670 • 22.12.2020

Сначала заработало. Но спустя пару часов картинки не показывает.
В консоли ошибка: photopage.min.js:1 Uncaught TypeError: Cannot read property 'currentPage' of undefined

Дзен-Буддизм в играх: Shadow of the Colossus