Новый вид изображений в фотоальбоме

SUAREZ добавил 1368346123 в раздел UCOZ Другие скрипты
Если вы используете на своем сайте фотоальбом, то это графическое решение именно для вас. Полная переработка вида фотографий сделает вашу галерею изображений ucoz очень симпатичной и удобной.

Дополнительные скриншоты:

Установка:

1. Заходим в настройки фотоальбома: Главная -> Фотоальбомы -> Настройки модуля, и настраиваем модуль, как показано на скриншоте ниже:



2. Переходим в ПУ -> Таблица стилей CSS, и в самый низ дописываем следующий код:

Код
.expgaller:hover .blockimage_s:not(:hover){-webkit-filter:blur(2px) grayscale(2);opacity:.7}
div.blockimage_s:hover {visibility:visible}
.blockimage_s{position:relative}
.photouds {  
  width:150px;  
  overflow:hidden;
  padding: 0px 0px 0px 0px;  
}
.photouds a:link,.photouds a:visited {color:#bababa;}
.photouds a:hover {color:#03a5d7;}
.photouds div { float:left;width:150px; height:120px;overflow:hidden; position:relative; margin: 5px 5px 5px 5px; }
.photouds span {float:left;width:100%; left: 0px; bottom: 0px;position:absolute; background: url(http://updatesite.ru/demo/img/3/pix_title.png) repeat;
  padding: 4px 0px 4px 0px; font: 9px Verdana,Arial,Helvetica, sans-serif; text-align: center; color: #eee;
}
a.photoprevuds:link,a.photoprev1:active,a.photoprev1:visited{color:#bababa;}
a.photoprevuds:hover{color:#818181;}


3. Переходим в Фотоальбомы -> Вид фотографий, удаляем все и вставляем следующее:

Код
<div align="center" class="blockimage_s">
<div class="photouds">
<div style="background: #aaa;">
<a title="Размер: $PHOTO_SIZE$" href="$PHOTO_URL$">$PHOTO$</a>
<span title="$PHOTO_NAME$"><a class="photoprevuds" href="$PHOTO_URL$"><b><?if($PHOTO_NAME$)?><?if(len($PHOTO_NAME$)>15)?><?substr($PHOTO_NAME$,0,14)?>...<?else?>$PHOTO_NAME$<?endif?><?else?>Без названия<?endif?></b></a>
<a style="padding: 0px 0px 0 8px;" title="Увеличить" target="_blank" href="$PHOTO_LIGHTBOX_URL$"><img src="http://updatesite.ru/demo/img/3/imageshowprevimg.png"></a></span>
</div>  
</div>
<?if($MODER_PANEL$)?><div style="position:absolute;z-index:30;">$MODER_PANEL$</div><?endif?>  
</div>


4. Необязательно При желании можете добавить эффект выделения фотографии. Для этого, переходим в "Главная страница фотоальбома", находим в тексте $BODY$ и заменяем на:

Код
<table border="0" width="100%" cellspacing="1" cellpadding="2"><tbody>
<tr><td align="center" class="expgaller">$BODY$
</td></tr></tbody></table>
+23
Теги: галерея изображений, фотогалерея, вид
Автор: SUAREZ
Источник: http://updatesite.ru
Зарегистрируйтесь или авторизуйтесь, чтобы добавлять комментарии, оценивать материалы и сохранять их в личном кабинете.
Вы не можете добавлять комментарии
Комментарии к этому материалу пока никто не оставлял
entry
Свернуть
Развернуть мини-чат
0