» »

Вид категорий фотоальбома на сайт

Вид категорий фотоальбома на сайт

Если вам нужен свой вид категорий фотоальбома, то можете стандартный убрать и поставить свой. Который будет выглядеть в другом стиле. И вот этот один из них, где безусловно отличается от системного. Идет также в рамке, только своей, где прописаны небольшие тени, так как стили идут с ним и вы здесь уже сами можете выстроить как вы видите на своем интернет ресурсе.

По своему дизайн он простой и подойдет под любую тему, здесь будет видна первая картинка и по ней можно узнать, что за изображение будет представлены в той или иной категорий.

Здесь нельзя забывать, что с вид идет также эффект, это при наведение появится изображение лупа и оно немного будет затемненным. Когда вы выберите что увеличить, то при наведение покажется лупа и по клику появится в красивом окне, где по сторонам будет затемнение, но а также в низу все по этому материалу, где вы можете предложить простое описание, кому как нравится.

Сами категорий:

Категорий на вид фотографий uCoz

Установка:

Для начало поставим стили в 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('http://zornet.ru/Aben/Abryn/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>


Если зайдете в категорию, то дизайн не изменится и будет такой же, но при увеличение, как на главной странице.

Вид фотографий в фотоальбомах на uCoz

PS - вот и вся установка, не чего сложного, здесь также просмотры и размеры все должно указывать.

Источник: mendog.ru
04.12.2016 Просмотров: 681 Комментарий: (19)

Поделиться в социальных сетях

Материал разместил

Комментарий: 19
ASSA7100
ASSA7100 04.12.2016 15:551
0
Чисто случайно наткнулся на этот вид.
Kosten
Kosten 04.12.2016 16:022
0
Его давно видел в интернете, что что то не принимал, так как считал стандартным нормально сделанным. Здесь установил на тестовый сайт проверил, и реально смотрится намного лучше, за что спасибо.
ASSA7100
ASSA7100 04.12.2016 16:153
0
не за что .Я новичок в этом всем.Пришлось столкнутся когда жена попросила сделать сайт для детского сада.Вот и затянуло меня .В эти дебри.
trem200
trem200 04.12.2016 17:094
0
Спасибо за такой прекрасный вид фотографий. Смотрятся на моём сайте отлично.
tsakonter
tsakonter 04.12.2016 17:125
0
А как сделать, чтоб краткое описание было, мне не нужна характеристика по изображению, это размеры и вес, с описанием больше весить будет в поисковой системе.
Kosten
Kosten 04.12.2016 17:416
0
ASSA7100, это как раз отвечает за вывод в темном окне, где то на сайте есть код, за вывод описание по знакам.
ASSA7100
ASSA7100 04.12.2016 17:447
0
Я себе так сделал. Поставил описание и просмотры,в этом окошке
Kosten
Kosten 04.12.2016 17:468
0
Думаю нужно убрать, то что выводит в темном окне и поставить этот код, это выводим описание, но значение сами выставляем, сколько знаков, думаю 100 - 120 нормально будет.

Код
<?if(len($MESSAGE$)>83)?><?substr($MESSAGE$,0,83)?>.....<?else?>$MESSAGE$<?endif?>


В самом коде меняем в двух местах.
ASSA7100
ASSA7100 04.12.2016 17:4710
0
а где менять?
Kosten
Kosten 04.12.2016 17:469
0
Вот так сделали? Или можете скинуть полностью.
ASSA7100
ASSA7100 04.12.2016 17:5211
0
Код
<span class="photo-title"><a href="$PHOTO_URL$">$PHOTO_NAME$</a></span>
<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_NAME$" id="info"></a>
</div>
</div>
Kosten
Kosten 04.12.2016 17:5712
0
Здесь немного попутал, так как на этом модуле за описание совершено другой оператор отвечает.

Вот так:

Код
<a href="$PHOTO_LIGHTBOX_URL$" title="$PHOTO_DESCR$" id="info">Read More</a>


И теперь будет выводить по другому, чисто описание.

ASSA7100
ASSA7100 04.12.2016 18:0214
0
все понял. От души
Kosten
Kosten 04.12.2016 18:2615
0
Здесь просто один оператор за вывод отвечает, просто на каталоге файлов их 2, это краткое и основное, не знаю, возможно здесь по знакам можно сделать.

Kosten
Kosten 04.12.2016 18:0113
0
При загрузки фотографий, вам будут предлагать, чтоб вы описали ее, вот как опишите, то и появиться в окне.

Код
<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="$PHOTO_DESCR$" id="info">Read More</a>  
</div>  
</div>
Kosten
Kosten 04.12.2016 18:5016
0
Здесь само описание зависит от стилей, если выставлять знаки, вот к примеру, выставил на 120 знаков, это чтоб только выводило их.

Вил материала.

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('http://zornet.ru/Aben/Abryn/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%;  
}


Вот эти стили отвечают за окно и его размер.

Код
width: 50%;  
margin-left: 25%;


И здесь сколько знаков вы ставите, в стилях регулируете, выставил на 120 знаков.

И теперь поменял на

Код
width: 90%;  
margin-left: 3%;


Но и главное, сам вид фотографий.

Код
<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">
  <center><a href="$PHOTO_LIGHTBOX_URL$" title="<?if(len($PHOTO_DESCR$)>120)?><?substr($PHOTO_DESCR$,0,120)?>.....<?else?>$PHOTO_DESCR$<?endif?>" id="info">Read More</a></center>  
</div>  
</div>


И в стилях поставил на 90, это почти на ширину полную окно и так получилось.

avatar
Qwazor 06.07.2018 09:5317
0
Как сделать, чтобы в описании показывались названия, которые ставятся в кавычки, например "ансамбль танца Антре" ??? На данный момент если пишу название в кавычках, оно не отображается. 07a
Kosten
Kosten 06.07.2018 16:3718
0
Видать так и будет - можно кавычки на другие знаки выставить.
-SAM-
-SAM- 08.07.2018 03:3719
0
avatar