MENU

Вид материала каталога сайта для ucoz




29.10.2014, 12:41

Красивый вид материала каталога сайта с картинкой самого сайта uCoz.

В скрипте есть код который делает снимок добавленного сайта и при наведении на снимок картинка увеличивается.

Пример работы донного вида материалов вы можете просмотреть в нашем Каталоге сайтов!

Для того что бы установить этот вид заходим в ПУ/Каталог сайтов/Управления дизайна модуля и вставляем ниже указанный скрипт в Вид материалов

Код
<style>
table#dscatalog {
margin-bottom:10px;
padding:2px;
height:160px;
background:-webkit-gradient(linear,left top,left bottom,
color-stop(rgba(255,255,255,1),0),
color-stop(rgba(246,246,246,1),0.74),
color-stop(rgba(237,237,237,1),1));
background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%,
rgba(237,237,237,1) 100%);
background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%,
rgba(237,237,237,1) 100%);
background:-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%,
rgba(237,237,237,1) 100%);
background:linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%,
rgba(237,237,237,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
endColorstr='#ededed',GradientType=0 );
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2),
0px 0px 0px 1px rgba(188,188,188,0.1);
border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;}
table#dscatalog:hover {background:#fff;
-webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4),
0px 0px 0px 1px rgba(188,188,188,0.1);}
}
td#dscatimg {
width:160px;
height:120px;
}
td#dscattext {
height:120px;
width:100%;
border:0;
}
div#dszgl {
height:20px;

width:100%;

border:0;

top:0;

font-size:1.3em;

}

div#dscatcontent {

padding:5px 7px 0 7px;

height:85px;

font-size:0.9em;

width:100%;

border:1px solid transparent;

display:block;

text-overflow:ellipsis;

-ms-text-overflow:ellipsis;

-o-text-overflow:ellipsis;

}

div#dscatup {

height:15px;

width:100%;

border:0;

bottom:0;

}

.dszoomimage {

text-align:center;

background:transparent;

}

.dszoomimage a img {

width:156px;

height:117px;

display:block;

border:0;

position:relative;

top:0;

left:0;

-webkit-transition: all 0.5s ease-in;

-moz-transition: all 0.5s ease-in;

-o-transition: all 0.5s ease-in;

-ms-transition: all 0.5s ease-in;

transition: all 0.5s ease-in;

}

.dszoomimage a {

display:inline-block;

width:156px;

height:117px;

position:relative;

}

.dszoomimage a:hover img {

width:320px;

height:240px;

position:absolute;

top:-20px;

left:-20px;

box-shadow: 0 10px 15px rgba(0,0,0,0.5);

z-index:7;

}

img#dscatimgb {

border-radius: 5px;

-webkit-border-radius: 5px;

-o-border-radius: 5px;

-ms-border-radius: 5px;

}

</style>

<div style="display:none;"><a href="http://scucoz.3dn.ru/">скрипты</a></div>

<table id="dscatalog" class="">

<tr>

<td id="dscatimg">

<div class="dszoomimage">

<a href="$SITE_URL$" target="_blank">

<img src='http://mini.s-shot.ru/?$SITE_DIRECT_URL$' id="dscatimgb" width='156' height='117' border='0' alt='Снимок сайта'>

</a>

</div>

</td>

<td id="dscattext">

<div id="dszgl">

<div style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div>

</div>

<div id="dscatcontent">

<?if($MESSAGE$)?><div style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div><?endif?>

</div>

<div id="dscatup">

<?if($CATEGORY_NAME$)?><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a><?endif?> | Переходов: $REDIRECTS$

<?if($RATING$)?><div style="float:right"><?$RSTARS$('12','/.s/img/stars/3/12.png','1','float')?></div><?endif?>

</td>

</tr>

</table>


 

 

Категория: Скрипты для uCoz | Добавил: Amatory | Теги: каталога, uCoz, сайта, материала
Просмотров: 1002 | Загрузок: 0 | Рейтинг: 5.0/1
Всего комментариев: 0
avatar