Среда, 11 июля 2012 00:00

Эффектный Coin Slider на jQuery

Оцените материал
(1 Голосовать)

Продолжаем украшать сайт... вашему вниманию - эффектный Coin Slider, построенный на jQuery.

 

 

Features:

  • Free to use under MIT licence
  • Compatible with Android and iPhone
  • Unique transition effects
  • Valid markup
  • Flexible configuration
  • Auto slide
  • Navigation box
  • Lightweight (8kb only)
  • Linking images
  • Fully customizable using CSS

Что означает MIT license - объяснять здесь не будем; если попросту и очень коротко - это означает для нас с вами, что слайдер бесплатен и исходники его мы можем без проблем скачать с сайта разработчика, welcome... ну, или здесь.

 

Разработка сайтов

 

Установка слайдера замечательно несложна: вам придется лишь самостоятельно скачать jquery, загрузить js и css (это архив, распаковать не забудьте, ссылка выше); все это укладываем в спецом созданный каталог и кидаем куда-нибудь в корень сайта.

Ок, теперь самое интересное. Для многочисленных неутомимых джумловодов порядок действий проблем, думаю, не вызовет совершенно: создаем новый mod_custom, в который вписываем следующие строчки кода:

Прежде всего, подключаем скачанные js и стили:

 

<script type="text/javascript" src="/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/coin-slider.min.js"></script>
<link rel="stylesheet" href="/coin-slider-styles.css" type="text/css" />

 

Теперь - картинки (которые в приведенном примере расположены, как видите, в каталоге coin-slider:

 

<div id='coin-slider'>
<a href="/img01_url" target="_blank">
<img src='coin-slider/01.jpg' >
<span>
Описание изображения №1
</span>
</a>
<a href="/imgN_url">
<img src='coin-slider/02.jpg' >
<span>
Описание изображения №2
</span>
</a>
<a href="/imgN_url">
<img src='coin-slider/03.jpg' >
<span>
Описание изображения №3
</span>
</a>
<a href="/imgN_url">
<img src='coin-slider/04.jpg' >
<span>
Описание изображения №4
</span>
</a>
</div>

 

И, наконец, инициализация плагина:

 

<script type="text/javascript">
jQuery(function() {
$('#coin-slider').coinslider({ width: 600, height: 450 });
});
</script>

 

Стало быть, так; все три фрагмента кода можно тупо поочередно скопировать в mod_custom, один за другим, не забыв лишь изменить прописанные пути таким образом, чтобы они действительно указывали на ваши картинки и скрипты. В самых последних строчках я указал, как видите, размеры окна слайдера; также не поленитесь указать свои.

В принципе, все; работать уже должно. Для продвинутого сайтовладельца предусмотрен немалый ряд параметров инициализации:

  • width: 565, // ширина слайдера
  • height: 290, // высота слайдера
  • spw: 7, // количество разбиений по ширине
  • sph: 5, // количество разбиений по высоте
  • delay: 3000, // задержка между сменой слайдов
  • sDelay: 30, // задержка анимации затухания
  • opacity: 0.7, // прозрачность описания и кнопок навигации
  • titleSpeed: 500, // скорость появления описания
  • effect: '', // эффекты random, swirl, rain, straight
  • navigation: true, // наличие на слайдере кнопок вперед и назад
  • links : true, // делать изображения как ссылки
  • hoverPause: true, // останавливать автоматическое слайдшоу при наведении на слайдер

B еще - целая куча подробностей/примеров на сайте разработчика Coin Slider. Настройки слайдера впечатляют, при желании вы сумеете полностью подогнать его внешний вид под свои задачи. Enjoy!

Последнее изменениеСуббота, 10 сентября 2016 20:17

Оставить комментарий

Добавьте ваш комментарий

SEO-оптимизация. SEO-услуги

All sorts of things

Заказать сайт

Веб-разработка. Заказать сайт

Вы можете заказать сайт-визитку, блог, корпоративный сайт, интернет-магазин или коммерческий web-портал.