Доделал вид фотоальбома для своего сайта, и решил его выложить в общее пользование. Архив со всеми материалами (инструкция по установке, css, вид фотографий, Страница с полной фотографией и комментариями, картинки.) :
при распространении просьба указывать ссылку на источник http://elite-portal.ru/
Установка:
Code
Установка:
1. Зайдите в ПУ > Настройки > Общие настройки > модуль фотоальбомы > Ставим: 1)Размеры демо-картинки: 210х131 2)Размеры фотографии, выводимой на отдельной странице: 420x262
2. В корень сайта заливаем папку images
(воспользуйтесь любым FTP менеджером. Мы, команда сайта Elite-Portal.Ru, советуем использовать бесплатный FTP-менеджер FileZilla http://elite-portal.ru/load....1-0-701 )
3. Зайдите в ПУ > Управление дизайном > в таблицу стилей CSS в самый низ вставьте всё из текстового дукумента "CSS".
4. Зайдите в ПУ > Фотоальбомы > Управление дизайном модуля > Вид фотографий и замените всё что там есть на содержимое текстового документа "вид фотографий".
5. Зайдите в ПУ > Фотоальбомы > Управление дизайном модуля > Страница с полной фотографией и комментариями и замените всё что находится между <!-- <body> --> и <!-- </body> --> на содержимое текстового документа "Страница с полной фотографией и комментариями".
6. Наслаждаемся красивым видом своего фотоальбома!
Данный вид фотоальбома для вас подготовила команда сайта Elite-Portal.Ru, при распространении материала просьба указывать ссылочку на источник http://elite-portal.ru/
CSS:
Code
/* Вид фотоальбома by Elite-Portal.Ru */
.s_picture {
background: url("http://elite-portal.ru/images/bg_picty.png") no-repeat scroll 0 0 transparent;
height: 177px;
margin-right: 6px;
margin-top: 6px;
padding-left: 0px;
padding-top: 10px;
width: 230px;
}
.s_picture img {
height: 131px;
width: 210px;
}
.picty_albom {
background: url("http://elite-portal.ru/images/category_ic.png") no-repeat scroll 0 0 transparent;
clear: right;
color: #636363;
display: inline;
float: left;
font: 12px/12px Georgia;
height: 20px;
margin-bottom: 3px;
margin-left: 5px;
margin-top: 13px;
overflow: hidden;
padding-left: 17px;
text-shadow: 0 1px #111111;
width: 107px;
}
.picty_size {
background: url("http://elite-portal.ru/images/resolution_ic.png") no-repeat scroll 0 0 transparent;
clear: right;
color: #636363;
display: inline;
float: left;
font: 12px/12px Georgia;
height: 20px;
margin-bottom: 3px;
margin-top: 13px;
padding-left: 7px;
text-shadow: 0 1px #111111;
width: 80px;
}
.preview {
background: url("http://elite-portal.ru/images/preview.png") no-repeat scroll 0 0 transparent;
float: center;
height: 298px;
margin-left: 12px;
margin-top: 10px;
padding-left: 8px;
padding-top: 10px;
width: 430px;
align: center;
}
/* -------------- */
вид фотографий:
Code
<div align="center">
<div style="padding-bottom:1px;">
<?if($MODER_PANEL$)?><div style="position:absolute;z-index:30;">$MODER_PANEL$</div><?endif?>
<div class="s_picture">
<a href="$PHOTO_URL$" title="$PHOTO_NAME$">$PHOTO$</a>
<div class="picty_albom"><a href="$CAT_URL$">$CAT_NAME$</a></div>
<div class="picty_size">$PHOTO_SIZE$</div>
</div>
</div></div>
Страница с полной фотографией и комментариями:
Всё! теперь наслаждаемся красивым фотоальбомом!
Оставляйте комментарии, хочется знать ваше мнение о данном виде фотоальбома!
в CSS это удалите: "http://elite-portal.ru" после того, как зальёте картинки к себе на сервер.
