Меню сайта
АКЦИЯ!!!
Категории раздела
Меню [34]
Меню для сайтов на Ucoz
Кнопки [15]
Кнопки для uCoz
Блоки и формы [22]
Блоки и формы для uCoz.
Вид материалов [41]
Вид материалов для uCoz
Мини-Профили [7]
Мини-Профили для uCoz
Переключатели [29]
Переключатели страниц для uCoz
Информеры [35]
Информеры для uCoz
Плейеры для сайта [23]
Аудио, видео, радио плейеры
Слайдеры [21]
Слайдеры и карусели картинок.
Вид опросов [8]
Вид опросов для uCoz
Часы и календари [8]
Часы и календари для uCoz.
Статистика сайта [20]
Статистика сайта для uCoz
Скрипты [25]
Скрипты для uCoz
Виджеты [2]
Виджеты для uCoz
Мини-чаты [6]
Мини-чаты для uCoz
Ajax для uCoz [8]
Ajax для uCoz
Шаблоны сайтов [0]
Шаблоны и шапки для uCoz.
Анимация [3]
Анимация и анимашки для сайтов на Ucoz.
Игры [6]
Игры для uCoz.
Прочее для uCoz [18]
Прочее для uCoz.
Сервис

Translate my page
Выбрать язык / Select language:



   
веб студия Одесса создание интернет магазинов создание каталога товаров Создание сайтов раскрутка сайтов портфолио веб студии продвижение сайтов готовые дизайны сайтов наши заказчики Дизайн макеты для создания сайтов Flash игры для сайтов Мини-Чат для сайтов uCoz Вид опроса для сайта Часы и календари для сайтов дизайн сайтов-визиток онлайн радио для сайта кнопки для сайтов статистика для сайта юкоз мини-профили для сайта Полезное для сайтов переключатели страниц для сайтов ajax окна для сайтов скрипты для сайта информационные блоки для сайтов информеры для сайта Формы для Ucoz слайдер для сайта информеры для юкоз меню для сайта вид материалов для сайтов вид материалов uCoz Готовые сайты Новые Бизнес дизайн макеты Новые дизайн макеты Медицина дизайн макеты интернет магазинов Новые дизайн макеты Рестораны Новые дизайн макеты Музыка и клубы Новые дизайн макеты Отели дизайн макеты производство и услуги дизайн макеты интерьер дизайн макеты строительство дизайн макеты сельское хозяйство Новый дизайн макет Транспорт Новый дизайн макет Образование Новый дизайн макет Мода дизайн макеты компьютеры дизайн макеты мобилки Логотипы портфолио
Бесплатное отправление смс сообщений!
Поиск
Календарь
«  Август 2014  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей
Наш опрос
Есть ли у Вас сайт?
Всего ответов: 27
Друзья сайта

МЕТА - Украина. Рейтинг сайтов Рейтинг@Mail.ru
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама

Главная » 2014 » Август » 16

Вставляем этот код в CSS,
Код


/***

  * Autor makeup: z1MO_ok
  * Demo URL: http://4gmob.ru/menu/
  * Autor URL: http://4gmob.ru/
  * Skype: artmen_ok

***/

#menu_bg {background:url(/img/bg_menu.png) no-repeat;width:940px;height:51px;overflow:hidden;margin:0 auto;position:relative;padding:6px;}
#menu {list-style:none;margin:0;padding:0;background:url(/img/bg_menu.png) no-repeat 0 -63px;width:938px;height:48px;overflow:hidden;border-radius:10px;}
#menu li {float:left;color:#fff;font:bold 11px Tahoma;text-shadow:0 2px 0 #01263c;padding:0 45px;height:48px;line-height:48px;}
#menu li:hover {background:url(/img/menu_li_hover.png) repeat-x 0 0;text-shadow:0 2px 0 #02486b;padding:0;}
#menu li a {color:#fff;font:bold 11px Tahoma;text-shadow:0 2px 0 #01263c;text-decoration:none;}
#menu li:hover span {background:url(/img/menu_li_hover.png) no-repeat center bottom;height:48px;display:block;line-height:48px;padding:0 45px;}
.divider {background:url(/img/divider.png) no-repeat right;width:2px;height:48px;display:block;float:left;}

Этот код ставим в нашу страницу сайта.
Код


<div id="menu_bg">
<ul id="menu">

<li><a href="#"><span>Home</span></a></li>  
<span class="divider"></span>

<li><a href="#"><span>About Us</span></a></li>  
<span class="divider"></span>

<li><a href="#"><span>Services</span></a></li>  
<span class="divider"></span>

<li><a href="#"><span>Products</span></a></li>  
<span class="divider"></span>

<li><a href="#"><span>Clients</span></a></li>  
<span class="divider"></span>

<li><a href="#"><span>Blog</span></a></li>  
<span class="divider"></span>

<li><a href="#"><span>Contact</span></a></li>

</ul>
</div>

Скачать архив с исходниками меню. 
 

 

 

Категория: Меню | Просмотров: 498 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)

Компактный слайдер работающий автоматически

Слайдер хоть и маленький но может прокручивать любое количество изображений.У слайдера нет кнопок управления,он работает автоматически.Работать он будет только на динамических страницах (типа главной),в материалах модулей он будет работать не на всех сайтах.На меняющиеся в нём картинки можно прикрепить ссылки и использовать в качестве своеобразного меню.Картинки желательно применять с размерами 320Х240,для изменения разрешения изображений можете воспользоваться специальной программой предназначеной для уменьшения размеров.Программа не сложная,на сайте есть виде по работе с ней. Кстати можно изменить и фоновую картинку слайдера и его размеры на нужные,в нижней части есть редактор для экспериментов с кодами примеров - не забудьте воспользоваться.Если что то не понятно или существуют какие либо предложения,используйте формы комментариев.

Код


<style>  
#dsminigalerea {  
padding:0;  
margin:0;  
list-style-type:none;  
position:relative;  
overflow:hidden;  
width:396px;  
height:396px;  
margin:0 auto 20px auto;  
background:url(http://delaisait.ucoz.ru/script/img/1/galerea/fondsminigalerea.jpg);  
}  
#dsminigalerea img {  
border:0;  
}  
#dsminigalerea li {  
float:left;  
width:396px; height:396px;  
display:none;  
}  
#dsminigalerea li a {display:block; width:396px; height:396px; border:0;}  
#dsminigalerea li a img {  
display:block;  
border:0;  
}  
#dsminigalerea li a img.landscape {  
margin:74px auto;  
border:4px solid #fff;  
border-width:1px 4px;  
border-color:#444 #ccc #fff #ccc;  
}  
#dsminigalerea li a img.portrait {  
margin:34px auto;  
border:4px solid #fff;  
border-width:4px 1px;  
border-color:#444 #ccc #fff #ccc;  
}  
#dsminigalerea li.current {display:block;}  
</style>  
<script type="text/javascript" src="http://delaisait.ucoz.ru/script/js/1/galerea/dsminigalerea.js"></script>  
<ul id="dsminigalerea">  
<li class="current"><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_1.jpg" alt="Композиция-1" title="Композиция-1" /></a></li>  
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_2.jpg" alt="Композиция-2" title="Композиция-2" /></a></li>  
<li><a href="#"><img class="portrait" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_3.jpg" alt="Композиция-3" title="Композиция-3" /></a></li>  
<li><a href="#"><img class="portrait" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_4.jpg" alt="Композиция-4" title="Композиция-4" /></a></li>  
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_5.jpg" alt="Композиция-5" title="Композиция-5" /></a></li>  
<li><a href="#"><img class="portrait" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_6.jpg" alt="Композиция-6" title="Композиция-6" /></a></li>  
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_7.jpg" alt="Композиция-7" title="Композиция-7" /></a></li>  
<li><a href="#"><img class="landscape" src="http://delaisait.ucoz.ru/script/img/1/galerea/dsminigalerea_8.jpg" alt="Композиция-8" title="Композиция-8" /></a></li>  
</ul>  

 

