Приветствую Вас Прохожий | RSS Понедельник, 05.12.2016, 15:30
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 23
Гостей: 23
Пользователей: 0



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Слайдер показывает зум

Слайдер показывает зум Слайдер, показывает, зум
Очень интересный слайдер, который объединил в себе аж три функции: перелистывание изображений, зум эффект при на ведении курсора мышки и увеличение по клику
Слайдер показывает зум
Установка:
После /head на нужных страницах вставляйте:
Code
<link rel="stylesheet" type="text/css" href="/css/style.css" />  
<link rel="stylesheet" type="text/css" href="/css/cloud-zoom.css" />  
<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox-1.3.4.css" />

Следующий код в то место, где будет сам слайдер:

Code
<div id="content" class="content">  
<div class="item">  
  <div class="thumb_wrapper">  
  <div class="thumb">  
  <ul>  
  <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Formstack 1"/></a></li>  
  <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Formstack 2"/></a></li>  
  <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Formstack 3"/></a></li>  
  </ul>  
  </div>  
  <a class="prev" href="#"></a>  
  <a class="next" href="#"></a>  
   
  </div>  
   
  </div>  
</div>

Следующий код в самый низ после тега /body:

Code
<script type="text/javascript" src="/js/jquery.easing-1.3.pack.js"></script>  
  <script type="text/javascript" src="/js/jquery.fancybox-1.3.4.js"></script>  
  <script type="text/javascript" src="/js/cloud-zoom.1.0.2.js"></script>  
  <script type="text/javascript">  
  $(function() {
  /*
  fancybox init on each cloud-zoom element
  */
  $("#content .cloud-zoom").fancybox({
  'transitionIn' : 'elastic',
  'transitionOut' : 'none',
  'speedIn' : 600,
  'speedOut' : 200,
  'overlayShow' : true,
  'overlayColor' : '#000',
  'cyclic' : true,
  'easingIn' : 'easeInOutExpo'
  });
   
  /*
  because the cloud zoom plugin draws a mousetrap
  div on top of the image, the fancybox click needs
  to be changed. What we do here is to trigger the click
  the fancybox expects, when we click the mousetrap div.
  We know the mousetrap div is inserted after
  the <a> we want to click:
  */
  $("#content .mousetrap").live('click',function(){
  $(this).prev().trigger('click');
  });
   
  /*
  the content element;
  each list item / group with several images
  */
  var $content = $('#content'),
  $thumb_list = $content.find('.thumb > ul');
  /*
  we need to set the width of each ul (sum of the children width);
  we are also defining the click events on the right and left arrows
  of each item.
  */
  $thumb_list.each(function(){
  var $this_list = $(this),
  total_w = 0,
  loaded = 0,
  //preload all the images first
  $images = $this_list.find('img'),
  total_images= $images.length;
  $images.each(function(){
  var $img = $(this);
  $('<img/>').load(function(){
  ++loaded;
  if (loaded == total_images){
  $this_list.data('current',0).children().each(function(){
  total_w += $(this).width();
  });
  $this_list.css('width', total_w + 'px');
   
  //next / prev events
   
  $this_list.parent()
  .siblings('.next')
  .bind('click',function(e){
  var current = $this_list.data('current');
  if(current == $this_list.children().length -1) return false;
  var next = ++current,
  ml = -next * $this_list.children(':first').width();
   
  $this_list.data('current',next)
  .stop()
  .animate({
  'marginLeft' : ml + 'px'
  },400);
  e.preventDefault();
  })
  .end()
  .siblings('.prev')
  .bind('click',function(e){
  var current = $this_list.data('current');
  if(current == 0) return false;
  var prev = --current,
  ml = -prev * $this_list.children(':first').width();
   
  $this_list.data('current',prev)
  .stop()
  .animate({
  'marginLeft' : ml + 'px'
  },400);
  e.preventDefault();
  });
  }
  }).attr('src',$img.attr('src'));
  });
  });
  });
  </script>

Открытый скрипт можно поместить в js файл для экономии места

Осталось лишь залить три скрипта из прикреплённого архива в папку js, три стиля в папку css и все картинки в папку images

Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 0,019 Мб
Просмотров: 2845 | Рейтинг: 4.0/3 | |Категория: Скрипты Разное | Добавил: мир | Дата: 02.04.2011 | Скачали: 2 | Теги: показывает, слайдер
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 0

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

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru