Меню сайта
АКЦИЯ!!!
Категории раздела
Сервис
Translate my page
Выбрать язык / Select language:
Бесплатное отправление смс сообщений!
Поиск
Календарь « Май 2024 » Пн Вт Ср Чт Пт Сб Вс 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Архив записей
Наш опрос
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама
« 1 2 ... 5 6 7 8 9 ... 33 34 »
Слайдер для воспроизведения изображений работающий с применением 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>
Пример скрипта с авто масштабированием изображений
Код
<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
...
Читать дальше »
Категория: Слайдеры | Просмотров: 685 |
Добавил: RedStar |
Дата: 16.08.2014 |
Слайдер с адаптивными свойствами будет изменять свои размеры относительно свободного пространства окна. Изначальные размеры изображений не имеют значения и будут масштабироваться согласно устанавливаемым размерам по месту. 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>
Возможные изменения в слайдере
Категория: Слайдеры | Просмотров: 1396 |
Добавил: RedStar |
Дата: 16.08.2014 |
Видеоплеер на свой сайт
Код
<embed src="АДРЕС_ФАЙЛА_MEDIAPLAYER.SWF" width="ШИРИНА_ПЛЕЕРА(560)" height="ВЫСОТА_ПЛЕЕРА(470)"
Этот код использует тег <embed>.Замечу, что данный тег устарел. Поэтому я решил показать вам ещё один способ
Код
<script language="javaScript" src="АДРЕС_БИБЛИОТЕКИ_AC_FL_RunContent.JS"></script>
Затем прописываем следующий код:Код
<script>Ac_FL_RunContent('src','АДРЕС_ПЛЕЕРА','movie','СНОВА_АДРЕС_ПЛЕЕРА','width','ШИРИНА_ПЛЕЕРА(560)','height'
Скачать Видеоплеер
Скрипт для юкоз: Вид новостей
Код:
<br><table class="etable" align="center" cellpadding="3" cellspacing="1" width="575">
</td></tr>
Это вставляем в css, в любое место:
Код:
.etable {
Кидаем в css
Код:
/* PageSelector */
Не зря тема названа именно черное меню для сайта, потому, что если у вас черный шаблон, то и меню будет черным, и к черному дизайну оно больше подходит. Но так как у меня шаблон болотного цвета, то и меню под него подстроилось. Так что не пугайтесь этого некрасивого оттенка и устанавливайте смело, если вам нужно маленькое, не навороченное меню
Код
<style>.blockmenu {
form {
<SPAN class="blockmenu">
Категория: Меню | Просмотров: 470 |
Добавил: RedStar |
Дата: 15.08.2014 |
Этот код вставляем в CSS:
Код:
.catPages2 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
На этот раз вашему вниманию предоставляется синий вариант полупрозрачных окон в стиле Windows Vista Установка: После /head или в самый верх любого глобального блока (Желательно использовать блок "Верхняя часть сайта") вставляйте:
<style type="text/css">
Самое простое и обычное горизонтальное меню для сайта голубого цвета. Легкое в установке, для светлых шаблонов с голубыми оттенками самое то! Можно установить как в верхней части, так и в нижней.
Код
<style>
<table cellpadding="0" cellspacing="0" class="global_links">
Категория: Меню | Просмотров: 558 |
Добавил: RedStar |
Дата: 15.08.2014 |
Вставляем в самый низ css
Код:
.catPages1 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.catPages1 a:link,
.catPages1 a:visited,
.catPages1 a:hover,
.catPages1 a:active {text-decoration:none;color: #636363;background:#353535;padding:3px 10px;font-size:11px;font-weight:bold;}
.catPages1 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
.catPages1 b {text-decoration:none;background:#2c2c2c;padding:3px 10px;color:#ccc;font-size:11px;}
.pagesBlockuz1 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.pagesBlockuz1 a:link,
.pagesBlockuz1 a:visited,
.pagesBlockuz1 a:hover,
.pagesBlockuz1 a:active {text-decoration:none;color: #636363;background:#353535;padding:3px 10px;font-size:11px;font-weight:bold;}
.pagesBlockuz1 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
.pagesBlockuz1 b {text-decoration:none;background:#2c2c2c;padding:3px 10px;color:#ccc;font-size:11px;}
.pagesBlock1 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.pagesBlock1 a:link,
.pagesBlock1 a:visited,
.pagesBlock1 a:hover,
.pagesBlock1 a:active {text-decoration:none;color: #636363;background:#353535;padding:3px 10px;font-size:11px;font-weight:bold;}
.pagesBlock1 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
.pagesBlock1 b {text-decoration:none;background:#2c2c2c;padding:3px 10px;color:#ccc;font-size:11px;}
