Раздел «Скрипты»
Раздел «Дизайн»
Форма входа

Чат сайта
ОК

Функции

Контакты
Наши флудеры
Ник: [npu3pak]
Сообщений: 28
Директор
[npu3pak]
Ник: FOZ)JacK
Сообщений: 6
Проверенные
FOZ)JacK
Ник: DEagle
Сообщений: 0
Пользователи
DEagle
Реклама
Купить ссылку здесь


Кто на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пользователи
Гости
пользователи отсутствуют
Скрипты Новый вид фотоальбома для ucoz 


15.9 Kb mb

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

 при распространении просьба указывать ссылку на источник

Установка:
Code
Установка:  

  1. Зайдите в ПУ > Настройки > Общие настройки > модуль фотоальбомы > Ставим: 1)Размеры демо-картинки: 210х131 2)Размеры фотографии, выводимой на отдельной странице: 420x262  

  2. В корень сайта заливаем папку images  
  (воспользуйтесь любым FTP менеджером. Мы, команда сайта Script-uCoz.Moy.Su, советуем использовать бесплатный FTP-менеджер FileZilla )  

  3. Зайдите в ПУ > Управление дизайном > в таблицу стилей CSS в самый низ вставьте всё из текстового дукумента "CSS".  

  4. Зайдите в ПУ > Фотоальбомы > Управление дизайном модуля > Вид фотографий и замените всё что там есть на содержимое текстового документа "вид фотографий".  

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

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

  Данный вид фотоальбома для вас подготовила команда сайтa, при распространении материала просьба указывать ссылочку на источник


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;">  
  <div style="position:absolute;z-index:30;">$MODER_PANEL$</div>  
  <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>


Страница с полной фотографией и комментариями:
Code

<a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a> » <a href="$MODULE_URL$"><!--<s5169>-->Фотоальбом<!--</s>--></a> » <a href="$SECTION_URL$">$SECTION_NAME$</a> » <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;"><!--<s3177>-->Просмотров<!--</s>-->: $REVIEWS$ | <!--<s5162>-->Размеры<!--</s>-->: $PHOTO_SIZE$px/$PHOTO_WEIGHT$Kb<div style="padding-top:4px;"><!--<s3165>-->Дата<!--</s>-->: $ADD_DATE$  
   | <!--<s5308>-->Теги<!--</s>-->: $TAGS$  
   | <!--<s3178>-->Добавил<!--</s>-->: <a href="$PROFILE_URL$">$USER$</a>  
   | $MODER_PANEL$</div></td></tr>  
  <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>  
  </table><hr />  

    
    
  <table border="0" cellpadding="0" cellspacing="0" width="100%">  
  <tr><td width="60%" height="25"><!--<s5183>-->Всего комментариев<!--</s>-->: <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>  
    

    
  $COM_ADD_FORM$  
    
  <div align="center" class="commReg"><!--<s5237>-->Добавлять комментарии могут только зарегистрированные пользователи.<!--</s>--><br />[ <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a> ]</div>  
    
  


Всё! теперь наслаждаемся красивым фотоальбомом!
Оставляйте комментарии, хочется знать ваше мнение о данном виде фотоальбома! :)

Добавлено (22.01.2012, 12:30)
---------------------------------------------
Забыл добавить, в CSS это удалите: "http://elite-portal.ru" после того, как зальёте картинки к себе на сервер.

Автор: Не указан
Источник: Не указан
Вы сейчас просматриваете файл Новый вид фотоальбома для ucoz. Данный файл находится в категории Скрипты. Чтобы увидеть другие файлы из этой категории, перейдите по этой ссылке: Скрипты. Для того чтобы скачать Новый вид фотоальбома для ucoz нажмите на кнопку СКАЧАТЬ выше. Надеемся вам понравился файл Новый вид фотоальбома для ucoz и пригодился. По всем вопросам обращайтесь на форуме или к администарции.

Скрипты

2 комментария
6524 просмотров
автор: [npu3pak]
дата: 25.01.2012, 15:19
july71
23.07.2015 01:02
ойой !сначала получилось все красиво .как у вас .а теперь  пять плохо некрасиво как исправить?
july71
22.07.2015 23:47
спасибо вам .долго искала подробную инструкцию как изменить вид фотоальбома .у вас нашла только у меня почему то когда открывается полная фотография ,изображение искажено От чего это зависит ? и как исправить ? сайт http://july71.ucoz.ru/photo/
Вы не можете добавлять комментарии

При копировании материалов → указывайте ссылку на источник!
Script-uCoz © 2011-2012 Все права защищены. Хостинг от uCoz
Счётчики
Сегодня нас посетило
Seo анализ сайта
Показано 2 последних комментария из 16.
ойой !сначала получилось все красиво .как у вас .а теперь  пять плохо некрасиво как исправить? дальше »
спасибо вам .долго искала подробную инструкцию как изменить вид фотоальбома .у вас нашла только у ме дальше »
Мини-статистика
Всего зарегистрировано: 72
Постов на форуме: 34
Тем на форуме: 33