Вид изображений в фотоальбоме. uCoz

Здравствуйте друзья! Хочу поделиться несколько необычным отображением изображений в фотоальбомах на сайтах uCoz. Навел меня на мысль эту вопрос на форуме сообщества, не хочет у человека правильно отображаться фото. Вот решил разобраться и поделиться. Выкладываю просто коды без объяснений (в смысле разжевывания), потому как думаю и так все понятно. Сначала пример, правда здесь одно изображение и перехода к следующему нет, но в фотоальбомах, если все будете делать по указанному ниже сценарию, все будет отображаться как надо.

Теперь как установить:

Вы находитесь на сайте в статусе незарегистрированного пользователя (гостевая группа), поэтому некоторые элементы страницы, функции и часть информации Вам недоступна!

Пожалуйста авторизируйтесь или пройдите не сложную процедуру регистрации

1. Берем стили css и копируем в Ваш файл css

Код
.view {
width: 200px;
height: 150px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
box-shadow: 0px 0px 5px 0px #242424;
-webkit-box-shadow: 0px 0px 5px 0px #242424;
-moz-box-shadow: 0px 0px 5px 0px #242424;
-o-box-shadow: 0px 0px 5px 0px #242424;
}
.view .mask, .view .content {
width: 200px;
height: 150px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.mask{
width: 200px;
height: 150px;}
.view img {
display: block;
position: relative;
}
.view a#info {
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:37px;
height:37px;
background-image: url('../img/photozoom.png');
background-repeat: no-repeat;
background-position: center center;
}
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.third-effect a#info {
position:relative;
top:-37px;
left:-18px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 0.7;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a#info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
background: #000;
padding: 10px;
border: solid 3px #FFF;
-webkit-border-radius: 100px;
border-radius: 100px;
width: 50%;
margin-left: 25%;
}

Далее идем Главная » Управление дизайном » Редактирование шаблонов » Фотоальбомы » Вид фотографий и всё что там есть меняем на это:

Код
<script type="text/javascript">
  $(document).ready(function() {
$(".ulightbox").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'outside'
}
}
});
});</script>
<div class="view third-effect">
<div style="background-image:url('$FULL_PHOTO_DIRECT_URL$'); background-size:cover; width:100%; height: 100%;"></div>
<div class="mask">
<a href="$PHOTO_LIGHTBOX_URL$" title="Просмотры: $REVIEWS$ | Размеры: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb" id="info">Read More</a>
</div>
</div>

Title меняем по своему разумению, может название фото, может описание, а может и то и другое.

Не забудьте загрузить картиночку лупы и прописать путь к картинке в css.

Все, удачи!

Оценка: 1.0 / 4

avatar
0
Филя написал в 18:32, 16.01.2014
Ну а че прикольно))) Про лыжи)))
avatar
0
•admin• написал в 18:50, 16.01.2014
токо про лыжи?
avatar
0
Филя написал в 22:27, 16.01.2014
Как идея тоже не плохо. В деле я не пробовал... Просто фотка с лыжами - это нечто)))
avatar
0
•admin• написал в 16:04, 18.01.2014
Цитата Сообщение №4. -=777=- сказал
Запрошенный контент не может быть загружен.

Похоже на конфликт скриптов
Код
<script type='text/javascript' src='/js/superfish.js'></script>  
<script type='text/javascript' src='/js/jquery.fitvids.js'></script>

Пробовал на полигоне, если один из этих, отключаешь то работает
avatar