"Страница с полной фотографией и комментариями" by MH v.1.2

Большой портал
Здравствуй, желанный Гость! Авторизуйся или войди, чтобы стать частью нашей дружной семьи! Вход Регистрация

Страница 1 из 1 1
Модератор форума: Admin

"Страница с полной фотографией и комментариями" by MH v.1.2 ("Страница с полной фотографией и комментариями" by MH v.1.2)

"Страница с полной фотографией и комментариями" by MH v.1.2

BaniK ^Offline

Дата: Среда, 26.12.2012, 17:35 | Сообщение # 1

Освоившийся

Сообщений: 122

Награды: 1

Репутация: 1001

Замечания: 0%

НОВЫЙ КРАСИВЫЙ ДИЗАЙН СТРАНИЦЫ С ПОЛНОЙ ФОТОГРАФИЕЙ И КОММЕНТАРИЕВ К НЕЙ v.1.2 ДЛЯ САЙТОВ UCOZ
СКРИНШОТ
Особенности: наличие подробной информации о фото, удобная навигация, наличие социальных закладок, возможность получения ссылки на изображение, скрывающиеся комментарии, быстрое редактирование фото, возможность быстрого добавления нового фото, ссылка на картинку выдается в текстовом поле с автовыделением при клике, простота и удобство.
Установка:

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

Код

/* StartStyle Photo*/
.str {
      clear: both;
      width: 100%;
      height: auto;
      min-height: 100%;
      margin: 0;
      background: #151515;
      background-image: -webkit-linear-gradient(top,#151515,#050505);
      background-image: -moz-linear-gradient(top,#151515,#050505);
      background-image: -ms-linear-gradient(top,#151515,#050505);
      background-image: -o-linear-gradient(top,#151515,#050505);
      background-image: linear-gradient(top,#151515,#050505);
}
.telo {
      width: auto;
      height: auto;
      background: #f4f4f4;
      padding: 20px;
      box-shadow:0px 0px 30px #000000;
      -webkit-box-shadow:0px 0px 30px #000000;
      -moz-box-shadow:0px 0px 30px #000000;
      border-top: solid 1px #c0c0c0;
      border-left: solid 1px #c0c0c0;
      border-right: solid 1px #c0c0c0;
      border-bottom: solid 2px #808080;
      border-radius: 8px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
}
.probel {
      clear: both;
      padding: 10 0px;
      display: block;
}
.pole {
      width: auto;
      height: auto;
      color: #454545;
      font-size: 12px;
      font-face: 'Arial';
      text-shadow: 0px 1px 0px #ffffff;
}
.nameph {
      width: 100%;
      height: auto;
      clear: both;
      padding: 0 0 25 0px;
      border-bottom: dashed 1px #a0a0a0;
      text-align: left;
}
.nam {
      float: left;
      color: #151515;
      font-size: 12px;
      font-face: 'Arial';
      text-shadow: 0px 1px 0px #ffffff;
      font-weight: bold;
}
.phot {
      float: left;
      width: auto;
      height: auto;
      padding: 15 0 10 0px;
}
.im {
      box-shadow:0px 0px 5px #a0a0a0;
      -webkit-box-shadow:0px 0px 5px #a0a0a0;
      -moz-box-shadow:0px 0px 5px #a0a0a0;
      border: solid 10px #fefefe;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
}
.phinfo {
      clear: both;
      float: left;
      width: 150px;
      height: auto;
      padding: 5 10px;
      margin-top: 13px;
      margin-left: 10px;
      background: #fefefe;
      box-shadow:0px 0px 5px #a0a0a0;
      -webkit-box-shadow:0px 0px 5px #a0a0a0;
      -moz-box-shadow:0px 0px 5px #a0a0a0;
      color: #757575;
      font-size: 12px;
      font-face: 'Arial';
      text-align: center;
      line-height: 1.5em;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
}
a.hideBtn:link, a.hideBtn:visited {
      color: #957575;
      text-decoration: none;
}
a.hideBtn:hover {
      color: #553535;
}
.hideCont {
      clear: both;
      width: 150px;
      height: auto;
      margin-top: 15px;
      padding: 10 0px;
      position: absolute;
      z-index:30;
      float: left;
      background: #fefefe;
      box-shadow:0px 0px 5px #a0a0a0;
      -webkit-box-shadow:0px 0px 5px #a0a0a0;
      -moz-box-shadow:0px 0px 5px #a0a0a0;
      color: #757575;
      font-size: 12px;
      font-face: 'Arial';
      text-align: center;
      line-height: 1.5em;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
}
b.des {
      color: #b5b5b5;
      font-size: 12px;
      font-face: 'BRAZIL';
      text-shadow: 0px 1px 0px #ffffff;
      font-weight: bold;
}
a.hideBtncom:link, a.hideBtncom:visited {
      color: #957575;
      text-decoration: none;
      font-size: 12px;
      font-face: 'Arial';
}
a.hideBtncom:hover {
      color: #553535;
}
.com {
      width: 100%;
      height: auto;
      padding: 5 0px;
      margin-top: 0px;
      background: #fefefe;
      box-shadow:0px 0px 5px #a0a0a0;
      -webkit-box-shadow:0px 0px 5px #a0a0a0;
      -moz-box-shadow:0px 0px 5px #a0a0a0;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      text-align: center;
}
.stran {
      width: 100%;
      height: auto;
      padding: 5 0px;
      margin-top: 0px;
      background: #fefefe;
      box-shadow:0px 0px 5px #a0a0a0;
      -webkit-box-shadow:0px 0px 5px #a0a0a0;
      -moz-box-shadow:0px 0px 5px #a0a0a0;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      text-align: left;
}
.hideContcom {
      width: 100%;
      height: auto;
      margin-top: 10px;
      padding: 0px;
}
/* EndStyle Photo*/

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

- в

Код

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

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

Код

$ADMIN_BAR$
      <div class="str">
<div class="probel"></div>
      <table class="telo" align="center" valign="top">
      <tr>
      <td class="pole" align="left" valign="top">
      <div class="nameph">
      <b class="nam">$PHOTO_NAME$
      <?if($USER_LOGGED_IN$)?>
      <a href="javascript://" onclick="uWeb_photo.open()"><img border="0" align="absmiddle" src="http://www.4ucoz.net/imgfiles/plus.png" style="margin-bottom: 4px; margin-left:5px;" title="Добавить новое фото"></a>
      <script type="text/javascript" src="http://www.4ucoz.net/js/ydobnoe_dobavlenie_v_ajax_photo.js"></script>
      <?endif?></b>
      <div style="float: right;">
      <?if($RATING$)?><?$RSTARS$('12','/.s/img/stars/8/12.png','1','float')?>
      </div>
      </div>

      <table align="center"><tr><td valign="top">
      <div class="phot">
      <?if($MODER_PANEL$)?><div style="position:absolute; z-index:30; padding: 10 0 0 10px;">$MODER_PANEL$</div><?endif?>
      <img src="$PHOTO_URL$" class="im">
      </div>
      </td><td valign="top">
      <div class="phinfo">
      <b>Добавил:</b> <a href="$PROFILE_URL$" style="color: #757575;" title="$USER_FULL_NAME$">$USER$</a>
      </div><br>
      <div class="phinfo">
      <b>Дата:</b> $ADD_DATE$
      </div><br>
      <div class="phinfo">
      <b>Просмотров:</b> $REVIEWS$
      </div><br>
      <div class="phinfo">
      <b>Рейтинг:</b> <span id="entRating$ID$">$RATING$</span>/<span id="entRated$ID$">$RATED$</span>
      </div><br>
      <div class="phinfo">
      <b>Размеры:</b> $PHOTO_SIZE$px/$PHOTO_WEIGHT$Kb
      </div><br>
      <div class="phinfo">
      <b>Теги:</b> <?if($TAGS$)?>$TAGS$<?else?>Нет<?endif?>
      </div><br>
      <div class="phinfo">
      <b>Описание:</b> <?if($PHOTO_DESCR$)?>$PHOTO_DESCR$<?else?>Нет<?endif?>
      </div><br>
      <div class="phinfo">
      <a class="hideBtn" href="javascript://" onclick="$('#hideCont1').slideToggle('normal');return false;"><b>ДОПОЛНИТЕЛЬНО</b></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,lj"></div>
<hr style="border-top: solid 1px #e0e0e0;">
<b>Ссылка на картинку:</b><br>
<form><input type="text" value="$PHOTO_URL$" onclick="jFocus(this)" style=""/></form>
<?if($FULL_PHOTO_URL$)?><a href="$FULL_PHOTO_URL$" target="_blank" style="color: #757575;">В реальном размере</a><?endif?>
<hr style="border-top: solid 1px #e0e0e0;">
<b class="des">Design by <a href="http://merkulev.tumblr.com/" style="color: #b5b5b5;">MH</a></b></div></div>
</td></tr></table>
<div style="clear: both;"></div>

      <div class="stran">
      <div style="padding-left: 15px;"><b>Страницы:</b> <a href="/" style="color: #757575">Главная</a> | <a href="/photo" style="color: #757575">Фотоальбом</a> <?if($SECTION_NAME$)?>| <a href="$SECTION_URL$" style="color: #757575">$SECTION_NAME$</a><?endif?><?if($CAT_NAME$)?>| <a href="$CAT_URL$" style="color: #757575">$CAT_NAME$</a><?endif?></div>
      </div>
      <div style="clear: both; padding: 5px;"></div>

<?if($COM_IS_ACTIVE$)?>
<?if($COM_CAN_READ$)?>
      <div class="com">
      <a class="hideBtncom" href="javascript://" onclick="$('#hideCont2').slideToggle('normal');return false;"><b>ОСТАВИТЬ КОММЕНТАРИЙ</b></a>
      </div>
      <div style="display:none; clear:both;" id="hideCont2" class="hideContcom">
      <div style="clear: both; padding: 5px;"></div>
      Всего комментариев: <b>$COM_NUM_ENTRIES$</b><div style="float: right;">$COM_PAGE_SELECTOR$</div>
      <div style="clear: both; padding: 5px;"></div>
      <div align="center"><center>
      $COM_BODY$
      </center></div>
<div style="clear: both;"></div>
<center>$COM_PAGE_SELECTOR1$</center>
<div style="clear: both; padding: 5px;"></div>
<?endif?>
<?if($COM_CAN_ADD$)?>
<div align="center">
$COM_ADD_FORM$
</div>
<?else?>
<?if($USER_LOGGED_IN$)?><?else?><div align="center" class="commReg">Добавлять комментарии могут только зарегистрированные пользователи.
[ <a href="$REGISTER_LINK$">Регистрация</a> | <a href="$LOGIN_LINK$">Вход</a> ]</div><?endif?>
<?endif?>
</div>
<?endif?>
<?endif?>
<div style="clear: both; padding: 5px;"></div>

      </td>
      </tr>
      </table>

<?if($NEAR_PHOTOS$)?>
<div style="clear: both; padding: 5px;"></div>
      <table class="telo" align="center">
      <tr>
      <td>
      $NEAR_PHOTOS$
      </td>
      </tr>
      </table>
<?endif?>

<div class="probel"></div>
$POWERED_BY$
<div class="probel"></div>

<div style="display:none;"><div class="photo_out"><table width="100%"><tr><td align="left" valign="top"><img src="$THUMBNAIL_URL$" style="max-width:150px;"></td><td width="100%" align="left" valign="top"><table style="width:100%;"><tbody><tr><td id="tdF">URL:</td><td align="left" style="vertical-align:top"><input tabindex="1" style="width:200px;" type="text" class="t_sel" value="$PHOTO_URL$" onclick="this.focus();this.select();"></td></tr><tr><td id="tdF">BB:</td><td align="left" style="vertical-align:top"><input tabindex="2" style="width:200px;" type="text" value="[url=$PHOTO_URL$][img]>$PHOTO_URL$[/img][/url]" onclick="this.focus();this.select();"></td></tr><tr><td id="tdF">HTML:</td><td align="left" style="vertical-align:top"><input tabindex="3" style="width:200px;" type="text" value="<a href='$PHOTO_URL$'><img src='<?if($PHOTO_SIZE$ > 500)?>$FULL_PHOTO_DIRECT_URL$<?else?>$PHOTO_URL$<?endif?>'></a>" onclick="this.focus();this.select();"></td></tr></tbody></table><hr><center>Размер: <a href="javascript://">$PHOTO_SIZE$</a></center></td></tr></table></div></div>

      </div>
</body>
</html>

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

Свернуть

Развернуть

Необходима авторизация

«Уважаемые гости форума!!!»