Понедельник, 25.01.2021, 14:33
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта

Наш опрос
Какой дизайн лучше?


Всего ответов: 1186

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 5
Гостей: 5
Пользователей: 0


Зарегистрировано 31032 (сегодня + 0 новых, вчера + 1 новых), В каталоге файлов 1130 материала(ов), Оставлено 5155 комментариев, На форуме создано тем и ответов.

установить такую статистику

Блок CW результаты

Победы
Победы(10)

Поражения
Поражения(5)


Установить CW блок на свой сайт
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
скрипты для uCoz
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

установить такой блок
Поиск



установить такую кнопку twitter
или такую
красивая кнопка Twitter

Расскажи Друзьям!
Топ комментаторов

установить такой информер
VKONTAKTE

FACEBOOK
Главная страница » Помощь Вебмастеру » Категория Скрипты для uCoz » Добавлено [12.02.2012, 02:57]

Новый красивый дизайн фотографий и комментариев к ней

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

Наверно многим бы хотелось бы новый вид фотографий и комментарий для uCoz и вот сделал. Главная фишка этого скрипта для 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) Открываем: Управление дизайном - Фотоальбом - Страница с полной фотографией и комментариями и вставляем:

- в <head>

<script type="text/javascript">
function jFocus(elm) {
if(typeof(elm) == 'string') elm = getElementById(elm);
if (elm) {           
elm.focus();
elm.select();
}
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>


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

$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$
      
   <a href="javascript://" onclick="uWeb_photo.open()"><img border="0" align="absmiddle" src="http://qwe.ucoz.ru/images/plus.png" style="margin-bottom: 4px; margin-left:5px;" title="Добавить новое фото"></a>   
   <script type="text/javascript" src="http://webo4ka.ru/Ucoz3/ydobnoe_dobavlenie_v_ajax_photo.js"></script>   
   </b>
   <div style="float: right;">
   
   </div>
   </div>
<!-- <body> -->
   <table align="center"><tr><td valign="top">
   <div class="phot">
   <div style="position:absolute; z-index:30; padding: 10 0 0 10px;">$MODER_PANEL$</div>   
   <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> $TAGS$Нет
   </div><br>
   <div class="phinfo">
   <b>Описание:</b> $PHOTO_DESCR$Нет
   </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>
<a href="$FULL_PHOTO_URL$" target="_blank" style="color: #757575;">В реальном размере</a>   
<hr style="border-top: solid 1px #e0e0e0;">
<b class="des">Design by <a href="http://scripts-for-ucoz.ru/" style="color: #b5b5b5;">скрипты для ucoz</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> | <a href="$SECTION_URL$" style="color: #757575">$SECTION_NAME$</a>| <a href="$CAT_URL$" style="color: #757575">$CAT_NAME$</a></div>
   </div>
   <div style="clear: both; padding: 5px;"></div>
     


   <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>


<div align="center">
$COM_ADD_FORM$
</div>

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

</div>


<div style="clear: both; padding: 5px;"></div>
<!-- </body> -->
   </td>
   </tr>
   </table>
     

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

     
<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$$PHOTO_URL$'></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>


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


При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Новый красивый дизайн фотографий и комментариев к ней



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: Скрипты для uCoz | Добавил: BLACK-STAR
Просмотров: 11599 | Загрузок: 0 | Комментарии: 34 | Рейтинг: 4.5/2


Всего комментариев: 29
29 djlupu   (26.04.2014 00:51) [Материал]
zaibisi sps avtar

28 Ksusha   (09.01.2014 16:37) [Материал]
Спасибо!!!

А как сделать чтобы тоже самое открывалось но при нажатии на саму картинку а не на текст выше?.

25 Admin0058   (10.10.2013 22:27) [Материал]
нужно не там где просмотр, а где слайд-шоу)

А где его найти в коде и в какой категории фотоальбома?

24 scripts_for_ucoz   (08.10.2013 14:48) [Материал]
в CSS коде, там где background: #151515; меняй #151515 или другой #номер на тот цвет который тебе нужен. методом тыка один за другим меняй и смотри что получается. Так ты не только в итоге сменишь цвет фона, но и поймёшь какой код за что отвечает smile

20 scripts_for_ucoz   (20.01.2013 00:27) [Материал]
основной фон в первом коде , где cSS >>>

Код
telo {  

background: #f4f4f4;

#f4f4f4 это номер цвета. выбери другой и замени код. выбрать цвет можешь тут - http://www.stm.dp.ua/web-design/color-html.php

23 Saint-Petersburg   (20.01.2013 00:31) [Материал]
у меня после head надпись такая идет

<body style="background:url('/.s/t/986/1.gif') #332C2A; margin:0px; padding:0px;">

17 Saint-Petersburg   (20.01.2013 00:12) [Материал]
почему  у меня задний фон другой? не понимаю. я всё сделал как написано

18 scripts_for_ucoz   (20.01.2013 00:24) [Материал]
другой это какой ? и какой нада? весь фон можно / нужно регулировать в CSS файле в кодах background ( смотря фон какого участка надо )

19 Saint-Petersburg   (20.01.2013 00:25) [Материал]
хочу как на картинки блин smile а получается почему то черный

21 scripts_for_ucoz   (20.01.2013 00:30) [Материал]
ищи в CSS коде ( 1-ый код ) тот код, который отвечает за цвет того или иного пространства и заменяй цвет на другой. по крайней мере методом тыка найди настрой под себя.

Если же сам незнаешь как создавать html шаблоны и регулировать дизайн в CSS , то либо изучи учебник, либо найми професионала за деньги

12 Saint-Petersburg   (19.01.2013 22:59) [Материал]
почему у меня нет рейтинга на фото?(

14 scripts_for_ucoz   (20.01.2013 00:06) [Материал]
либо рейтинг отключён в панели управления этим модулем , либо в коде нету кода рейтинга. проверь всё и отпишись

15 Saint-Petersburg   (20.01.2013 00:08) [Материал]
при стандартном шаблоне рейтинг есть. при этом нет.
могу ли дать ссылку на сайт? либо в приват

22 scripts_for_ucoz   (20.01.2013 00:31) [Материал]
если нету, тогда скопируй полный код рейтинга и добавь в новый код, в то место где тебе это нужно. только учти что там код состоит не только из кода рейтингда ... Обычно он начинается с <if> RATING и заканчивается на <endif>

11 Saint-Petersburg   (19.01.2013 22:37) [Материал]
при вставке после body пишет
Не закрыт один или более условный оператор (<?if?>)

13 scripts_for_ucoz   (20.01.2013 00:05) [Материал]
в коде, который тут дан нету ни одного if else endif , поэтому проблему в твоём коде где-то ... ищи где не закрыт тег if

16 Saint-Petersburg   (20.01.2013 00:08) [Материал]
спасибо нашел

10 СОБР   (25.07.2012 00:03) [Материал]
Спасибо, этот сайт самый лучший со скриптами и кодами для uCoz

9 Alvays   (09.07.2012 18:00) [Материал]
Большое спасибо за скрипт.Очень красиво смотриться и всё работает.Единственное при комментариях если даже авторизован написано что комментарии могут добавлять только зарегистрированные пользователи.Пожалуйста подскажите как решить эту проблемку.Буду очень благодарен и не останусь в долгу.

8 Vladimir4193   (04.06.2012 20:11) [Материал]
Супер спасибо, если есть что нибудь ещё по альбому с удовольствием приму , желательно для главной страницы

5 fobos   (01.04.2012 11:48) [Материал]
sps

3 LaJay   (03.03.2012 21:14) [Материал]
Вставляю код в тело, пишет - Не закрыт один или более условный оператор (<?if?>)
В чем проблема?

4 SCRIPTS-FOR-UCOZ   (17.03.2012 13:02) [Материал]
Вот не зря говорят
У каждого додика своя методика
найди его и закрой если руки крюки не лезь вообще

7 satellite80   (08.05.2012 14:57) [Материал]
Не все такие додики как ты! Подсказать отняло 1минуту. В материале ошибка, достаточно было админу или автору ее исправить и указать на это исправление, а не делать из себя умника коим вовсе не являешься!

6 satellite80   (08.05.2012 14:55) [Материал]
Найди в <head >
Code
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
и сразу после него поставь
Code
<?endif?>

2 stockcity   (19.02.2012 09:08) [Материал]
требуются модераторы, файловики на сайт мобильных игр фильмов и тем для нокиа http://free-java.ucoz.org/ заявки на должность оставлять в гостевой или в лс админу, модератору

1 Protov   (14.02.2012 22:41) [Материал]
spasibo

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Для добавления необходима авторизация

Хостинг от uCoz