#8
Dimon02022
Надіслано
08 лютий 2012 - 11:51
Случайные фотографии.
ПУ-->Информеры. Создаем информер с такими параметрами:
Раздел: Фотоальбомы
Тип данных: Материалы
Способ сортировки: В случайном порядке
Количество материалов: 6 или какое вам нужно
В дизайн информера вставляем это:
(проверяйте ссылки в скрипте ведущие на изображения на работоспособность)
Code
<table border="0" width="100%" cellspacing="2" cellpadding="3">
<tr>
<td class="bBlok5"><DIV class=""><table width="100%"><tr><td align="left"><a href="$PHOTO_URL$" title="Игра: $CAT_NAME$ | Просмотры: $REVIEWS$ | Размеры: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb">$PHOTO$</a></td></tr></table></td>
</tbody></table> ПУ-->Управление дизайном-->CSS. В любое место ставим этот код:
Code
.bBlok5 {padding:5px;background:url('http://diz-cs.ru/images/b.gif') #000000;border:1px solid #4c4c4c;} Затем, там где хотим вывести информер, пишем это:
Code
<table border="0" width="100%" cellspacing="2" cellpadding="3">
<tr>
<td style="border:1px solid #252525;" width="100%" background=http://kentgames.ru/diz/9.gif><CENTER><B><FONT color=#1E90FF>Случайные картинки</FONT></B></CENTER></td>
</tr>
<tr>
<td class="bBlok5">
<center>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" class="infTable"> <tr> <td class="infTd" width="16%"> <table class="bBlock5" align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="padding: 3px; text-align: center;">$MYINF_4$</td></tr></tbody></table></td></tr></table>
</center>
</td>
</tr> $MYINF_4$- это заменяем на свой информер.
#9
Dimon02022
Надіслано
08 лютий 2012 - 11:54
Аватар и данные о пользователе при наведении.
1.Создаем информер |Раздел Пользователи | Способ сортировки
какой Вам угодно) | Количество материалов
любое) | Количество колонок:(1 или 2)
Далее все в шаблоне информера заменяем на:
ссылки (vseraznoe.ucoz.ru) замените на свои.
Code
<style type="text/css">
.bubbleInfo{position: relative;}
.popup{position: absolute; display: ; z-index: 50; }
</style>
<a href="$PROFILE_URL$"><div class="bubbleInfo">
<div class="trigger">$USERNAME$</div></a>
<div class="popup"><table style="width: 181px; height: 216px; background-image: url(http://vseraznoe.ucoz.ru/images/fon.png); background-repeat: no-repeat; background-attachment: scroll; background-position: left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; border-collapse: collapse;" align="" width=""><tbody><tr><td style="text-align: left; vertical-align: middle; padding-top: 5px; letter-spacing: 0pt; word-spacing: 0pt;"><table style="width: 100px; height: 100px; background-image: url(http://vseraznoe.ucoz.ru/images/avatarko.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; border-collapse: collapse;" align="center" width=""><tbody><tr><td><img alt="" src="$AVATAR_URL$" border="0" height="100" width="100"></td></tr></tbody></table><table style="width: 100%; border-collapse: collapse;"><tbody><tr><td style="padding: 1px 5px 1px 8px; text-align: left; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt;"><span style="font-size: 8pt;"><b>Ник:</b></span> <span style="font-size: 8pt;">$USERNAME$</span><br></td></tr><tr><td style="padding: 1px 5px 1px 8px; text-align: left; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt;"><span style="font-size: 8pt;"><b>Группа:</b></span> <span style="font-size: 8pt; color: rgb(255, 0, 0);">$GROUP_NAME$</span><br></td></tr><tr><td style="padding: 1px 5px 1px 8px; text-align: left; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt;"><span style="font-size: 8pt;"><b>Страна:</b></span> <span style="font-size: 8pt;">$COUNTRY$</span><br></td></tr><tr><td colspan="1" style="padding: 1px 5px 1px 8px; text-align: left; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt;"><span style="font-size: 8pt;"><b>С нами с</b></span> <span style="font-size: 8pt;">$REG_DATE$</span><br></td></tr><tr><td style="padding: 1px 5px 1px 8px; text-align: left; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt;"><span style="font-size: 8pt;"><b>Новостей:</b></span> <span style="font-size: 8pt;">$NEWS_POSTS$</span><br></td></tr></tbody></table><br></td></tr></tbody></table></div>
</div> 2.В ПУ заходим в Управление дизайном | Быстрая замена
Режим замены: Простой.
Code
Что заменить:
</head>
На что заменить:
<script src="http://vseraznoe.ucoz.ru/images/jquery-latest.pack.js" type="text/javascript"></script> <script src="http://vseraznoe.ucoz.ru/images/jquery.coda-bubble.sp.js" type="text/javascript"></script></head>
3.Вставляем код Вашего информера к примеру в статистику(с заголовком к примеру "Лучшие пользователи") или в новый блок (на что хватит Вашей фантазии).
#15
Dimon02022
Надіслано
08 лютий 2012 - 12:12
Галерея АПЭЛ для Фотоальбома.
Шаг 1 – XHTML
Давайте посмотрим на XHTML разметку:
Code
<div id="main">
<div id="gallery">
<div id="slides">
<div><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div>
<div><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div>
<div><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div>
</div>
<div id="menu">
<ul>
<li> </li><li><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li>
</ul>
</div>
</div>
</div> Идея проста 2 контейнера DIV - один с id=”menu” содержит миниатюры, второй с id=“slides” содержит слайды.
Для добавления нового слайда понадобится всего лишь просто добавить новые элементы в оба контейнера. Слайды - картинки в формате JPG, миниатюры - прозрачные PNG. Но можете использовать и любые другие другие форматы.
Также можете вставлять любой HTML код. К примеру, Вы можете сделать определенный слайд ссылкой в виде картинке. Крайний правый слайд в нашей демо так и сделан, так что для вас не составит особого труда это сделать.
Важно, прописать у слайдов высоту и ширину - они используется jQuery для определения зоны прокрутки.
Шаг 2 – CSS
Code
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Page reset */
margin:0px;
padding:0px;
}
body{
/* Setting default text color, background and a font stack */
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:Arial, Helvetica, sans-serif;
}
/* Gallery styles */
#gallery{
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url(img/panel.jpg) repeat-x bottom center #ffffff;
/* The width of the gallery */
width:920px;
overflow:hidden;
}
#slides{
/* This is the slide area */
height:400px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:920px;
overflow:hidden;
}
.slide{
float:left;
}
#menu{
/* This is the container for the thumbnails */
height:45px;
}
ul{
margin:0px;
padding:0px;
}
li{
/* Every thumbnail is a li element */
width:60px;
display:inline-block;
list-style:;
height:45px;
overflow:hidden;
}
li.inact:hover{
/* The inactive state, highlighted on mouse over */
background:url(img/pic_bg.png) repeat;
}
li.act,li.act:hover{
/* The active state of the thumb */
background:url(img/active_bg.png) no-repeat;
}
li.act a{
cursor:default;
}
.fbar{
/* The left-most vertical bar, next to the first thumbnail */
width:2px;
background:url(img/divider.png) no-repeat right;
}
li a{
display:block;
background:url(img/divider.png) no-repeat right;
height:35px;
padding-top:10px;
}
a img{
border:;
}
/* The styles below are only necessary for the demo page */
h1{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:36px;
font-weight:normal;
margin-bottom:15px;
}
h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
position:absolute;
right:0;
text-transform:uppercase;
top:15px;
}
#main{
/* The main container */
margin:15px auto;
text-align:center;
width:920px;
position:relative;
}
a, a:visited {
color:#0196e3;
text-decoration:;
outline:;
}
a:hover{
text-decoration:underline;
}
p{
padding:10px;
text-align:center;
} В этой таблице стилей мы использовали несколько CSS3 sсвойств:
* box-shadow, по углам галереи небольшая тень. Использование этого свойства - необходимо предоставить координаты X и Y (0 0 here), размывание (3px в нашем примере) и цвет тени;
* border-radius, круглые границы снизу галереи.
К сожалению, эти свойства работают не во всех браузерах.
Шаг 3 – jQuery
Code
(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Loop through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#menu ul li a').click(function(e){
/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
}); Главная идея в циклическом повторении слайдов, ширина слайдов суммируется и эта ширина присваевается контейнеру. Поскольку слайды выровнены по левому краю - у них достаточно места комфортно расположиться друг за другом.
Всего 40 строк кода и наша слайдшоу - галерея готова!
Нажми.
#17
Dimon02022
Надіслано
08 лютий 2012 - 12:20
Кнопка "Вверх".
Что в этом скрипте особенного:
1) Появляестя скроллирующая кнопка только после тот, как вы начнёте пролистывать страницу Вниз и пропадёт, как только вы снова окажетесь в самом верху страницы
2) При нажатии на кнопку происходит плавное прокручивание страницы вверх (В Opera резкий переход вверх без всякой плавности)
Управление дизайном сайта -- Нижняя часть сайта.
В самый верх вставляем:
Code
<a href="#" id="toTop">Вверх <img src="images/to_top.gif" border="0" align="absmiddle" /></a>
<script src="/jquery.scroll.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script> Теперь бежим в Управление дизайном сайта -- Таблица стилей (CSS)
В самый верх вставляем:
Code
/* === jQ TOP === */
#toTop {
width: 100px;
background: #f1f1f1;
border: 1px solid #cccccc;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: ;
}
/* =============== */ Теперь заливаем все файлы из архива в корень сайта (Через файловый менеджер)
Всё, наслаждаемся скриптом!
Архив.