Плагин zAccordion - слайдер для Ucoz - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Как узнать погоду за окном?
Всего ответов: 1890
Статистика


Онлайн всего: 2
Гостей: 1
Пользователей: 1

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Фотоальбом

Плагин zAccordion - слайдер для Ucoz

Хочешь сказать спасибо? Кликни на рекламный баннер.

17.03.2012, 16:44
Простой плагин zAccordion - слайдер изображений. Замечательно впишется в любой дизайн сайта.
Пример 1
Каждый слайд имеет размеры 600х270 пикселей. Мы установили ширину аккордеона до 960 пикселей и ширину слайда до 600 пикселей. Размер вкладки будет вычислен автоматически.
Code
<script type="text/javascript">
$(document).ready(function() {
  $("#example1").zAccordion({
  timeout: 4000,
  slideWidth: 600,
  width: 960,
  height: 270
  });
});
</script>

Пример 2
Тут опять каждый слайд имеет размеры 600х270 пикселей. Ширину аккордеона установили до 780px, а ширину таба 150px. Размер слайдов будет рассчитан автоматически. При загрузке отображается слайд с номером 1 (слайды нумеруем так 0, 1 и 2), то есть средний. Аккордеон не имеет автовоспроизведения. Смена слайдов происходит по наведению курсора мыши.
Code
<script type="text/javascript">
$(document).ready(function() {
  $("#example2").zAccordion({
  startingSlide: 1,
  auto: false,
  speed: 100,
  tabWidth: 150,
  width: 780,
  height: 270
  });
});
</script>

Пример 3
Ну и наверно самый практичный пример. Каждый слайд имеет свой собственный класс и свое фоновое изображение. Тут мы поместили внутри каждого слайда текст, который показывается только тогда, когда слайд активен. И ниже javascript и CSS код:
Code
<script type="text/javascript">
$(document).ready(function() {
  var accordion = $("#example3").zAccordion({
  slideWidth: 600,
  width: 900,
  height: 270,
  timeout: 3000,
  slideClass: "frame",
  slideOpenClass: "frame-open",
  slideClosedClass: "frame-closed",
  easing: "easeOutCirc"
  });
  $("#thumbs .thumb-0").click(function(){
  accordion.start();
  return false;
  });
  $("#thumbs .thumb-1").click(function(){
  accordion.click(0);
  return false;
  });
  $("#thumbs .thumb-2").click(function(){
  accordion.click(1);
  return false;
  });
  $("#thumbs .thumb-3").click(function(){
  accordion.click(2);
  return false;
  });
  $("#thumbs .thumb-4").click(function(){
  accordion.click(3);
  return false;
  });
  $("#thumbs .thumb-5").click(function(){
  accordion.stop();
  return false;
  });
});
</script>

Это в Css :
Code
#example3 ul {list-style:none;}
#example3 h3 {color:#fff;text-transform:uppercase;font-size:24px;}
#example3 p {color:#fff;}
#example3 .frame-1 {background:url(images/1.jpg) top left repeat;}
#example3 .frame-2 {background:url(images/2.jpg) top left repeat;}
#example3 .frame-3 {background:url(images/3.jpg) top left repeat;}
#example3 .frame-4 {background:url(images/4.jpg) top left repeat;}
#example3 .frame-content {width:360px;padding:100px 120px;}
#example3 .frame-closed .frame-content {display:none;}
#example3 .frame-open .frame-content {display:block;}
#thumbs a {border: 1px solid; padding: 4px;}

Копирование данной статьи без активной ссылки на сайт http://megascripts.ru запрещено!





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

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 6523 | Загрузок: 502 | Комментарии: 14 | Рейтинг: 3.8/12
Теги: слайдер zAccordion, слайдер для Ucoz, слайдер для фотоальбома, скрипт, Плагин zAccordion
Всего комментариев: 12
Сообщение №9 от Алексей Анатольевич
Добавлен: 07.07.2013

Олег, а он может сам картинки обрезать на нужный размер или надо специально искать 600х270?
Сообщение №10 от Олег
Добавлен: 07.07.2013

Не знаю, пробуйте smile сами.
Сообщение №11 от Алексей Анатольевич
Добавлен: 07.07.2013

А как можно время увеличить, слишком быстро перематывает не успевает народ текст читать
Сообщение №12 от Олег
Добавлен: 07.07.2013

<script type="text/javascript">
$(document).ready(function() {
$("#example1").zAccordion({
timeout: 4000,
slideWidth: 600,
width: 960,
height: 270
});
});
</script>

timeout: 4000 - Меняйте цифры и будет Вам счастье smile
Сообщение №7 от Алексей Анатольевич
Добавлен: 07.07.2013

Еще вопрос: Можно только 4 картинки вставлять?
Сообщение №8 от Олег
Добавлен: 07.07.2013

Не пробовал больше 4 картинок, попробуйте поставить.
Сообщение №6 от Алексей Анатольевич
Добавлен: 07.07.2013

Может я скрипт не туда вставил?
Сообщение №1 от Алексей Анатольевич
Добавлен: 05.07.2013

$(document).ready(function() {
$("#example1").zAccordion({
timeout: 4000,
slideWidth: 600,
width: 960,
height: 270
});
});

Куда это вставлять подскажите пожалуйста?
Сообщение №2 от Олег
Добавлен: 05.07.2013

В body
<script type="text/javascript">
$(document).ready(function() {
$("#example1").zAccordion({
timeout: 4000,
slideWidth: 600,
width: 960,
height: 270
});
});
</script>
Сообщение №3 от Алексей Анатольевич
Добавлен: 07.07.2013

В Какой путь Олег Верхнюю часть сайта или куда подскажи пожалуйста!!!
Сообщение №4 от Олег
Добавлен: 07.07.2013

Вставьте туда, куда Вам нужно :

<script type="text/javascript">
$(document).ready(function() {
$("#example1").zAccordion({
timeout: 4000,
slideWidth: 600,
width: 960,
height: 270
});
});
</script>

<ul id="example1">
<li>
<img src="ССЫЛКА НА КАРТИНКУ 1.jpg" width="600" height="270" alt="" />
</li>
<li>
<img src="ССЫЛКА НА КАРТИНКУ 2.jpg" width="600" height="270" alt="" />
</li>
<li>
<img src="ССЫЛКА НА КАРТИНКУ 3.jpg" width="600" height="270" alt="" />
</li>
<li>
<img src="ССЫЛКА НА КАРТИНКУ 4.jpg" width="600" height="270" alt="" />
</li>
</ul>

И всё у вас будет работать.
Сообщение №5 от Алексей Анатольевич
Добавлен: 07.07.2013

Олег, вставил в верхнюю часть сайта <script type="text/javascript">
$(document).ready(function() {
$("#example1").zAccordion({
timeout: 4000,
slideWidth: 600,
width: 960,
height: 270
});
});
</script> В самый низ. Затем после скрипта в самый низ добавил: <ul id="example1">
<li>
<img src="ССЫЛКА НА КАРТИНКУ 1.jpg" width="600" height="270" alt="" />
</li>
<li>
<img src="ССЫЛКА НА КАРТИНКУ 2.jpg" width="600" height="270" alt="" />
</li>
<li>
<img src="ССЫЛКА НА КАРТИНКУ 3.jpg" width="600" height="270" alt="" />
</li>
<li>
<img src="ССЫЛКА НА КАРТИНКУ 4.jpg" width="600" height="270" alt="" />
</li>
</ul>
Указал ссылки на картинки, скачал архив и вставил js в файловый менеджер. Картинки просто выстроелись в ряд и все никаких слайдов нет.
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Глаз у страуса больше, чем его мозг.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта