Новый вид фотоальбома для ucoz NEW 2012

Страница 1 из 1
1

GIPER

Дата: Ср, 25-01-12, 23:33 | Сообщение # 1

Администратор

Группа: Администратор

Сообщений: 98

Репутация: 100

Статус:

Доделал вид фотоальбома для своего сайта, и решил его выложить в общее пользование. Архив со всеми материалами (инструкция по установке, css, вид фотографий, Страница с полной фотографией и комментариями, картинки.
АРХИВ
Вид фотоальбома

Установка:

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. Зайдите в ПУ > Фотоальбомы > Управление дизайном модуля > Страница с полной фотографией и комментариями и замените всё что находится между и на содержимое текстового документа "Страница с полной фотографией и комментариями".

6. Наслаждаемся красивым видом своего фотоальбома!

Code

   CSS
/* Вид фотоальбома by Elite-Portal.Ru */
   .s_picture {
   background: url("http://[color=red]elite-portal.ru[/color]/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://[color=red]elite-portal.ru[/color]/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://[color=red]elite-portal.ru[/color]/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://[color=red]elite-portal.ru[/color]/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;
   }
   /* -------------- */

в CSS всё что выделено красным цветом удалите после того, как зальёте картинки к себе на сервер.

вид фотографий

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>

   Страница с полной фотографией и комментариями
<a href="$HOME_PAGE_LINK$">Главная</a> » <a href="$MODULE_URL$">Фотоальбом</a> <?if($SECTION_NAME$)?>» <a href="$SECTION_URL$">$SECTION_NAME$</a><?endif?> » <a href="$CAT_URL$">$CAT_NAME$</a> » $PHOTO_NAME$
   <hr />
   <table border="0" width="100%" cellspacing="1" cellpadding="2">
   <center><div class="preview">
   <img src="$PHOTO_URL$" width="420" height="262" alt="$PHOTO_NAME$">
   <div style="width:149px; height:22px; font:normal 12px Tahoma; line-height:12px; color:#555555; text-align:center; float:left; clear:right; display: inline; padding-top:13px; margin-left:5px;">Размер: $PHOTO_SIZE$</div>
   <div style="width:189px; height:22px; font:normal 12px Tahoma; line-height:12px; color:#555555; text-align:center; float:left; clear:right; display: inline; padding-top:13px; margin-left:37px;"><a href="$FULL_PHOTO_URL$" onclick="return !window.open(this.href)" title="Посмотреть в реальном размере">Посмотреть в реальном размере</a></div>
   </div> </center>

   <tr><td colspan="2" align="center">$PHOTO_DESCR$</td></tr>
   <tr><td colspan="2" class="eDetails" style="text-align:center;">Просмотров: $REVIEWS$ | Размеры: $PHOTO_SIZE$px/$PHOTO_WEIGHT$Kb<div style="padding-top:4px;">Дата: $ADD_DATE$
   <?if($TAGS$)?> | Теги: $TAGS$<?endif?>
   <?if($USER$)?> | Добавил: <a href="$PROFILE_URL$">$USER$</a><?endif?>
   <?if($MODER_PANEL$)?> | $MODER_PANEL$<?endif?></div></td></tr>
   <?if($OTHER_PHOTOS$)?><tr><td colspan="2" height="10"><hr /></td></tr><tr><td colspan="2" align="center">$NEAR_PHOTOS$ <div style="padding-top:5px">$OTHER_PHOTOS$</div></td></tr><?endif?>
   </table><hr />

   <?if($COM_IS_ACTIVE$)?>
   <?if($COM_CAN_READ$)?>
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
   <tr><td width="60%" height="25">Всего комментариев: <b>$COM_NUM_ENTRIES$</b></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>
   <tr><td colspan="2">$COM_BODY$</td></tr>
   <tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>
   <tr><td colspan="2" height="10"></td></tr>
   </table>
   <?endif?>

   <?if($COM_CAN_ADD$)?>
   $COM_ADD_FORM$
   <?else?>
   <?if($USER_LOGGED_IN$)?><?else?><div align="center" class="commReg">Добавлять комментарии могут только зарегистрированные пользователи.
[ <a href="$REGISTER_LINK$">Регистрация</a> | <a href="$LOGIN_LINK$">Вход</a> ]</div><?endif?>
   <?endif?>
   <?endif?>

Новый вид фотоальбома для ucoz NEW 2012

Страница 1 из 1
1