» »

Слайдер работающий на jQuery для uCoz


Слайдер работающий на jQuery для uCoz

Приветствую всех. Почему доброй ночи? Спросите вы ! Да потому что у меня ночь и я не могу уснуть, но в этом есть и плюс так как я нашёл и настроил под сайты uCoz отличные слайдеры. Слайдеры будут предоставлены в семи вариантах и все уже готовы к установки на ваш сайт, вам нужно будет только установить и поменять изображения или видео под свои нужды. Слайдер iView может поддерживать и работать не только с изображениями но и с видео. В общем эти слайдеры красивые и хорошо работают что и нужно для сайтов.

Установка не трудная, нужно будет проделать всего три работы по их установки и слайдер который вы выберите будет стоять на вашем сайте. 
Установка слайдеров на ваш сайт

Для начала установки слайдера который вам нужен я предлагаю скачать нужный вам архив в самом низу под кодами слайдеров. Я подписал все архивы для того что бы вам было удобно и вы не запутались! И так после того как вы скачаете нужный архив вам нужно распаковать его и все что есть папки в архиве загрузить в файловый менеджер вашего сайта. Далее приступайте к установке кодов и скриптов слайдера.

Для установки нужного слайдера вам нужно скопировать HTML код и вставить в нужное вам место на сайте. Далее скопируйте javascript и CSS стили слайдера и вставьте их в нижнюю или в верхнюю часть сайта, но для более лучшей работы я рекомендую вставлять их на страницах модулей перед тегом /body.

Ниже я указал и подписал коды каждого слайдера!

Первый слайдер

HTML код

Код
<div class="container">
  <div id="iview">
  <div data-iview:image="photos/photo1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
  <div class="iview-caption caption1" data-x="80" data-y="200">iView<sup>™</sup></div>
  <div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">Самый удивительный слайдер</div>
  <div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft"><i>Представляет <b>Hemn Chawroka</b></i></div>
  </div>

  <div data-iview:image="photos/photo2.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="3000">
  <div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown">Заголовки могут быть расположены в любом месте</div>
  <div class="iview-caption caption6" data-x="300" data-y="350" data-transition="wipeUp"><a href="#">Пример URL ссылки</a></div>
  </div>

  <div data-iview:image="photos/video.jpg" data-iview:type="video" data-iview:transition="strip-right-fade,strip-left-fade">
  <iframe src="http://player.vimeo.com/video/11475955?byline=1&portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  <div class="iview-caption caption2" data-x="450" data-y="340" data-transition="wipeRight">Видео</div>
  <div class="iview-caption caption3" data-x="600" data-y="345" data-transition="wipeLeft">Поддержка</div>
  </div>

  <div data-iview:image="photos/photo3.jpg">
  <div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade">Опции iView:</div>
  <div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic">Листание пальцем на сенсорных устройствах</div>
  <div class="iview-caption blackcaption" data-x="50" data-y="172" data-transition="wipeLeft" data-easing="easeInOutElastic">Масштабируемость изображений</div>
  <div class="iview-caption blackcaption" data-x="50" data-y="209" data-transition="wipeLeft" data-easing="easeInOutElastic">Пользовательские эффекты перехода</div>
  <div class="iview-caption blackcaption" data-x="50" data-y="246" data-transition="wipeLeft" data-easing="easeInOutElastic">Свободное позиционирование и стилизация заголовков</div>
  <div class="iview-caption blackcaption" data-x="50" data-y="283" data-transition="wipeLeft" data-easing="easeInOutElastic">Кроссбраузерность</div>
  </div>

  <div data-iview:image="photos/photo4.jpg">
  <div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight"><h3>Адаптивный заголовок</h3>Это продукт, который <b><i>все вы ждали</b></i>!<br><br>Простое пользовательское оформление слайдера. Каждый слайд можно сопровождать заголовком.<br><br>И всё это работает во всех браузерах (включая IE6 / 7 / 8) и на iOS и Android устройствах!</div>
  </div>

  <div data-iview:image="photos/photo5.jpg">
  <div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft">Чего ждете?</div>
  <div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight">Вперёд!</div>
  </div>
  </div>
  </div>


javascript и CSS стили

Код
<link rel="stylesheet" href="/css/iview.css" />
<link rel="stylesheet" href="/css/skin1/style.css" />
<script type="text/javascript" src="/js/raphael-min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.js"></script>
<script src="/js/iview.js"></script>
  <script>
  $(document).ready(function(){
  $('#iview').iView({
  pauseTime: 7000,
  directionNav: false,
  controlNav: true,
  tooltipY: -15
  });
  });
  </script>


Второй слайдер

HTML код

Код
<div class="container">
  <div id="iview">
  <div data-iview:image="photos/photo6.jpg">
  <div class="iview-caption caption1" data-x="300" data-y="300" data-transition="expandLeft">Прост в настройке и поставляется с пользовательским API</div>
  </div>

  <div data-iview:image="photos/photo7.jpg">
  <div class="iview-caption video-caption" data-x="50" data-y="50" data-transition="wipeUp"><iframe src="http://player.vimeo.com/video/11475955?byline=1&portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
  <div class="iview-caption caption4" data-x="600" data-y="140" data-transition="wipeRight">Видео</div>
  <div class="iview-caption caption5" data-x="740" data-y="145" data-transition="wipeLeft">Поддержка</div>
  <div class="iview-caption caption3" data-x="600" data-y="200" data-width="235" data-height="40" data-transition="wipeLeft">Можно добавить видео с <b>Vimeo</b> и <b>Youtube</b> к <b>Слайдам</b> и <b>Заголовкам</b></div>
  </div>

  <div data-iview:image="photos/photo8.jpg">
  <div class="iview-caption caption2" data-x="300" data-y="300" data-transition="wipeRight">Опция авто-скрытия элементов управления</div>
  </div>

  <div data-iview:image="photos/photo9.jpg">
  <div class="iview-caption" data-x="100" data-y="300" data-transition="wipeLeft">Кроссбраузерный слайдер для ваших изображений и видео</div>
  </div>

  <div data-iview:image="photos/photo10.jpg">
  <div class="iview-caption caption3" data-x="100" data-y="300" data-transition="wipeLeft">Анимация заголовков с помощью эффектов перехода</div>
  </div>
  </div>
  </div>


javascript и CSS стили

Код
<link rel="stylesheet" href="/css/iview.css" />
<link rel="stylesheet" href="/css/skin2/style.css" />
<script type="text/javascript" src="/js/raphael-min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.js"></script>
<script src="/js/iview.js"></script>
  <script>
  $(document).ready(function(){
  $('#iview').iView({
  pauseTime: 7000,
  pauseOnHover: true,
  directionNav: true,
  directionNavHide: false,
  directionNavHoverOpacity: 0,
  controlNav: false,
  nextLabel: "Вперед",
  previousLabel: "Назад",
  playLabel: "Плей",
  pauseLabel: "Пауза",
  timer: "360Bar",
  timerPadding: 3,
  timerColor: "#0F0"
  });
  $('#iview2').iView({
  pauseTime: 7000,
  pauseOnHover: true,
  directionNav: true,
  directionNavHide: false,
  controlNav: true,
  controlNavNextPrev: false,
  controlNavTooltip: false,
  nextLabel: "Следующий",
  previousLabel: "Предыдущий",
  playLabel: "Играть",
  pauseLabel: "Пауза",
  timer: "360Bar",
  timerBg: "#EEE",
  timerColor: "#000",
  timerDiameter: 40,
  timerPadding: 4,
  timerStroke: 8,
  timerPosition: "bottom-right"
  });
  });
  </script>


Третий слайдер

HTML код

Код
<div class="container">
  <div id="iview2">
  <div data-iview:image="photos/photo11.jpg">
  <div class="iview-caption caption1" data-x="100" data-y="300" data-transition="fade">Слайдер поразит ваших пользователей</div>
  </div>

  <div data-iview:image="photos/photo12.jpg">
  <div class="iview-caption caption2" data-x="50" data-y="320" data-transition="wipeRight">Поддержка анимации заголовков, видео и iframe, а также мульти использование</div>
  </div>

  <div data-iview:image="photos/photo13.jpg">
  <div class="iview-caption caption3" data-x="350" data-y="300" data-transition="wipeLeft">Великолепная анимация таймеров смены слайдов</div>
  </div>

  <div data-iview:image="photos/photo14.jpg"></div>
  </div>
  </div>


javascript и CSS стили

Код
<link rel="stylesheet" href="/css/iview.css" />
<link rel="stylesheet" href="/css/skin2/style.css" />
<script type="text/javascript" src="/js/raphael-min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.js"></script>
<script src="/js/iview.js"></script>
  <script>
  $(document).ready(function(){
  $('#iview').iView({
  pauseTime: 7000,
  pauseOnHover: true,
  directionNav: true,
  directionNavHide: false,
  directionNavHoverOpacity: 0,
  controlNav: false,
  nextLabel: "Вперед",
  previousLabel: "Назад",
  playLabel: "Плей",
  pauseLabel: "Пауза",
  timer: "360Bar",
  timerPadding: 3,
  timerColor: "#0F0"
  });
  $('#iview2').iView({
  pauseTime: 7000,
  pauseOnHover: true,
  directionNav: true,
  directionNavHide: false,
  controlNav: true,
  controlNavNextPrev: false,
  controlNavTooltip: false,
  nextLabel: "Следующий",
  previousLabel: "Предыдущий",
  playLabel: "Играть",
  pauseLabel: "Пауза",
  timer: "360Bar",
  timerBg: "#EEE",
  timerColor: "#000",
  timerDiameter: 40,
  timerPadding: 4,
  timerStroke: 8,
  timerPosition: "bottom-right"
  });
  });
  </script>


Четвёртый слайдер

HTML код

Код
<div class="container">
  <div id="iview">
  <div data-iview:thumbnail="photos/photo11_thumb.jpg" data-iview:image="photos/photo11.jpg">
  <div class="iview-caption caption1" data-x="100" data-y="300" data-transition="expandDown">Потрясающий jQuery слайдер</div>
  </div>

  <div data-iview:thumbnail="photos/photo12_thumb.jpg" data-iview:image="photos/photo12.jpg" data-iview:transition="block-drop-random" data-iview:pausetime="2000">
  <div class="iview-caption caption2" data-x="50" data-y="320" data-transition="expandRight">Поддержка анимированных заголовков, видео и изображений</div>
  </div>

  <div data-iview:thumbnail="photos/photo13_thumb.jpg" data-iview:image="photos/photo13.jpg">
  <div class="iview-caption caption3" data-x="350" data-y="300" data-transition="expandLeft">Кроссбраузерность</div>
  </div>

  <div data-iview:thumbnail="photos/photo14_thumb.jpg" data-iview:image="photos/photo14.jpg"></div>
  </div>
  </div>
  <br><br><center><b>API :</b> <a href="#" onClick="$('#iview').trigger('iView:pause'); return false;">Пауза</a> - <a href="#" onClick="$('#iview').trigger('iView:play'); return false;">Плей</a> - <a href="#" onClick="$('#iview').trigger('iView:goSlide', [2]); return false;">Перейти к слайду 3</a> - <a href="#" onClick="$('#iview').trigger('iView:previous'); return false;">Назад</a> - <a href="#" onClick="$('#iview').trigger('iView:next'); return false;">Вперед</a></center>


javascript и CSS стили

Код
<link rel="stylesheet" href="/css/iview.css" />
<link rel="stylesheet" href="/css/skin3/style.css" />
<script type="text/javascript" src="/js/raphael-min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.js"></script>
<script src="/js/iview.js"></script>
  <script>
  $(document).ready(function(){
  $('#iview').iView({
  pauseTime: 7000,
  pauseOnHover: true,
  directionNav: false,
  directionNavHide: false,
  controlNav: true,
  controlNavNextPrev: false,
  controlNavThumbs: true,
  timer: "Bar",
  timerDiameter: 120,
  timerPadding: 3,
  timerStroke: 4,
  timerBarStroke: 0,
  timerColor: "#0F0",
  timerPosition: "bottom-right",
  timerX: 15,
  timerY: 60
  });
  });
  </script>


Пятый слайдер

HTML код

Код
<div class="container">
  <div id="iview">
  <div data-iview:thumbnail="photos/photo11_thumb.jpg" data-iview:image="photos/photo11.jpg">
  <div class="iview-caption caption1" data-x="100" data-y="300" data-transition="expandDown">Один из красивейших слайдеров на jQuery</div>
  </div>

  <div data-iview:thumbnail="photos/photo12_thumb.jpg" data-iview:image="photos/photo12.jpg" data-iview:transition="block-drop-random" data-iview:pausetime="2000">
  <div class="iview-caption caption2" data-x="50" data-y="320" data-transition="expandRight">Поддержка нескольких слайдеров на странице</div>
  </div>

  <div data-iview:thumbnail="photos/photo13_thumb.jpg" data-iview:image="photos/photo13.jpg">
  <div class="iview-caption caption3" data-x="350" data-y="300" data-transition="expandLeft">Настраиваемость</div>
  </div>

  <div data-iview:thumbnail="photos/photo14_thumb.jpg" data-iview:image="photos/photo14.jpg"></div>
  </div>
  </div>


javascript и CSS стили

Код
<link rel="stylesheet" href="/css/iview.css" />
<link rel="stylesheet" href="/css/skin4/style.css" />
<script type="text/javascript" src="/js/raphael-min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.js"></script>
<script src="/js/iview.js"></script>
  <script>
  $(document).ready(function(){
  $('#iview').iView({
  pauseTime: 7000,
  pauseOnHover: true,
  directionNavHoverOpacity: 0,
  timer: "Bar",
  timerDiameter: "50%",
  timerPadding: 0,
  timerStroke: 7,
  timerBarStroke: 0,
  timerColor: "#FFF",
  timerPosition: "bottom-right"
  });
  });
  </script>


Первый Баннер

HTML код

Код
<div class="container">
  <div id="iview" class="iview">
  <div data-iview:image="photos/728x90_1.jpg"></div>
  <div data-iview:image="photos/728x90_2.jpg"></div>
  <div data-iview:image="photos/728x90_3.jpg"></div>
  </div>
   
</div>


javascript и CSS стили

Код
<link rel="stylesheet" href="/css/iview.css" />
<link rel="stylesheet" href="/css/skin5/style.css" />
<script type="text/javascript" src="/js/raphael-min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.js"></script>
<script src="/js/iview.js"></script>
  <script>
  $(document).ready(function(){
  $('#iview').iView({
  strips: 20,
  blockCols: 20,
  blockRows: 3,
  pauseTime: 7000,
  pauseOnHover: true,
  directionNavHoverOpacity: 0,
  timer: "Bar",
  timerDiameter: 120,
  timerPadding: 3,
  timerStroke: 4,
  timerBarStroke: 0,
  timerColor: "#0F0",
  timerPosition: "bottom-right"
  });
  $('#iview2').iView({
  pauseTime: 5000,
  pauseOnHover: true,
  directionNavHoverOpacity: 0,
  controlNav: true,
  controlNavNextPrev: false,
  controlNavTooltip: false,
  timer: "360Bar",
  timerDiameter: 30,
  timerPadding: 3,
  timerStroke: 4,
  timerBarStroke: 0,
  timerColor: "#0F0",
  timerPosition: "top-right"
  });
  });
  </script>


Второй Баннер

HTML код

Код
<div class="container">
<div id="iview2" class="iview">
  <div data-iview:image="photos/300x600_1.jpg"></div>
  <div data-iview:image="photos/300x600_2.jpg"></div>
  <div data-iview:image="photos/300x600_3.jpg"></div>
  </div>
  </div>


javascript и CSS стили

Код
<link rel="stylesheet" href="/css/iview.css" />
<link rel="stylesheet" href="/css/skin5/style.css" />
<script type="text/javascript" src="/js/raphael-min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.js"></script>
<script src="/js/iview.js"></script>
  <script>
  $(document).ready(function(){
  $('#iview').iView({
  strips: 20,
  blockCols: 20,
  blockRows: 3,
  pauseTime: 7000,
  pauseOnHover: true,
  directionNavHoverOpacity: 0,
  timer: "Bar",
  timerDiameter: 120,
  timerPadding: 3,
  timerStroke: 4,
  timerBarStroke: 0,
  timerColor: "#0F0",
  timerPosition: "bottom-right"
  });
  $('#iview2').iView({
  pauseTime: 5000,
  pauseOnHover: true,
  directionNavHoverOpacity: 0,
  controlNav: true,
  controlNavNextPrev: false,
  controlNavTooltip: false,
  timer: "360Bar",
  timerDiameter: 30,
  timerPadding: 3,
  timerStroke: 4,
  timerBarStroke: 0,
  timerColor: "#0F0",
  timerPosition: "top-right"
  });
  });
  </script>


Скачать архивы слайдеров и баннеров







28.09.2015 Просмотров: 758 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
FeStemBer
FeStemBer 28.09.2015 22:341
0
Во сколько много сразу представили, и где только вы их находите. Ведь на uCoz слайдеры очень редко применяют, если верстка не идет с ним.
kos
kos 28.09.2015 23:192
0
скрипт отличный
Kosten
Kosten 29.09.2015 01:013
0
Но а что мелочиться, на выбор и возможно есть тот слайдер, который нужен.
AnTron
AnTron 29.09.2015 04:334
0
Слайдер на сайте, это дело и красиво и мобильно искать самую важную информацию. Но есть свое но, и оно заключается, это его вес и он всегда весит много, любой взять. Но во первых сам код и потом изображение в одном скрипте несколько. Но все равно, как уже сказано, красиво смотрится.
DALMATIN
DALMATIN 29.09.2015 05:065
0
Это только малая часть слайдеров и когда Kosten перекинет с другого сайта сюда все то будет больше!
Я беру их с других CMS и настраиваю для сайтов uCoz уж очень много чего интересного можно найти то что пойдёт на uCoz но
Цитата
Во сколько много сразу представили, и где только вы их находите.

почему то их не делают.
avatar