Категория: Слайдеры | Просмотров: 570 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)

Слайдер для воспроизведения изображений работающий с применением jQuery и Mobilyslider. Будет работать на страницах модулей и динамических страницах сайта uCoz,в материале (как здесь) можно подключить только через фрейм. Слайдер можно настроить на три типа воспроизведения,дополнительно можно организовать или отменить автозапуск,а также показ элементов управления и остановку показа во время наведения курсора на рабочую часть. 

Код
<style>
.slider {
float:left;
/* Ширина слайдера */
width:600px;
/* Высота слайдера */
height:350px;
position:relative;
padding-bottom:26px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bottom_shadow.png) no-repeat bottom center;
}
.sliderContent {
float:left;
/* Ширина слайдера */
width:600px;
/* Высота слайдера */
height:350px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://delaisait.ucoz.ru/img/1/1/dsslider/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}
.prev {
background-position:0 0;
left:15px;
}
.prev:hover {
background-position:0 -44px;
}
.next {
right:15px;
background-position:-44px 0;
}
.next:hover {
background-position:-44px -44px;
}
.sliderContent .item {
position:absolute;
/* Ширина слайдера */
width:600px;
/* Высота слайдера */
height:350px;
background:#fff;
}
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bullets.png) no-repeat;
}
.sliderBullets .active {
background-position:0 -11px;
}
.sliderContent a {
outline:none;
}
</style>
<div class="slider dsslider">
<div class="sliderContent">
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/1.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/2.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/3.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/4.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/5.jpg" alt="" />
</div>
<div class="item">
<img src="http://delaisait.ucoz.ru/img/1/1/dsslider/6.jpg" alt="" />
</div>
</div>
</div>
<script src="http://delaisait.ucoz.ru/js/jQuery/mobilyslider.js" type="text/javascript">
</script>
<script type="text/javascript">
$('.dsslider').mobilyslider({
// Тип воспроизведения (vertical) или удалить всю строку
transition: 'fade',
// Скорость перелистывания
animationSpeed: 800,
// Автовоспроизведение включено
autoplay: true,
// Скорость автовоспроизведения
autoplaySpeed: 3000,
// Остановка во время наведения курсора (false)
pauseOnHover: true,
// Показывать кнопки вперёд назад (false)
bullets: true,
// Показывать нижние кнопки управления (false)
arrowsHide: true  
});
</script>

Пример скрипта с авто масштабированием изображений 

Внимание!!! По запросам пользователей материал был расширен, изображениям в слайдере можно придать "резиновые" свойства, т.е картинки и фотографии будут сами подстраиваться под установленные размеры самого слайдера.Вы можете применять разнокалиберные размеры изображений, не забывайте, масштабирование может исказить реальный вид при несопоставимых пропорциях ширины и высоты.В примере ниже слайдеру с изображениями из первого примера скрипта установлен размер 200Х200, напоминаю, для проверки кода скрипта в редакторе понадобится добавить к нему библиотеку jQuery.

Код

<style>
.slider {
float:left;
/* Ширина слайдера */
width:200px;
/* Высота слайдера */
height:200px;
position:relative;
padding-bottom:26px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bottom_shadow.png) no-repeat bottom center;
}
.sliderContent {
float:left;
/* Ширина слайдера */
width:200px;
/* Высота слайдера */
height:200px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://delaisait.ucoz.ru/img/1/1/dsslider/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}
.prev {
background-position:0 0;
left:15px;
}
.prev:hover {
background-position:0 -44px;
}
.next {
right:15px;
background-position:-44px 0;
}
.next:hover {
background-position:-44px -44px;
}
.sliderContent .item img{
position:absolute;
/* Ширина слайдера */
width:200px;
/* Высота слайдера */
height:200px;
background:#000;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
}
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(http://delaisait.ucoz.ru/img/1/1/dsslider/bullets.png) no-repeat;
}
.sliderBullets .active {
background-position:0 -11px;
}
.sliderContent a {
outline:none;
}
</style>
<div class="slider dsslider">
<div class="sliderContent">
<div class="item">
<img src="http://delaisait.ucoz.ru/img ... Читать дальше »
Категория: Слайдеры | Просмотров: 678 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)

Слайдер с адаптивными свойствами будет изменять свои размеры относительно свободного пространства окна. Изначальные размеры изображений не имеют значения и будут масштабироваться согласно устанавливаемым размерам по месту. FlexSlider может использоваться как слайдер для видео, применяя в качестве слайдов видео проигрыватели. Резиновый слайдер имеет большое количество настроек, при помощи которых Вы сможете настроить воспроизведение на своё усмотрение. По умолчанию, готовый код для установки полностью настроен, Вам останется поместить его в требуемое место, изменить путь к используемым слайдам и радовать посетителей своими творениями. Форма комментариев ВКонтакте предназначена для краткого диалога о материале, для получения дополнительной информации технического характера нужно использовать стандартную форму комментариев.

Код слайдера для установки и проверки 

Будьте внимательны!!! В примере вписана библиотека jQuery выделенная красным цветом. Она нужна только для проверки работоспособности кода для установки и испытания его ссо своими настройками. При установке на свой сайт, если он на uCoz скрипт нужно удалить из кода.

Код
<script type="text/javascript" src="//s36.ucoz.net/src/jquery-1.7.2.js"></script>
<link rel='stylesheet' href='//delaisait.ucoz.ru/script/sluder/2014/flexslider/flexslider.css' type='text/css' media='all' />
<link rel='stylesheet' href='//delaisait.ucoz.ru/script/sluder/2014/flexslider/public.css' type='text/css' media='all' />
<script type='text/javascript' src='//delaisait.ucoz.ru/script/sluder/2014/flexslider/jquery.flexslider-min.js'></script>
<style>
#metaslider.flexslider li {
margin-right: 5px !important;
}
#ds-flexslider {
max-width:600px;
margin:0 auto;
}
</style>
<div id="ds-flexslider" class="metaslider metaslider-flex">
<div id="metaslider_container">
<div id="metaslider" class="flexslider">
<ul class="slides">
<li style="display: none;">
<a href="#" target="_blank">
<img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/947677767.jpg" alt="Девушка Эльф" />
</a>
<div class="caption-wrap">
<div class="caption">Девушка Эльф</div></div>
</li>
<li style="display: none;">
<a href="#" target="_blank">
<img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/769128589.jpg" alt="Девушка в чёрном" />
</a>
<div class="caption-wrap">
<div class="caption">Девушка в чёрном</div></div>
</li>
<li style="display: none;">
<a href="#" target="_blank">
<img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/378189360.jpg" alt="Девушка в красном" />
</a>
<div class="caption-wrap">
<div class="caption">Девушка в красном</div></div>
</li>
<li style="display: none;">
<a href="#" target="_blank">
<img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/84040181.jpg" alt="Девушка в свадебном платье" />
</a>
<div class="caption-wrap">
<div class="caption">Девушка в свадебном платье</div></div>
</li>
<li style="display: none;">
<a href="#" target="_blank">
<img src="//delaisait.ucoz.ru/script/sluder/2014/flexslider/572570776.jpg" alt="Девушка с бабочкой" />
</a>
<div class="caption-wrap">
<div class="caption">Девушка с бабочкой</div></div>
</li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#metaslider').flexslider({
slideshowSpeed:3000,
animation:'slide',
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:'horizontal',
reverse:false,
animationSpeed:600,
prevText:"<",
nextText:">",
easing:"linear",
slideshow:true,
itemWidth:600,
itemMargin:5,
useCSS:true
});
});
</script>

 Возможные изменения в слайдере 
Не исключено что эта информация может пригодится:
1.Вопрос: Как сделать слайдер не фиксированным по ширине, а на всю свободную ширину?
1.Ответ: Заменить в стилях (max-width:600px;) на (max-width:100%;) и убрать функцию в скрипте (itemWidth:600,). Имейте в виду что элементы слайдов должны иметь одинаковый размер, иначе будет корявово.
2.Вопрос: Как убрать расположение слайдера по центру?.
2.Ответ: По умолчанию слайдер будет центрироваться, чтобы сделать расположение свободным уберите в стилях строку (margin:0 auto;).
3.Вопрос: Как убрать пустой промежуток между слайдами?
3.Ответ: Измените в стилях строку (margin-right: 5px !important;) на (margin-right: 0 !important;) и удалите функцию в скрипте (itemMargin:5,).

 

Категория: Слайдеры | Просмотров: 1388 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)

Видеоплеер на свой сайт

 


Зачастую надо вставить на сайт видеоролик... Использовать всякие youtube и rutube несложно, но лучше
использовать свой плеер со своим оформлением...

Для этого вначале скачиваем файлы, прилагающиеся к данной теме. Там есть папка flash. В ней файл
mediaplayer.swf. Он-то нам и нужен. Всё остальное удаляем. Далее готовим само видео и картинку, которая будет
отображаться в плеере пока видео ещё не запустили. Теперь загружаем на сайт видео, картинку и сам плеер
(mediaplayer.swf). Прописываем вот это:

Код

<embed src="АДРЕС_ФАЙЛА_MEDIAPLAYER.SWF" width="ШИРИНА_ПЛЕЕРА(560)" height="ВЫСОТА_ПЛЕЕРА(470)"
allowfullscreen="true" flashvars="&file=АДРЕС_НАШЕГО_ВИДЕОℑ=АДРЕС_КАРТИНКИ&callback=http://video.elfox.net
/load/16-1-0-1283&height=СНОВА_ВЫСОТА_ПЛЕЕРА(470)&width=СНОВА_ШИРИНА_ПЛЕЕРА(560)&
frontcolor=ЦВЕТ_КНОПОК_И_НАДПИСЕЙ_ПЛЕЕРА(0x000000)&backcolor=ЦВЕТ_ПАНЕЛИ(0xa9a9a9)&
lightcolor=ЦВЕТ_КНОПОК_ПРИ_НАВЕДЕНИИ(0xff0000)"></embed>

Этот код использует тег <embed>.Замечу, что данный тег устарел. Поэтому я решил показать вам ещё один способ
вставки на страницу видеоплеера - без всяких embed, зато с использованием функции AC_FL_RunContent().
Вначале вставляем на страницу эту библиотеку. .Вставляется она примерно так:
 

Код
<script language="javaScript" src="АДРЕС_БИБЛИОТЕКИ_AC_FL_RunContent.JS"></script>

Затем прописываем следующий код:
Код

<script>Ac_FL_RunContent('src','АДРЕС_ПЛЕЕРА','movie','СНОВА_АДРЕС_ПЛЕЕРА','width','ШИРИНА_ПЛЕЕРА(560)','height'
,'ВЫСОТА_ПЛЕЕРА(470)','f la       shvars','&file=АДРЕС_НАШЕГО_ВИДЕОℑ=АДРЕС_КАРТИНКИ&
callback=http://video.elfox.net/load/16-1-0-1283&height=СНОВА_ВЫСОТА_ПЛЕЕРА(470)&
width=СНОВА_ШИРИНА_ПЛЕЕРА(560)&frontcolor=ЦВЕТ_КНОПОК_И_НАДПИСЕЙ_ПЛЕЕРА(0x000000)&
backcolor=ЦВЕТ_ПАНЕЛИ(0xa9a9a9)&lightcolor=ЦВЕТ_КНОПОК_ПРИ_НАВЕДЕНИИ(0xff0000)');</script>

Скачать Видеоплеер

 
Категория: Плейеры для сайта | Просмотров: 529 | Добавил: RedStar | Дата: 16.08.2014 | Комментарии (0)


Copyright "IPC" © 2008
Хостинг от uCoz