Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Angle View - плагин просмотра изображений 360º на основе jQuery

Дата добавления: 23.01.2021 - 18:41
Добавил: Buger
Количество просмотров: 59
Количество комментариев: 0
Размер файла: 328.2 Kb
Рейтинг материала: 0.0 / 0
Angle View - плагин просмотра изображений 360º на основе jQuery
БЕСПЛАТНО
рейтинг 0.0
/
голосов 0
Angle View - это плагин просмотра изображений 360º на основе jQuery, используемая для поворота списка изображений продуктов, которые меняются под разными углами при перемещении или перетаскивании мыши.
Демонстрация плагина в архиве (example.html)

Как использовать плагин Angle View:


1. Подключите и добавьте библиотеку jQuery JavaScript и файлы плагина jQuery Angle View в html-код страницы.
Код
<link rel="stylesheet" href="angle.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.angle.js"></script>

2. Добавьте в средство просмотра изображений, последовательность изображений продуктов под разными углами.
Код
<div class="angle-view" id="angle-view-demo">
  <ul>
  <li><img src="1.jpg" alt="01" /></li>
  <li><img src="2.jpg" alt="02" /></li>
  <li><img src="3.jpg" alt="03" /></li>
  <li><img src="4.jpg" alt="04" /></li>
  ...
  </ul>
</div>

3. CSS для стилизации средства просмотра изображений.
Код
.angle-view {
  overflow: hidden;
  width: 600px;
  margin: 10px auto;
  border: 5px solid #CECECE;
}

.angle-view ul, #angle-view li {
  margin: 0;
  padding: 0;
}

.angle-view li { list-style: none; }

.angle-view ul {
  width: 600px;
  height: 330px;
}

.angle-view img {
  width: 90%;
  display: block;
  margin: 18px auto;
}

4. Вызовите функцию, чтобы активировать плагин просмотра изображений.
Код
$('#angle-view-demo').angle();

5. Параметры и значения по умолчанию.
Код
$('#angle-view-demo').angle({

  // скорость вращения
  speed: 2,

  // включить перетаскивание мышью
  drag: false,

  // селектор предыдущей кнопки
  previous: '',

  // селектор для следующей кнопки
  next: '',

  // текущее изображение
  current: 0,

  // объект массива js
  get_image: function() {},

  // callback
  after: function() {}
   
});
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: