| admin | Дата: Суббота, 21.12.2013, 14:47 | Сообщение # 1 |
 Главный админ
Группа: Администраторы
Сообщений: 336
Награды: 0
Репутация: 1
Статус: Offline
| Вид материалов фотоальбома на uCoz
Совсем недавно задумывались мы, как бы разнообразить наши фотоальбомы на сайтах. Опять же подсказал Ucoz. Новая свежая идея, как сделать симпатичные превью для вида категорий фотоальбома. Согласитесь, это полезная штука, нужная тем, у кого их действительно много. Фотографы всякие или же просто товары на сайте разбиты по категориям.
Или у вас попытка создать социальную сеть, новую и неповторимую, а там будут фотоальбомы и превью к ним. В общем, не зависимо от целей - встречайте новый скрипт, который мы уже успели оценить по достоинству. Он красивой сделан. И сделан с умом, человеком, или несколькими человеками, которые сумели-таки отрастить руки из нужных мест. Превью содержит, собственно, заглавную фотографию альбома, сведения о количестве фотографий, и, что особенно порадовало - последнюю добавленную в категорию фотографию, название, количество изображений и описание. Свежо! В любом случае, этому скрипту следует уделить внимание - мы вот поставили на пару своих сайтов - протестируем. Вы тоже ставьте, потому что это уже не стандартный вид превью, который всем наскучил, а такой, как на других хороших CMS. Отличный повод занести в список скриптов, которые нужно установить с пометкой "обязательно". И комментируйте! Мне очень интересно ваше мнение.
Установка
Создаем информер
Раздел: Фотоальбомы
Тип данных: Категории
Количество колонок по желанию
Код шаблона информера:
Код <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:first img');</script>
Вставьте следующий код в Таблицу стилей (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;}
charset="utf-8">
data-yashareType="button" data-
yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus">
|
| |
| |
