Новые сообщения · Участники · Правила форума · Поиск
Страница 1 из 11
Модератор форума: z-17, Anarki 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Вид материалов Фотоальбома.
Вид материалов Фотоальбома.
volfgunusДата: Воскресенье, 06.01.2013, 14:48 | Сообщение # 1
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
Лазил вчера у себя по папкам ища заготовку для мини-профиля, заготовку так и не нашёл, но мне попался этот вид материалов для фотоальбома. Когда я его делал не знай, но там не доделал немного выдвижной блок. Сегодня я его закончил. Оставлю я это здесь, кому надо тот возьмёт.



Скриншоты











Описание


Вид материалов фотоальбома, сделан для светлых (хотя можно и для тёмных) дизайнов, с использованием минимума графики (2 спрайта).
Выдвижной блок информации (при наведении).
Сохранён укозовский lightbox.
Сделано без использования javascripta (пункт для тех, кто старается его избегать).
Изменена модер панель.
И бла-бла и бла-бла.



Установка


Перед началом рекомендую в настройках фотоальбома указать ширину в размере превью как минимум 200px.

В вид материалов:

Код
<div class="photo-wrap  <?if($DATE$='Сегодня')?>photo-new<?endif?>">
            <a href="$PHOTO_LIGHTBOX_URL$" title="Увеличить"><img src="$PHOTO_DIRECT_URL$" border="0" class="photo-img" width="200"></a>
            <div class="photo-content">
            <div class="ph-name"><a href="$PHOTO_URL$" title="Перейти на страницу материала" >$PHOTO_NAME$</a></div>
            <abbr title="Добавил"><div class="ph-author">$USER$</div></abbr>
            <abbr title="Размер"><div class="ph-size">$PHOTO_SIZE$, $PHOTO_WEIGHT$Kb</div></abbr>
            <abbr title="Просмотров"><div class="ph-views">$REVIEWS$</div></abbr>
            <abbr title="Комментариев"><div class="ph-comments"><a href="$COMMENTS_URL$">$COMMENTS_NUM$</a></div></abbr>
            <div class="ph-bottom">
            <?if($RATING$)?><span class="ph-rating"><?$RSTARS$('12','/img/photo/rating_stars.png','1','float')?></span><?endif?>            
            <?if($MODER_PANEL$)?><span class="ph-moder">$MODER_PANEL$</span><?endif?>
            </div>
            </div>
            <div class="clr"></div>
</div>


В css:

Код
.clr{clear:both;}
.photo-wrap,.photo-content{transition:1s 1s;-webkit-transition:1s 1s;}
.ph-author, .ph-size, .ph-views, .ph-comments,.ph-moder a,.photo-new:before{background:url('/img/photo/sprites.png') no-repeat;}
.photo-wrap{padding:5px;position:relative;z-index:0;background:rgba(255, 255, 255, 0.8);width:200px;border:1px solid #DDDDDD;border-radius:5px;box-shadow:0 0 5px 3px rgba(0, 0, 0, 0.3);opacity:0.7;margin:10px;float:left;}
.photo-wrap:hover{opacity:1;z-index:9999;width:400px;background:rgba(255, 255, 255, 1);margin-right:-190px;}
.photo-img{display:block;border-radius:3px;float:left;min-height:120px !important;position:relative;}
.photo-content{height:0;width:0;overflow:hidden;float:right;}
.photo-wrap:hover .photo-content{width:190px;height:100%;padding-left:5px;}
.photo-content abbr{text-decoration;none;}
.ph-name, .ph-author, .ph-size, .ph-views, .ph-comments, .ph-bottom{height:16px;margin:3px 0;font-family:helvetica;font-size:9pt;padding-left:23px;color:#333333;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.ph-bottom{margin-top:5px;padding:0 5px;}
.ph-name{text-align:center;font-weight:700;}
.ph-name a:link, .ph-name a:visited{color:#4D4F53;}
.ph-name a:hover{color:#1F1F1F;}
.ph-author{background-position:-16px 0;}
.ph-views{background-position:-16px -16px;}
.ph-size{background-position:-16px -32px;}
.ph-comments{background-position:-16px -48px;}
.ph-rating{float:left;margin-top:2px;}
.ph-moder{float:right;}
.ph-moder span[id*="mn"]{display:block !important;}
.ph-moder img{display:none !important;}
.ph-moder a{display:inline-block;height:16px;width:16px;margin:0 0 0 5px;opacity:0.6;}
.ph-moder a:hover{opacity:1;}
.ph-moder a[onclick*="TgEd"]{background-position:0 -32px;}
.ph-moder a[onclick*="cntEd"]{background-position:0 -48px;}
.ph-moder a[href*="photo"]{background-position:0 -16px;}
.photo-new:before{content: " ";position:absolute;left:164px;width:41px;height:41px;z-index:9999;background-position:0 -64px;}


В файловом менеджере создать папку img и в неё залить папку из архива.

7999860.png(51Kb) · 1472162.png(48Kb) · 3666424.png(43Kb) · photo.rar(6Kb)
Как установить кнопки социальных сетей?

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


Сообщение отредактировал volfgunus - Пятница, 26.04.2013, 13:20
 
BaniKДата: Воскресенье, 06.01.2013, 21:23 | Сообщение # 2
Полковник
Сообщений: 201
Репутация: 12
Социальная репутация:

Статус: Offline
Чудово виглядає!
Поставлю в себе на сайті, мені якраз підходить, сайт так мовити фотоольбом для друзів)

Добавлено (06.01.2013, 21:23)
---------------------------------------------
уууууууу ше б було б непогано якби ти добавив таку стрічку на угл фотки для недавньо залитих фоток.


ВСЕ ДЛЯ КС
 
ErickSkrauchДата: Понедельник, 07.01.2013, 00:45 | Сообщение # 3
Генерал-майор
Сообщений: 312
Репутация: 10
Социальная репутация:

Статус: Offline
BaniK, ну так создай информер и прикрепи труда это же.

Лайтбокс врятли будет работать, но если обернуть в ссылку, то можно отправлять на страницу материала.

Требуется HTML5 разработчик.

Идеальный бесплатный хостинг!
 
volfgunusДата: Понедельник, 07.01.2013, 14:22 | Сообщение # 4
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
BaniK, В виде материалов первую строку
Цитата (volfgunus)
<div class="photo-wrap">

замени на
Код
<div class="photo-wrap  <?if($DATE$='Сегодня')?>photo-new<?endif?>">

и в css
Код
.photo-new:before{content: " ";position:absolute;left:164px;width:41px;height:41px;background:url('/img/photo/new.png') no-repeat;z-index:9999;}

и фотку заливаешь в ту же папку, что и архив, т.е. img/photo

Добавлено (07.01.2013, 14:22)
---------------------------------------------
BaniK, отбой, я первый пост обновил. Устанавливай оттуда.



Сообщение отредактировал volfgunus - Понедельник, 07.01.2013, 16:10
 
BaniKДата: Вторник, 08.01.2013, 18:01 | Сообщение # 5
Полковник
Сообщений: 201
Репутация: 12
Социальная репутация:

Статус: Offline
http://photo-hosting.ucoz.ua/ ось подивись, шось нема іконок.

Добавлено (08.01.2013, 18:01)
---------------------------------------------
аа все норм, завтикав шо в папке img надо ше папку photo і туда уже заливати)


ВСЕ ДЛЯ КС
 
SandroДата: Среда, 24.04.2013, 11:15 | Сообщение # 6
Рядовой
Сообщений: 7
Репутация: 0
Социальная репутация:

Статус: Offline
Здорово, мне подходит по дизайну, но как сделать чтобы при наведении на крайнюю правую картинку, выезжающий слайдер (не влазит в ширину страницы) не ломал дизайн? Да и вобще его не видно.
У меня картинки в три колонки 120х150.
даже если в две колонки, все равно не влазит. И я не смогу нажать кнопку редактировать,удалить и т.д. Да у Вас на втором скрине тоже это видно.Исправьте пожалуйста,иначе смысла нет его оставлять.



Лучше сделать чтобы слайдер сьезжал вниз!


Сообщение отредактировал Sandro - Среда, 24.04.2013, 11:20
 
volfgunusДата: Среда, 24.04.2013, 18:19 | Сообщение # 7
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
Цитата (Sandro)
Да у Вас на втором скрине тоже это видно.


Это момент выезжания заскринен

Добавлено (24.04.2013, 18:12)
---------------------------------------------
ну вот вниз
заменяешь

Цитата (volfgunus)
.clr{clear:both;}
.photo-wrap,.photo-content{transition:1s 1s;-webkit-transition:1s 1s;}
.ph-author, .ph-size, .ph-views, .ph-comments,.ph-moder a,.photo-new:before{background:url('/img/photo/sprites.png') no-repeat;}
.photo-wrap{padding:5px;position:relative;z-index:0;background:rgba(255, 255, 255, 0.8);width:200px;border:1px solid #DDDDDD;border-radius:5px;box-shadow:0 0 5px 3px rgba(0, 0, 0, 0.3);opacity:0.7;margin:10px;float:left;}
.photo-wrap:hover{opacity:1;z-index:9999;width:400px;background:rgba(255, 255, 255, 1);margin-right:-190px;}
.photo-img{display:block;border-radius:3px;float:left;min-height:120px !important;position:relative;}
.photo-content{height:0;width:0;overflow:hidden;float:right;}
.photo-wrap:hover .photo-content{width:190px;height:100%;padding-left:5px;}


на
Код
.photo-wrap,.photo-content{transition:1s 1s;-webkit-transition:1s 1s;}
.ph-author, .ph-size, .ph-views, .ph-comments,.ph-moder a,.photo-new:before{background:url('/img/photo/sprites.png') no-repeat;}
.photo-wrap{padding:5px;position:relative;z-index:0;background:rgba(255, 255, 255, 0.8);width:200px;border:1px solid #DDDDDD;border-radius:5px;box-shadow:0 0 5px 3px rgba(0, 0, 0, 0.3);opacity:0.7;margin:10px;float:left;}
.photo-wrap:hover{opacity:1;z-index:9999;background:rgba(255, 255, 255, 1);margin-bottom:-115px;}
.photo-img{display:block;border-radius:3px;min-height:120px !important;position:relative;}
.photo-content{height:0;width:0;overflow:hidden;}
.photo-wrap:hover .photo-content{width:200px;height:120px;padding-top:5px;}

точнее там меньше заменять, но в разных местах, поэтому проще этот кусок

Добавлено (24.04.2013, 18:19)
---------------------------------------------
да и вообще, там походу в шаблоне где-то overflow:auto прописан, его удалить и будет нормально

 
SandroДата: Пятница, 26.04.2013, 09:57 | Сообщение # 8
Рядовой
Сообщений: 7
Репутация: 0
Социальная репутация:

Статус: Offline
Разобрался,спасибо

Добавлено (26.04.2013, 09:57)
---------------------------------------------
А вот еще вопрос, смотрел как пользователь, гость, проверенный и т.д., в общем не возможно оценить материал, звездочки рейтинга есть , а рейтинг не работает. Если знаете как исправить подскажите пожалуйста.

Удалил код, оставил юкозовский, и тоже не работает, зашел в пу снял галочку Использовать функцию "LightBox" в категориях, и - работает, бред юкозовский. Получается не возможно использовать и LightBox и коментарии с рейтингом?

А скрипт сам работает нормально


Сообщение отредактировал Sandro - Пятница, 26.04.2013, 11:12
 
volfgunusДата: Пятница, 26.04.2013, 13:23 | Сообщение # 9
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
Упс извиняюсь, я не тот параметр указал в рейтинге

Обновил первый пост.
Скопируй html оттуда.

Добавлено (26.04.2013, 13:22)
---------------------------------------------
Точнее даже тот, просто я когда делал не рассчитывал на то, что оценивать можно было так. И отключил эту часть.

Добавлено (26.04.2013, 13:23)
---------------------------------------------
Цитата (volfgunus)
Скопируй html оттуда.

хотя не, быстрее
Цитата (volfgunus)
<?$RSTARS$('12','/img/photo/rating_stars.png','0','float')?>

0 там заменить на 1


Сообщение отредактировал volfgunus - Пятница, 26.04.2013, 13:23
 
SandroДата: Вторник, 07.05.2013, 15:55 | Сообщение # 10
Рядовой
Сообщений: 7
Репутация: 0
Социальная репутация:

Статус: Offline
А ok работает, все работает.Спасибо вашему сайту!

Добавлено (27.04.2013, 01:11)
---------------------------------------------
Если я добавляю фото больших размеров, то превью очень мутное как исправить?

Добавлено (07.05.2013, 15:55)
---------------------------------------------
в IE 10 не работает вобще

Сообщение отредактировал Sandro - Понедельник, 29.04.2013, 09:54
 
volfgunusДата: Четверг, 09.05.2013, 18:36 | Сообщение # 11
Eternal power
Сообщений: 3684
Репутация: 180
Социальная репутация:

Статус: Offline
Ну так это превью. Там картинка сжата просто.

А насчёт 10 ие. Что там не работает?
 
SandroДата: Воскресенье, 12.05.2013, 14:12 | Сообщение # 12
Рядовой
Сообщений: 7
Репутация: 0
Социальная репутация:

Статус: Offline
Там картинка стоит на месте и не сьезжает,нет не звездочек ничего, просто превью
 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Вид материалов Фотоальбома.
Страница 1 из 11
Поиск: