Главная » Файлы » Скрипты для uCoz » Фотоальбом

Страница с полной фотографией и комментариями by m1haluc4 для uCoz
24.06.14, 09:24:08

Скачать файл




На днях оформил "Страница с полной фотографией и комментариями" , выкладываю здесь:)
Очень красивая, анимационная, и стильная страница smile

Смотрим ДЕМО

Приступим к установке???

Идем ПУ --> Страница с полной фотографией и комментариями, там все удаляем и ставим вот этот код:
Код
<!DOCTYPE html>  
  <html lang="en">  
<head>  
<title>$CAT_NAME$</title>  
<meta charset="UTF-8" />  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hover and Click Trigger for Circular Elements with jQuery - jQuery plugin for hovering and clicking on circles" />  
<meta name="keywords" content="jquery, hover, plugin, click, trigger, event, custom, area, web development, circle, circular shape, css3" />  
<meta name="author" content="Codrops" />  
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="/css/demo.css" />  

<link href='http://fonts.googleapis.com/css?family=Kelly+Slab' rel='stylesheet' type='text/css' />  
<noscript>  
<link rel="stylesheet" type="text/css" href="/css/noscript.css" />  
</noscript>  
<script type="text/javascript" src="/js/modernizr.custom.72835.js"></script>  
  <script type="text/javascript">  
  //PLEASE DON'T ADD THIS TO YOUR SITE! PLEASE DOWNLOAD THE ZIP AND DON'T COPY THIS PAGE! THIS IS THE GOOGLE ANALYTICS TRACKING FOR CODROPS  
var _gaq = _gaq || [];  
_gaq.push(['_setAccount', 'UA-7243260-2']);  
_gaq.push(['_trackPageview']);  

(function() {  
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;  
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
})();  

  </script>  

</head>  
<body>  
<div class="container">  
<div class="header">  
<a href="http://kloun-na.ucoz.com/index/8-1"><strong>Страница с полной фотографией и комментариями by Рино</strong></a>  
<span class="right">  
<a href="$CAT_URL$" target="_blank">Назад в категорию $CAT_NAME$</a>  
<a href="/"><strong>На главную</strong></a>  
</span>  
<div class="clr"></div>  
</div>  
<div class="wrapper">  
<!-- If browser does not support border radius, show this message -->  
<p class="message">Your browser does not support the border-radius property!</p>  
<div class="section">  
<div class="normal-trigger-area">  
<a href="#" id="circle" class="ec-circle">  
<h3>$CAT_NAME$</h3>  
</a>  
</div>  
<div class="content">  
<h1>$PHOTO_NAME$<br> <span>$CAT_NAME$</span></h1>  

$PHOTO_DESCR$</p>  

<strong>Добавил <a href="">$USERNAME$</a> $DATE$ в $TIME$ в $WDAY$</strong></p>  

<a href="/photo">На главную фотоальбома</a></p>  
<br><br><br><br><br><br>  
<!-- Put this script tag to the <head> of your page -->  
  <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?47"></script>  

  <script type="text/javascript">  
VK.init({apiId: 2378790, onlyWidgets: true});  
  </script>  

  <!-- Put this div tag to the place, where the Comments block will be -->  
  <div id="vk_comments"></div>  
  <script type="text/javascript">  
  VK.Widgets.Comments("vk_comments", {limit: 20, width: "500", attach: "*"});  
  </script>  
</div>  

</div>  
</div>  

</div>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>  
<script type="text/javascript" src="/js/jquery.circlemouse.js"></script>  
<script type="text/javascript">  
$(function() {  

$('#circle').circlemouse({  
onMouseEnter : function( el ) {  

el.addClass('ec-circle-hover');  

},  
onMouseLeave : function( el ) {  

el.removeClass('ec-circle-hover');  

},  
onClick : function( el ) {  

alert('clicked');  

}  
});  

});  
</script>  

<style type="text/css">  
.section{  
width: 900px;  
height: 420px;  
margin: 20px auto;  
position: relative;  
  }  
  /* Message to show when border-radius is not supported */  
  .message{  
display: none;  
text-align: center;  
font-weight: bold;  
color: #000;  
font-size: 20px;  
font-style: italic;  
padding-bottom: 20px;  
  }  
  .no-borderradius .message{  
display: block;  
  }  
  /* Box with dashed border to show the bounding box of the circle */  
  .normal-trigger-area{  
width: 420px;  
height: 420px;  
position: absolute;  
left: 0px;  
top: 0px;  
border: 1px dashed #916d57;  
background: rgba(179,143,121,0.1);  
-webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.5);  
-moz-box-shadow: 0 0 0 1px rgba(255,255,255,0.5);  
box-shadow: 0 0 0 1px rgba(255,255,255,0.5);  
  }  
  /* The circle */  
  .ec-circle{  
width: 420px;  
height: 420px;  
-webkit-border-radius: 210px;  
-moz-border-radius: 210px;  
border-radius: 50%;  
text-align: center;  
overflow: hidden;  
font-family:'Kelly Slab', Georgia, serif;  
background: #dda994 url($FULL_PHOTO_DIRECT_URL$) no-repeat center center;  
-webkit-box-shadow:
inset 0 0 1px 230px rgba(0,0,0,0.6),  
inset 0 0 0 7px #d5ad94;  
-moz-box-shadow:
inset 0 0 1px 230px rgba(0,0,0,0.6),  
inset 0 0 0 7px #d5ad94;  
box-shadow:
inset 0 0 1px 230px rgba(0,0,0,0.6),  
inset 0 0 0 7px #d5ad94;  
-webkit-transition: box-shadow 400ms ease-in-out;  
-moz-transition: box-shadow 400ms ease-in-out;  
-o-transition: box-shadow 400ms ease-in-out;  
-ms-transition: box-shadow 400ms ease-in-out;  
transition: box-shadow 400ms ease-in-out;  
/*For IE < 9 so that we have some kind of effect */  
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
display: block;  
outline: none;  
  }  
  .ec-circle-hover{  
-webkit-box-shadow:
inset 0 0 0 0 rgba(0,0,0,0.6),  
inset 0 0 0 20px #c18167,  
0 0 10px rgba(0,0,0,0.3);  
-moz-box-shadow:
inset 0 0 0 0 rgba(0,0,0,0.6),  
inset 0 0 0 20px #c18167,  
0 0 10px rgba(0,0,0,0.3);  
box-shadow:
inset 0 0 0 0 rgba(0,0,0,0.6),  
inset 0 0 0 20px #c18167,  
0 0 10px rgba(0,0,0,0.3);  
/*For IE < 9 so that we have some kind of effect */  
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  
  }  
  /* Text inside of circle */  
  .ec-circle h3{  
color: transparent;  
font-size: 66px;  
line-height: 420px;  
text-shadow: 0px 0px 100px #fff;  
text-transform: uppercase;  
-webkit-transition: text-shadow 400ms ease-in-out;  
-moz-transition: text-shadow 400ms ease-in-out;  
-o-transition: text-shadow 400ms ease-in-out;  
-ms-transition: text-shadow 400ms ease-in-out;  
transition: text-shadow 400ms ease-in-out;  
  }  
  .ec-circle-hover h3{  
text-shadow: 0px 0px 1px #fff;  
  }  
  /* Content on the right side */  
  .content{  
width: 420px;  
float: right;  
  }  
  .content a{  
color: #c18167;  
font-weight: bold;  
  }  
  .content a:hover{  
color: #000;  
  }  
  .content p{  
padding: 10px 0px;  
font-size: 16px;  
line-height: 26px;  
font-family: Georgia, serif;  
font-style: italic;  
color: #333;  
text-shadow: 0px 1px 1px #fff;  
  }  
  .content h1{  
font-family:'Kelly Slab', Georgia, serif;  
font-size: 46px;  
padding-bottom: 10px;  
color: #c18167;  
text-shadow: 2px 1px 2px rgba(0,0,0,0.2), 0px 0px 1px #fff;  
  }  
  .content h1 span{  
font-size: 22px;  
  }  
</style>  
</body>  
  </html><br><br><br><br><br><br><br><br><br><br><br><br><br>  
  $POWERED_BY$


Из прикрепленного архива заливаем в соответствующие папки в соответствующие папки css, js, images

ricepaper2.jpg - это фон страницы!
Пользуем на здоровьечко smile

Автор - m1haluc4
Категория: Фотоальбом | Добавил: Apocalypse | Теги: комментариями, ucoz, фотографией, by, СТРАНИЦА, полной, для, m1haluc4
Просмотров: 527 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: