| Главная » Файлы » Скрипты для uCoz » Фотоальбом |
Страница с полной фотографией и комментариями by m1haluc4 для uCoz
| 24.06.14, 09:24:08 | |
 На днях оформил "Страница с полной фотографией и комментариями" , выкладываю здесь:) Очень красивая, анимационная, и стильная страница  Смотрим ДЕМО Приступим к установке??? Идем ПУ --> Страница с полной фотографией и комментариями, там все удаляем и ставим вот этот код: Код <!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 - это фон страницы! Пользуем на здоровьечко Автор - m1haluc4 | |
| Просмотров: 703 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |