Слайдер работающий на 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> Скачать архивы слайдеров и баннеров | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
