Новые сообщения · Участники · Правила форума · Поиск
Страница 1 из 11
Модератор форума: z-17, Anarki 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » "Страница с полной фотографией как в Path" - дизайн от MH (для фотоальбомов Ucoz)
"Страница с полной фотографией как в Path" - дизайн от MH
MHДата: Среда, 21.03.2012, 18:17 | Сообщение # 1
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
НОВЫЙ ДИЗАЙН СТРАНИЦЫ С ПОЛНОЙ ФОТОГРАФИЕЙ ДЛЯ UCOZ














Установка:

1) Это в css сайта:

Code
.str {
      width: 100%;
      height: 100%;
      margin: 0;
      background: url('http://qwe.ucoz.ru/images/bgph.jpg') no-repeat center fixed;
}
      .logoname{
      position: absolute; bottom: 40px; right: 40px;
      font-size: 16px; color: #eee;
      font-weight: bold;
      opacity: 0.5;
      font-family: "Century Gothic";
      }
      .polosa {
      height: 100%;
      width: 5px;
      background: #eee;
      opacity: 0.3;
      z-index: 0.5;
      position: absolute;
      left: 30%;
      }
.probel {
      clear: both;
      padding: 20 0px;
      display: block;
}
      .ava {
      float: left;      
      width: 60px; height: 60px;
      border-radius: 30px;      
      -webkit-border-radius: 30px;      
      -moz-border-radius: 30px;
      box-shadow:0px 0px 10px #000;      
      -webkit-box-shadow:0px 0px 10px #000;      
      -moz-box-shadow:0px 0px 10px #000;
      }
      .im {
      clear: both;
      float: left;
      z-index: 5;
      border: solid 5px #eee;
      border-radius: 3px;      
      -webkit-border-radius: 3px;      
      -moz-border-radius: 3px;
      box-shadow:0px 0px 10px #000;      
      -webkit-box-shadow:0px 0px 10px #000;      
      -moz-box-shadow:0px 0px 10px #000;
}
      .inf {
      background: #eee;
      background-image: -webkit-linear-gradient(top,#eee,#ccc);      
      background-image: -moz-linear-gradient(top,#eee,#ccc);      
      background-image: -ms-linear-gradient(top,#eee,#ccc);      
      background-image: -o-linear-gradient(top,#eee,#ccc);      
      background-image: linear-gradient(top,#eee,#ccc);
      width: 400px;
      height: auto;
      padding: 15px;
      border: solid 1px #fff;
      border-radius: 3px;      
      -webkit-border-radius: 3px;      
      -moz-border-radius: 3px;
      box-shadow:0px 0px 10px #000;      
      -webkit-box-shadow:0px 0px 10px #000;      
      -moz-box-shadow:0px 0px 10px #000;
      z-index: 2;
      font-size: 12px; color: #666; font-family: "Century Gothic";
      text-shadow: 0px 1px 0px #fff;
      text-align: left;
      }
      .phn {
      float: left; clear: both;
      font-size: 18px; color: #555; font-weight: bold; font-family: "Century Gothic";
      text-shadow: 0px 1px 0px #fff;
      }
.phot {
      width: auto;
      height: auto;
}
a.l:link, a.l:hover, a.l:visited {
      text-decoration: none;
}
.hideCont {
      width: 200px;
      height: auto;      
      float: left;
      position: relative;
      right: 345px;
      top: 10px;
      padding-bottom: 10px;
}      
a.hideBtn:link, a.hideBtncom:visited {
      color: #666;      
      text-decoration: none;
      font-size: 12px;
      font-face: 'Arial';
}
a.hideBtn:hover {
      color: #555;
}
      .cen {
      width: auto;
      height: 100%;
      clear: both;
      position: absolute;
      left: 15%;
      z-index/: 5;
      }
      .pole {
      text-align: left;
      }
      .bokava {
      width: 80px;
      }
      .home {position: absolute;
      top: 65px;
      right: 40px;
      opacity: 0.5}
      .home:hover {
      opacity: 1;
      }


2) Открываем: Управление дизайном - Фотоальбом - Страница с полной фотографией и комментариями и вставляем:

- в <head>

Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>


ВНИМАНИЕ!!! Вставляя код, указанный выше, ничего не удаляйте из того, что находилось ранее между <head> и </head>

- после <body> вместо прежнего кода

Code
$ADMIN_BAR$
           
           
<div class="str">
<div class="polosa"></div>
           
      <a class="l" href="http://merkulev.tumblr.com/">
      <div class="logoname">
      Design by MH
      </div>
      </a>
      <div class="home">
      <a href="/photo">
      <img src="http://qwe.ucoz.ru/iconka/Deep_Home.png" border="0" title="Фотоальбом" />
      </a><br><br>
      <a href="$CAT_URL$">
      <img src="http://qwe.ucoz.ru/iconka/Deep_Folder.png" border="0" title="$CAT_NAME$" />
      </a>
      </div>
           
      <table class="cen" align="center" valign="top">
      <tr>
      <td class="bokava" align="left" valign="top">      
      <div class="probel"></div>
           
      <a href="$PROFILE_URL$">
      <img src="http://qwe.ucoz.ru/images/sozdan_fotoapparat_s_razresheniem_160_mp.jpg" class="ava" title="$USER$">
      </a>
      </td>
      <td class="pole" valign="top">

      <div class="probel"></div>
           
      <div class="phot">
      <img src="$PHOTO_URL$" class="im">
      <?if($MODER_PANEL$)?><div style="clear: both;">$MODER_PANEL$</div><?endif?>      
      </div>
           
      <div class="probel"></div>
           
      <div class="inf">
      <div style="float: left;">
      <h1 class="phn">$PHOTO_NAME$</h1>
      </div>
      <div style="float: right;">
      <?if($RATING$)?><?$RSTARS$('12','/.s/img/stars/8/12.png','1','float')?><?endif?>
      </div>
      <div style="clear: both; padding: 5px;"></div>
      <div style="float: left; padding-top: 10px;">
      - $ADD_DATE$
      </div>
           
      <div style="float: right;">
      <img src="http://qwe.ucoz.ru/iconka/Deep_Pools.png" border="0" title="Просмотров: $REVIEWS$" style="padding-right: 10px;"/>
      <a class="hideBtn" href="javascript://" onclick="$('#hideCont1').slideToggle('normal');return false;"><img src="http://qwe.ucoz.ru/iconka/Deep_Save.png" border="0" title="Поделиться" /></a>
      <div style="display:none;" id="hideCont1" class="hideCont">
      <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
      <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,moikrug"></div>      
      <div style="clear: both;"></div></div>
      </div>
      <div style="clear: both;"></div>      
      </div>
      <div class="probel"></div>
      <div class="inf">
          <center>$OTHER_PHOTOS$</center>
      </div>
      <div style="position: absolute; bottom: 5px; opacity: 0.1;">$POWERED_BY$</div>
      </td>
      </tr>
      </table>
           
</div>
</body>
</html>


Готово! Наблюдаем результат. О всех багах и ошибках прошу сообщать в этой теме.




Обновления:


- нет




Автор - MH. Со всеми замечаниями и пожеланиями обращаться ниже. На дизайн вдохновил Path.
Как установить кнопки социальных сетей?

Не поленитесь просмотреть весьма внушительный Список рабочих uCoz скриптов

http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH


Сообщение отредактировал MH - Среда, 21.03.2012, 21:15
 
HaskerДата: Среда, 21.03.2012, 19:05 | Сообщение # 2
Генерал-полковник
Сообщений: 986
Репутация: 41
Социальная репутация:

Статус: Offline
MH, красиво

 
volfgunusДата: Среда, 21.03.2012, 23:51 | Сообщение # 3
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
а нафига библиотеку jquery подключать? ucoz же автоматом подключает её

Сообщение отредактировал volfgunus - Среда, 21.03.2012, 23:52
 
MHДата: Четверг, 22.03.2012, 09:32 | Сообщение # 4
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
volfgunus, чтобы ты спросил =)
http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH
 
ДарьяДата: Вторник, 21.01.2014, 07:39 | Сообщение # 5
Сержант
Сообщений: 35
Репутация: 0
Социальная репутация:

Статус: Offline
а у меня не получилось так как на живом примере. А как сделать так как на живом примере?
 
UniusДата: Вторник, 21.01.2014, 18:40 | Сообщение # 6
Подполковник
Сообщений: 117
Репутация: 20
Социальная репутация:

Статус: Offline
Дарья, заходим на живой пример=>пкм=>просмотреть исходный код=>копировать=>вставить у себя на сайте
 
ДарьяДата: Среда, 22.01.2014, 04:34 | Сообщение # 7
Сержант
Сообщений: 35
Репутация: 0
Социальная репутация:

Статус: Offline
Цитата Unius ()
Дарья, заходим на живой пример=>пкм=>просмотреть исходный код=>копировать=>вставить у себя на сайте

Зашла, правой кгопкой мыши есть 2 варианта (посмотреть код страницы и посмотреть код элемента) выбрала первый, скопировала и вставила в фотоальбом страница с полной фотографией и коментариями. ПРИ СОХРАНЕНИИ -НЕ НАЙДЕН КОД $POWERED_BY$. . Я ПРОВЕРИЛА, ЕГО В ИСХОДНИКЕ НЕТУ НА МОЕЙ СТРАНИЦЕ, А ТУТ ПРОСИТ, ЧТО ДЕЛАТЬ?
 
SleepWalkerДата: Среда, 22.01.2014, 22:21 | Сообщение # 8
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
надо его куда-то вставить. это обязательное условие юкоза. То, что у вас не было этого кода, возможно, последствие импорта шаблонов или использования генератора шаблонов.
Time Waits For No One
 
ДарьяДата: Четверг, 23.01.2014, 05:08 | Сообщение # 9
Сержант
Сообщений: 35
Репутация: 0
Социальная репутация:

Статус: Offline
не получилось(((

Добавлено (23.01.2014, 05:08)
---------------------------------------------
но то что получилось в принципе тоже подойтет. Единственное как можно Фото автора поменять на самого автора фоторгафий?

 
UniusДата: Четверг, 23.01.2014, 17:28 | Сообщение # 10
Подполковник
Сообщений: 117
Репутация: 20
Социальная репутация:

Статус: Offline
Дарья, $PHOTO$
 
ДарьяДата: Пятница, 24.01.2014, 04:12 | Сообщение # 11
Сержант
Сообщений: 35
Репутация: 0
Социальная репутация:

Статус: Offline
и куда его вставить? я сама попробовала догадаться, но ничего не получилось.
 
UniusДата: Пятница, 24.01.2014, 15:30 | Сообщение # 12
Подполковник
Сообщений: 117
Репутация: 20
Социальная репутация:

Статус: Offline
Дарья, вам бы не помешало выучить html, css

Добавлено (24.01.2014, 15:30)
---------------------------------------------
Дарья, htmlbook.ru

 
ДарьяДата: Суббота, 25.01.2014, 02:45 | Сообщение # 13
Сержант
Сообщений: 35
Репутация: 0
Социальная репутация:

Статус: Offline
спасибо за отве
 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » "Страница с полной фотографией как в Path" - дизайн от MH (для фотоальбомов Ucoz)
Страница 1 из 11
Поиск: