Главная » Файлы » Прочие скрипты » jQuery

Слайдер изображений на jQuery для uCoz
22.06.14, 19:52:37

Скачать файл






Установка:

Все необходимые файлы для правильной работы скрипта в архиве. Всё, что находится в папке залить в файловый менеджер (Не меняя структуры).

Далее в head на страницах, где будет отображаться слайдер вставьте:
Код
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />  
  <script type="text/javascript" src="/js/scripts.js"></script>  
<script type="text/javascript">  
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];  
</script>


Css и скрипт можете переписать под себя (Если хватает знаний)

В то место, где будет располагаться сам слайдер, вставьте:
Код
<div class="wrap">
  <div id="slide-holder">
  <div id="slide-runner">
  <a href=""><img id="slide-img-1" src="/images/nature-photo.png" class="slide" alt="" /></a>
  <a href=""><img id="slide-img-2" src="/images/nature-photo1.png" class="slide" alt="" /></a>
  <a href=""><img id="slide-img-3" src="/images/nature-photo2.png" class="slide" alt="" /></a>
  <a href=""><img id="slide-img-4" src="/images/nature-photo3.png" class="slide" alt="" /></a>
  <a href=""><img id="slide-img-5" src="/images/nature-photo4.png" class="slide" alt="" /></a>
  <a href=""><img id="slide-img-6" src="/images/nature-photo4.png" class="slide" alt="" /></a>
  <a href=""><img id="slide-img-7" src="/images/nature-photo6.png" class="slide" alt="" /></a>
  <div id="slide-controls">
  <p id="slide-client" class="text"><strong>post: </strong><span></span></p>
  <p id="slide-desc" class="text"></p>
  <p id="slide-nav"></p>
  </div>
  </div>
  </div>
  </div>


Всё. Слайдер сложноват в настройке для неопытных пользователей, однако, я думаю, что с уровнем знаний выше среднего можно адаптировать данный скрипт и для Фотоальбома smile
Категория: jQuery | Добавил: Apocalypse | Теги: изображений, ucoz, на, JQuery, для, слайдер
Просмотров: 420 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: