Слайдер фото для юКоз | Mobilyslider & jQuery - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Скрипты для uCoz » Слайдер для сайта uCoz » Слайдер фото для юКоз | Mobilyslider & jQuery

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Слайдер фото для юКоз | Mobilyslider & jQuery

Слайдер изображений jQuery & Mobilyslider




Слайдер для воспроизведения изображений работающий с применением 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/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>



Библиотека jQuery для проверки в редакторе

Этот скрипт не нужно добавлять на свой сайт,он нужен только для проверки слайдера в редакторе. У Вас на сайте (uCoz) библиотека есть.




<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"> </script>


Слайдер в работе через фрейм



Проверьте пример скрипта в редакторе

Скопируйте пример скрипта для установки и библиотеку jQuery в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 13288 | Добавил: IZOTOP | Рейтинг: 5.0/5
    | Теги: foto, для юкоза, Slider, на сайт, uCoz, юкоз, слюдер

    Всего комментариев: 451 2 »
    0   Спам
    44 Isakov2702   (17.03.2014 13:11)
    Аватар Isakov2702 Здравствуйте! Установил слайдер. Если делать ссылку, чтобы с фотографии переходить в другие разделы сайта, то в левом углу появляется точка, на белом фоне. Сайт На первом слайде видно. На остальных убрал переход.

    0   Спам
    45 IZOTOP   (19.03.2014 01:17)
    Аватар IZOTOP Прошу прощение за автора, слайдер не предназначен для отображения изображений используя которые можно задействовать адреса для перехода, по сути можно повесить ссылки на изображения, но ведь они уже используются в качестве кнопок переключения при отсутствии автоматического воспроизведения.
    Грубо, можно присвоить адресам элементы списка <li> или <ol> и указать на отсутствие маркера list-style-type.

    0   Спам
    43 kopna   (05.03.2014 13:51)
    Аватар kopna Доброго времени суток!

    Установил на сайте ( сайт - дубликат ) слайдер. Отображается корректно. А вот,на основном, выводит только картинки в три столбца? Код убрал, что бы не портить внешний вид :-) Подскажите, что я не так делаю. С уважением Виталий.


    Разобрался :-) Совсем забыл, что шаблон основного сайта был изменён. Методом проб, понял, что нужно вставить код слайдера после <!-- <body> -->$CONTENT$<style>. Все заработало. Да и про то, что нужно поставить галку "использовать персональный шаблон" ток же забыл. Попутно понял, как сделать "Главную", отличную от всего шаблона. Я пока учусь :-)

    0   Спам
    41 ADMIN3490   (08.02.2014 22:25)
    Аватар ADMIN3490 дружище, а есть вариант заставить скрипт воспроизводить слайды в случайном порядке? типа shuffle или random?

    0   Спам
    42 IZOTOP   (10.02.2014 21:28)
    Аватар IZOTOP К сожалению во внешнем скрипте не описана не одна из перечисленных Вами функций, в предоставленном виде материала нет возможности их задействовать.

    0   Спам
    35 vuoxa   (30.11.2013 23:17)
    Аватар vuoxa Извините! Тормознул. Все супер! Гигантское спасибо!
    http://livetoday.ucoz.com/

    0   Спам
    36 IZOTOP   (30.11.2013 23:30)
    Аватар IZOTOP Раз уж свела судьба, вот ссылка на изображение:

    Вот ссылка на статью:

    Подумайте о чём я Вам хотел этим намекнуть?

    0   Спам
    37 vuoxa   (30.11.2013 23:38)
    Аватар vuoxa Спасибо! Я в создании сайтов - абсолютный чайник. Так что, рад любому совету.

    0   Спам
    38 vuoxa   (30.11.2013 23:45)
    Аватар vuoxa Беда в том, что я совсем ничего не понимаю в сайтостроении. Тыкаюсь, как слепой котенок. Наугад. Конечно, я бы, с большим удовольствием, переместил слайдер на место этой докторши в правой верхней части сайта, а на месте слайдера поставил крупно название сайта. Но как эту даму убрать - не понимаю. Чего я только не предпринимал!.. То ее макушка остается, то она вниз сползает...

    0   Спам
    39 IZOTOP   (01.12.2013 00:04)
    Аватар IZOTOP Ваша дама "состоит" из 3 строк таблицы стилей CSS.
    1:

    div#navBar {height:71px;background:url('/.s/t/922/3.jpg') right no-repeat;}

    2:

    div#picture {width:70%;float:right;background:url('/.s/t/922/4.jpg') right no-repeat;height:200px;}

    3:

    div#content {width:70%;float:right;background:url('/.s/t/922/5.jpg') right top no-repeat;}

    Самое главное, делайте копию исходного документа перед началом изменений.
    В принципе она не плохо смотрится со своей очаровательной улыбкой, но как говорится на вкус и цвет.

    0   Спам
    40 vuoxa   (01.12.2013 02:16)
    Аватар vuoxa И снова, огромное спасибо! Сделал, что хотел. Осталось только логотип сделать кликабельным. Но сейчас голова уже не варит.)))Завтра.

    0   Спам
    34 vuoxa   (30.11.2013 22:44)
    Аватар vuoxa Что-то я не понял. Слайдер не работает. Висит одна картинка, правда, действительно, кликабельная.)))

    0   Спам
    33 vuoxa   (21.11.2013 22:30)
    Аватар vuoxa Шаблон чудесный! Спасибо! Можно ли картинки сделать кликабельными? Пробовал, они как будто падать начинают.

    0   Спам
    31 Sofi   (13.10.2013 06:13)
    Аватар Sofi http://шале24.рф/ на первой странице расположен уже один такой слайдер с надписью : "Дарим дисконтные карты!" еще один нужно рассположить в подвале сайта там где рассположенны контакты и рядом банер с надписью "niji авторская кухня"- вместо этого банера должен быть слайдер?

    0   Спам
    32 IZOTOP   (20.10.2013 00:25)
    Аватар IZOTOP Осмотр был произведён, второй слайдер можно добавить без обучения только через фрейм.
    Другими словами сделайте изображения для второго слайдера, изображения должны иметь разрешения аналогичные этому:
    /assets/templates/shale24/photo/rec2.jpg
    Хотя бы 2-3.
    Как я понял вместо него должен находиться слайдер.

    0   Спам
    29 Sofi   (12.10.2013 20:21)
    Аватар Sofi Здравствуйте подскажите еще пожалуйста а два таких слайдера нельзя на одной стр размещать?

    0   Спам
    30 IZOTOP   (12.10.2013 21:01)
    Аватар IZOTOP Во фреймах можно разместить любое (относительно целесообразности) количество.
    Укажите ссылку на страницу где должны быть установлены слайдеры и подробно опишите их положение.
    Разумеется простым языком, там то сямто после это над этим.

    0   Спам
    27 Sofi   (08.10.2013 16:11)
    Аватар Sofi Спасибо Огромное все учту!!!!:))) ура ура!

    0   Спам
    28 IZOTOP   (09.10.2013 02:36)
    Аватар IZOTOP Если что не "так" звонить не надо, пишите.

    0   Спам
    25 Sofi   (06.10.2013 15:32)
    Аватар Sofi !!!!!!!!!

    0   Спам
    26 IZOTOP   (07.10.2013 21:29)
    Аватар IZOTOP Привет!
    Вот Ваш сайт со слайдером установленным.
    С исходника извлекайте.
    Дополнительно:
    Вам нужно быть в курсе как применять заголовки на сайте.
    У Вас есть вот такая запись html:
    Код


    <h1>Уважаемые клиенты!</h1>



    В теге H1 пишется название сайта.

    0   Спам
    23 Sofi   (03.10.2013 16:13)
    Аватар Sofi оттветте как можно быстрее пожалуйста сайт рабочий нужно сделать:(

    0   Спам
    24 IZOTOP   (04.10.2013 17:26)
    Аватар IZOTOP На странице указанной Вами мне не удалось найти слайдера...???

    0   Спам
    22 Sofi   (03.10.2013 16:12)
    Аватар Sofi !!!!

    0   Спам
    20 Sofi   (02.10.2013 18:11)
    Аватар Sofi Подскажите пожалуйста нужно этот слайдер поставить в правую колонку со свойством float:right; а у этого слайдера стоит float:left; и даже если я его меняю float:right на у меня все равно слайдер и вся правая колонка смещается вниз под левую колонку и еще и в лево уходит sad как решить проблему???

    0   Спам
    21 IZOTOP   (03.10.2013 15:40)
    Аватар IZOTOP Вам нужно указать адрес где применяется подобный элемент.
    В любом случае код выстроен в положение сбитое к левой стороне.
    Это нормально, границы страницы изначально не известны, поэтому нужно смотреть положение элемента с соседями и уже исходя из этого думать как с ними всё это дело разровнять

    0   Спам
    19 IzmailkvartiraComfort   (30.07.2013 13:02)
    Аватар IzmailkvartiraComfort Доброго времени суток , Михаил, подскажите пожалуйста как сделать подпись к каждой картинке (описание) , буду очень благодарен ,что то понять не могу.

    0   Спам
    18 Viktor   (26.07.2013 23:32)
    Аватар Viktor Здравствуйте ваш сайт очень помогает! Но у меня есть проблема - слайдер работает только на главной странице, на других нет. Как это исправить? Большая просьба помочь. Спасибо.
    Адрес сайта: http://avto-shop.ucoz.ru/

    0   Спам
    17 Admin9349   (26.07.2013 11:15)
    Аватар Admin9349 1. С Днем Сисадмина, всех благ в личной жизни и в развитии данного сайта. biggrin
    2. Можно ли совсем убрать кнопки со слайдера, т.к., там где я хочу его применить они совсем не нужны.
    _______________________________________________________________
    Я не мастер, я только учусь.

    0   Спам
    15 Мага   (21.07.2013 16:38)
    Аватар Мага Спасибо за слайдер.
    Подскажите, как поставить кнопочки переключения "С низу которые" прямо на изображение например в правый нижний угол.
    P.s. Использовал первый вариант кода.

    +1   Спам
    16 IZOTOP   (23.07.2013 19:14)
    Аватар IZOTOP Найдите в стиле такой участок:

    .sliderBullets {
    position:absolute;
    bottom:0;
    left:50%;
    z-index:50;
    margin-left:-45px;
    }

    Нужно придать свойству bottom значение, например 20%:

    .sliderBullets {
    position:absolute;
    bottom:20%;
    left:50%;
    z-index:50;
    margin-left:-45px;
    }

    После этого кнопки переключения в нижней части поднимутся вверх.

    0   Спам
    12 admin3652   (27.05.2013 11:42)
    Аватар admin3652 Подскажите, пожалуйста, как сделать, чтобы этот слайдер расположился ровно посередине ячейки таблицы перед фоновой картинкой. По горизонтали получилось выровнять, а по вертикали - прилипает к верхней границе фона и все тут... Точнее я сделал рамку gif и хочу, чтобы слайдер пказывал точно внутри нее, а он уползает вверх. Кнопки внизу я отключил, может они смещают центр слайдера, хоть они и не видны? Получилось приопустить в визуальном редакторе пробелами, но точно подогнать не выходит. Разбираюсь пока плохо в html и css, так что объясните попонятней. Спасибо.

    +3   Спам
    13 IZOTOP   (27.05.2013 17:14)
    Аватар IZOTOP Привет!
    В принципе Ваш вопрос понятен, Вы хотите чтобы слайдер находился внутри рамки, т.е она была его фоном.
    Для этого дополнительно нужно таблице установить размеры картинки с рамкой, а для находящегося внутри слайдера указать значения внутренних отступов от краёв свойством CSS3 - padding.
    Вот как это выглядит:

    Код

    <style>
    #sluder-fon {
    margin-left:auto;
    margin-right:auto;
    width:600px;
    height:450px;
    padding-top:10px;
    padding-left:10px;
    background:url(Путь к картинке);
    }
    </style>
    <table id="sluder-fon">
    <tr>
    <td>
    ЗДЕСЬ КОД СЛАЙДЕРА
    </td>
    </tr>
    </table>


    Описание свойств

    Два свойства ниже делают таблицу по центру, так получается по тому что с права и лева расстояние как авто, а раз точных размеров не указано браузер делает по центру.
    margin-left:auto;
    margin-right:auto;
    Ниже свойство в котором нужно указать ширину картинки которая будет фоном-рамкой для слайдера.
    width:600px;
    Ниже свойство в котором нужно указать высоту картинки которая будет фоном-рамкой для слайдера.
    height:450px;
    Ниже свойство в котором нужно указать отступ от верхнего края фона до верхнего края слайдера.
    padding-top:10px;
    Ниже свойство в котором нужно указать отступ от левого края фона до левого края слайдера.
    padding-left:10px;
    Ниже свойство в котором указывается путь к фоновой картинке.
    background:url(Путь к картинке);
    -------------
    Скопируйте код примера выше, вставьте в него код слайдера и регулируйте значениями, всех вписанных свойств вполне хватит для Вашей задумки.

    0   Спам
    14 admin3652   (27.05.2013 17:44)
    Аватар admin3652 Спасибо огромное, все получилось, низкий Вам поклон!!!

    0   Спам
    10 Vladimir   (01.05.2013 21:08)
    Аватар Vladimir Михаил добрый вечер подскажите поставил слайдер на сайт, не могу отцентровать, в своём мониторе вроде по центру, на широкоэкранном, текст вылазит с правой стороны. сайт http://tyristkaraganda.ru/

    0   Спам
    11 IZOTOP   (02.05.2013 20:31)
    Аватар IZOTOP Здравствуйте Владимир!
    Для расположения слайдера по центру Вам нужно воспользоваться этим материалом.
    Поместите весь код слайдера в таблицу, вот так:
    Код

    <table style="margin-left:auto;margin-right:auto;">
    <tr>
    <td>
    ЗДЕСЬ КОД СЛАЙДЕРА
    </td>
    </tr>
    </table>

    0   Спам
    9 Effremov   (20.04.2013 00:09)
    Аватар Effremov IZOTOP, большое спасибо!!! Все отлично работает (с вашей помощью)!Respect! smile

    1-20 21-26

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]