Coin Slider - jQuery плагин для изображений с уникальными эффектами перехода
Установка
1. В секцию HEAD страницы подключаем файлы стилей и скрипты
Code
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
не забудьте прописать корректные пути до файлов.
2. Собственно, html-код самого слайдера следующий:
Code
<div id="gamesHolder">
<div id="games">
<a href="http://www.minininjas.com/" target="_blank">
<img src="mini_nin.jpg" alt="Mini Ninjas" />
<span>
<b>Mini Ninjas</b>
Your quest to defeat the Evil Samurai Warlord has begun. Control the powers of nature, possess creatures, use your
furious Ninja skills to free your Ninja friends.
</span>
</a>
<a href="http://www.princeofpersiagame.com/" target="_blank">
<img src="prince_o.jpg" alt="Price of Persia" />
</a>
<a href="http://spidermandimensions.marvel.com/" target="_blank">
<img src="spiderma.jpg" alt="Spiderman: Shattered Dimensions" />
</a>
<a href="http://brinkthegame.com/" target="_blank">
<img src="brink000.jpg" alt="Brink" />
</a>
<a href="http://www.godofwar.com/" target="_blank" >
<img src="god_of_w.jpg" alt="God of War III" />
</a>
<a href="http://www.borderlandsthegame.com/" target="_blank">
<img src="borderla.jpg" alt="Borderlands" />
<span>
<b>Borderlands</b>
Fun combat and a steady flow of rewards make this journey a massively enjoyable one, especially with some fellow mercenaries along for the ride.
</span>
</a>
<a href="http://www.swtor.com/" target="_blank">
<img src="star_war.jpg" alt="Star Wars: The Old Republic" />
</a>
<a href="http://www.batmanarkhamasylum.com/" target="_blank">
<img src="batman_a.jpg" alt="Batman: Arkham Asylum" />
</a>
</div>
здесь также не забываем проверять корректность путей до файлов изображений.
На демо-странице слайдер центрирован, для этого код слайдера был дополнительно заключен в блок div с идентификатором page
Code
<div id="page">
<div id="gamesHolder">
<div id="games">
<a href="http://www.minininjas.com/" target="_blank">
<img src="http://ps-studio.info/WEBPRACTIC/55/mini_nin.jpg" alt="Mini Ninjas" />
<span>
<b>Mini Ninjas</b>
Your quest to defeat the Evil Samurai Warlord has begun. Control the powers of nature, possess creatures, use your
furious Ninja skills to free your Ninja friends.
</span>
</a>
<a href="http://www.princeofpersiagame.com/" target="_blank">
<img src="http://ps-studio.info/WEBPRACTIC/55/prince_o.jpg" alt="Price of Persia" />
</a>
<a href="http://spidermandimensions.marvel.com/" target="_blank">
<img src="http://ps-studio.info/WEBPRACTIC/55/spiderma.jpg" alt="Spiderman: Shattered Dimensions" />
</a>
<a href="http://brinkthegame.com/" target="_blank">
<img src="http://ps-studio.info/WEBPRACTIC/55/brink000.jpg" alt="Brink" />
</a>
<a href="http://www.godofwar.com/" target="_blank" >
<img src="http://ps-studio.info/WEBPRACTIC/55/god_of_w.jpg" alt="God of War III" />
</a>
<a href="http://www.borderlandsthegame.com/" target="_blank">
<img src="http://ps-studio.info/WEBPRACTIC/55/borderla.jpg" alt="Borderlands" />
<span>
<b>Borderlands</b>
Fun combat and a steady flow of rewards make this journey a massively enjoyable one, especially with some fellow mercenaries along for the ride.
</span>
</a>
<a href="http://www.swtor.com/" target="_blank">
<img src="http://ps-studio.info/WEBPRACTIC/55/star_war.jpg" alt="Star Wars: The Old Republic" />
</a>
<a href="http://www.batmanarkhamasylum.com/" target="_blank">
<img src="http://ps-studio.info/WEBPRACTIC/55/batman_a.jpg" alt="Batman: Arkham Asylum" />
</a>
</div>
</div>
</div>
4. Ну и в заключение в самом низу кода добавим еще один скрипт
Code
<script>$(document).ready(function() {
$('#games').coinslider({ hoverPause: false });
});
</script>
5. Как вы видимо успели заметить, на демо-странице не ко всем изображениям добавлено описание (описание добавляется к 1-му и 6-му изображениям), чтобы добавить описание для каждого изображения, нужно их все оформить аналогично первому:
Code
<a href="ДЕСЬ АДРЕС ВЕБ-СТРАНИЦЫ" target="_blank">
<img src="ПУТЬ К ФАЙЛУ ИЗОБРАЖЕНИЯ" alt="Описание изображения" />
<span>
<b>Заголовок описания</b>
А здесь будет текст описания изображения, выводимый в его нижней части
</span>
</a>
6. Основные опции
Code
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 // пауза при наведении
Всего комментариев: 0
Оставь комментарий первым!
Оставь комментарий первым!
