Нонче тут

Сейчас 51 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Часто хочется изменить оформление фотографий на главной странице модуля системы "Фотоальбомы", потому что стандартное оформление фотографий навевает тоску, вот тут то и пригодится этот материал!
Несколько простых, но очень эффектных решений украсят ваши фото на главной странице модуля "Фотоальбомы".
Это стандартное оформление фотографий на главной странице модуля "Фотоальбомы" системы uCoz



Именно его мы и будем изменять

Решение №1

все фотографии будут в аккуратной рамочке и как будто прилеплены в верхней части на прозрачный кусочек скотча




Установка:

1.1 Установить в настройках модуля "Фотоальбомы" размеры демо-картинки 170х120

1.2 Заменить код в шаблоне "Вид фотографий" на следующий:

Code

<li><a href="/$PHOTO_URL$"><span></span><img src="/$PHOTO_DIRECT_URL$" alt="image" /></a></li>
<?if($RATING$)?><div style="clear:both;padding:5px 5 5 10px;"><?$RSTARS$('12','/.s/img/stars/3/12.png','0','float')?></div><?endif?>


1.3 Добавить стили css в секцию HEAD шаблона "Главная страница фотоальбома"

Code

<style type="text/css"> img {border: none;}

.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 10px;
padding: 0;
float: left;
position: relative;
width: 180px;
height: 130px;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.gallery span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(/images/tape.png) no-repeat;
}
.gallery a {
text-decoration: none;
}
</style>

<!--[if lt IE 7]>
<style type="text/css">
.gallery span { behavior: url(/iepngfix.htc); cursor: pointer; }
</style>
<![endif]-->


1.4 Там же, в шаблоне "Главная страница фотоальбома" найти в коде следующее

Code
$BODY$


и переписать таким образом

Code
<ul class="gallery">$BODY$</ul>


1.5 Закачать в корневую папку сайта файл iepngfix.htc из архива с исходниками
1.6 Создать (если не создана ранее) в файловом менеджере папку images и закачать в неё файл tape.png из архива с исходниками.

Решение №2

в данном решении на мини-картинках фотографий будут выводиться результаты рейтинга фотографии в виде иконок с оценками




Установка:

2.1 Установить в настройках модуля "Фотоальбомы" размеры демо-картинки 170х120

2.2 Заменить код в шаблоне "Вид фотографий" на следующий:

Code

<li><a href="/$PHOTO_URL$"><img src="/$PHOTO_DIRECT_URL$" alt="image" />
<?if($RATING$=0)?><span class="favorite0"></span><?endif?>
<?if($RATING$=1)?><span class="favorite1"></span><?endif?>
<?if($RATING$=2)?><span class="favorite2"></span><?endif?>
<?if($RATING$=3)?><span class="favorite3"></span><?endif?>
<?if($RATING$=4)?><span class="favorite4"></span><?endif?>
<?if($RATING$=5)?><span class="favorite5"></span><?endif?>
</a></li>
<div style="clear:both;padding:5px 5 5 10px;"><?if($CAT_NAME$)?><a href="/$CAT_URL$"><?if(len($CAT_NAME$)>25)?><?substr($CAT_NAME$,0,23)?>...<?else?>$CAT_NAME$<?endif?></a><?endif?></div>


2.3 Добавить стили css в секцию HEAD шаблона "Главная страница фотоальбома"

Code

<style type="text/css">

img {border: none;}

.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 10px;
padding: 0;
float: left;
position: relative;
width: 180px;
height: 130px;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.gallery span {
width: 40px;
height: 40px;
display: block;
position: absolute;
bottom: 10px;
right: 10px;
}
.gallery .favorite5 {
background: url(/evaluation/5.png) no-repeat;
}
.gallery .favorite4 {
background: url(/evaluation/4.png) no-repeat;
}
.gallery .favorite3 {
background: url(/evaluation/3.png) no-repeat;
}
.gallery .favorite2 {
background: url(/evaluation/2.png) no-repeat;
}
.gallery .favorite1 {
background: url(/evaluation/1.png) no-repeat;
}
.gallery .favorite0 {
background: url(/evaluation/0.png) no-repeat;
}

}
.gallery a {
text-decoration: none;
}
.gallery a:hover img {
border-color: #666;
}
.gallery a:hover span {
background-position: left -2px;
}
</style>


2.4 Там же, в шаблоне "Главная страница фотоальбома" найти в коде следующее

Code
$BODY$


и переписать таким образом

Code
<ul class="gallery">$BODY$</ul>


2.5 Создать (если не создана ранее) в файловом менеджере папку images и закачать в неё содержимое иконки из архива с исходниками

Решение №3

данное решение позволяет вывести поверх мини-фотографий стикеры с текстом (например,названием фотографии), цвет стикера меняется при наведении курсора мыши на фото



Установка:

3.1 Установить в настройках модуля "Фотоальбомы" размеры демо-картинки 170х120

3.2 Заменить код в шаблоне "Вид фотографий" на следующий:

Code

<li><a href="/$PHOTO_URL$"><em><?if($PHOTO_NAME$)?><?if(len($PHOTO_NAME$)>25)?><?substr($PHOTO_NAME$,0,23)?>...<?else?>$PHOTO_NAME$<?endif?><?endif?></em><img src="/$PHOTO_DIRECT_URL$" alt="image" /></a></li>


3.3 Добавить стили css в секцию HEAD шаблона "Главная страница фотоальбома"

Code

<style type="text/css">

h1 em {
border: dashed 1px #e3792c;
display: block;
padding: 10px 0;
font-style: normal;
}

img {
border: none;
}

.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
padding: 10px;
margin: 0;
float: left;
position: relative;
width: 180px;
height: 130px;
}
.gallery li:hover img {
border-color: #000;
}
.gallery img {
background: #fff;
border: solid 1px #888;
padding: 5px;
}
.gallery em {
background: #fff url(/images/grey-gradient.gif) repeat-y;
color: #000;
font-style: normal;
padding: 2px 10px;
display: block;
position: absolute;
top: 110px;
left: 9px;
border: 1px solid #999;
border-left-color: #888;
}
.gallery a {
text-decoration: none;
}
.gallery a:hover em {
background: #ffdb01 url(/images/orange-gradient.gif) repeat-y;
border-color: #c25b08;
}
</style>


3.4 Там же, в шаблоне "Главная страница фотоальбома" найти в коде следующее

Code
$BODY$


и переписать таким образом

Code
<ul class="gallery">$BODY$</ul>


3.5 Создать (если не создана ранее) в файловом менеджере папку images и закачать в неё файлы изображений grey-gradient.gif и orange-gradient.gif из архива с исходниками.

Решение №4

Установка данного решения выводит всплывающие подсказки для мини-изображений на главной странице модуля "Фотоальбомы"



Установка:

4.1 Установить в настройках модуля "Фотоальбомы" размеры демо-картинки 170х120

4.2 Заменить код в шаблоне "Вид фотографий" на следующий:

Code

<li><a href="/$PHOTO_URL$"><em><?if($PHOTO_NAME$)?><?if(len($PHOTO_NAME$)>25)?><?substr($PHOTO_NAME$,0,23)?>...<?else?>$PHOTO_NAME$<?endif?><?endif?></em><img src="/$PHOTO_DIRECT_URL$" alt="image" /></a></li>


4.3 Добавить стили css в секцию HEAD шаблона "Главная страница фотоальбома"

Code

<style type="text/css">

h1 em {
border: dashed 1px #e3792c;
display: block;
padding: 10px 0;
font-style: normal;
}

img {
border: none;
}

.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
padding: 10px;
margin: 0;
float: left;
position: relative;
width: 180px;
height: 130px;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 5px;
}
.gallery li:hover img {
border-color: #999;
}
.gallery em {
width: 102px;
background: url(/images/bubble.gif) no-repeat;
padding: 3px 0 6px;
display: none;
position: absolute;
top: -2px;
left: 50px;
font-style: normal;
text-align: center;
}
.gallery a {
text-decoration: none;
color: #000;
}
.gallery a:hover em {
display: block;
}</style>


4.4 Там же, в шаблоне "Главная страница фотоальбома" найти в коде следующее

Code
$BODY$


и переписать таким образом

Code
<ul class="gallery">$BODY$</ul>


4.5 Создать (если не создана ранее) в файловом менеджере папку images и закачать в неё файл bubble.gif из архива с исходниками.

Решение №5

Ещё один вариант оформления вида фотографий в фотоальбомах для uCoz, на этот раз мы прикрепим стикер к фотографии канцелярской скрепкой



Установка:

5.1 Установить в настройках модуля "Фотоальбомы" размеры демо-картинки 170х120

5.2 Заменить код в шаблоне "Вид фотографий" на следующий:

Code

<li><a href="/$PHOTO_URL$"><span></span><em><?if($PHOTO_NAME$)?><?if(len($PHOTO_NAME$)>25)?><?substr($PHOTO_NAME$,0,23)?>...<?else?>$PHOTO_NAME$<?endif?><?endif?></em><img src="/$PHOTO_DIRECT_URL$" alt="image" /></a></li>


5.3 Добавить стили css в секцию HEAD шаблона "Главная страница фотоальбома"

Code

<style type="text/css">

h1 em {
border: dashed 1px #e3792c;
display: block;
padding: 10px 0;
font-style: normal;
}

img {
border: none;
}

.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
padding: 10px;
margin: 0;
float: left;
position: relative;
width: 180px;
height: 130px;
}
.gallery li:hover img {
border-color: #000;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 5px;
}
.gallery em {
background: #fff;
color: #000;
font-style: normal;
padding: 2px 8px 0 22px;
display: block;
position: absolute;
top: 20px;
left: 5px;
border: 1px solid #999;
}
.gallery a {
text-decoration: none;
}
.gallery span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: 7px;
left: 9px;
background: url(/images/paper-clip-mini.png) no-repeat;
z-index: 3;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.gallery span { behavior: url('/iepngfix.htc'); cursor: pointer; }
</style>
<![endif]-->


5.4 Там же, в шаблоне "Главная страница фотоальбома" найти в коде следующее

Code
$BODY$


и переписать таким образом

Code
<ul class="gallery">$BODY$</ul>


5.5 Создать (если не создана ранее) в файловом менеджере папку images и закачать в неё файл paper-clip-mini.png из архива с исходниками.

Решение №6

Хотите создать свою Третьяковскую галерею?) пожалуйста, с помощью данного решения вид фотографий приобретает такой стиль:




Установка:

6.1 Установить в настройках модуля "Фотоальбомы" размеры демо-картинки 170х120

6.2 Заменить код в шаблоне "Вид фотографий" на следующий:

Code

<li><a href="/$PHOTO_URL$"><span></span><em><?if($PHOTO_NAME$)?><?if(len($PHOTO_NAME$)>25)?><?substr($PHOTO_NAME$,0,23)?>...<?else?>$PHOTO_NAME$<?endif?><?endif?></em><img src="/$PHOTO_DIRECT_URL$" alt="image" /></a></li>


6.3 Добавить стили css в секцию HEAD шаблона "Главная страница фотоальбома"

Code

<style type="text/css">

img {
border: none;
}

.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 20px;
padding: 0;
float: left;
position: relative;
width: 212px;
height: 175px;
}

.gallery a {
text-decoration: none;
color: #666;
}
.gallery a:hover {
color: #000;
text-decoration: underline;
}
.gallery img {
padding: 20px 0 0 21px;
}
.gallery em {
width: 216px;
background: url(/images/gold-frame.png) no-repeat;
display: block;
position: absolute;
top: -2px;
left: -2px;
text-align: center;
font: 100%/100% Georgia, "Times New Roman", Times, serif;
padding-top: 168px;
}
</style>

<!--[if lt IE 7]>
<style type="text/css">
.gallery em { behavior: url('/iepngfix.htc'); cursor: pointer; }
</style>
<![endif]-->


6.4 Там же, в шаблоне "Главная страница фотоальбома" найти в коде следующее

Code
$BODY$


и переписать таким образом

Code
<ul class="gallery">$BODY$</ul>


6.5 Закачать в корневую папку сайта файл iepngfix.htc из архива с исходниками
6.6 Создать (если не создана ранее) в файловом менеджере папку images и закачать в неё файл gold-frame.png из архива с исходниками.

Решение №7

С помощью данного решения оформления миниатюры на главной фотоальбома приобретут акварельную рамку




Установка:

7.1 Установить в настройках модуля "Фотоальбомы" размеры демо-картинки 170х120

7.2 Заменить код в шаблоне "Вид фотографий" на следующий:

Code

<li><a href="/$PHOTO_URL$"><span></span><em><?if($PHOTO_NAME$)?><?if(len($PHOTO_NAME$)>25)?><?substr($PHOTO_NAME$,0,23)?>...<?else?>$PHOTO_NAME$<?endif?><?endif?></em><img src="/$PHOTO_DIRECT_URL$" alt="image" /></a></li>


7.3 Добавить стили css в секцию HEAD шаблона "Главная страница фотоальбома"

Code

<style type="text/css">

img {
border: none;
}

/* ---------- gallery styles start here ----------------------- */
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 10px;
padding: 0;
float: left;
position: relative;
width: 212px;
height: 175px;
}

.gallery a {
text-decoration: none;
color: #999;
}
.gallery a:hover {
color: #000;
text-decoration: underline;
}
.gallery img {
border: none;
padding: 14px 12px 12px 13px;
}
.gallery em {
width: 193px;
height: 25px;
display: block;
position: absolute;
top: 2px;
left: 2px;
background: url(/images/watercolor-mask.png) no-repeat;
text-align: center;
font: italic 100%/100% Georgia, "Times New Roman", Times, serif;
padding-top: 140px;
}

</style>

<!--[if lt IE 7]>
<style type="text/css">
.gallery em { behavior: url('/iepngfix.htc'); cursor: pointer; }
</style>
<![endif]-->


7.4 Там же, в шаблоне "Главная страница фотоальбома" найти в коде следующее

Code
$BODY$


и переписать таким образом

Code
<ul class="gallery">$BODY$</ul>


7.5 Закачать в корневую папку сайта файл iepngfix.htc из архива с исходниками
7.6 Создать (если не создана ранее) в файловом менеджере папку images и закачать в неё файл watercolor-mask.png из архива с исходниками.

Итак, вы увидели семь различных вариантов оформления вида материалов на главной странице модуля "Фотоальбомы" системы uCoz, надеюсь они вам понравятся и вы с успехом используете их на страницах своих сайтов!

CSS Decorative Gallery.
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.