Скрипт слайдшоу
Если тебе необходимо организовать на своем сайте слайдшоу, то удиви своих пользователей качественным и красивым слайдером, который в действительности является очень оригинальным и на первый взгляд кажется, что он работает за счет Action Script кода, однако, это не так.
AviaSlider – это красивый и функциональный слайдер картинок, способный добавить к твоему сайту удобную прокрутку изображений, сделать web-страницу более информативной и привлекательной.
Сегодня мир интернета расширяется с каждым днем, сайтов становится все больше, а верхние позиции в различных рейтингах занимают именно те, которые преуспели больше, нашли то, что необходимо пользователю и качественно это предоставили. Если твой сайт похож на тысячи других, то вряд ли он станет узнаваемым и популярным. Используй оригинальные компоненты, стилевые решения, технологии, для того, чтобы быть запоминающимся, ведь твой сайт – отображение части твоей души в web-пространстве.
Сегодня мы предлагаем тебе скачать бесплатно AviaSlider и покажем как задействовать его для своего сайта. Прежде всего выясни установлена ли у тебя на сайте библиотека jQuery. Сделать это очень просто. Зайди на свой сайт и нажми сочетание клавиш на клавиатуре CTRL и U. Ты увидишь исходный код сайта, затем поищи в нем при помощи CRTL и F слово jquery. Если оно есть, то первый пункт можешь пропустить. Если ты не знаешь, как добавить и куда этот код, то стоит поучить html :) Скачай через ftp индексную страницу своего сайта (index.php, index.html) и открой через блокнот или NotePad++.
Затем тебе необходимо провести некоторые действия. Следующий код в зависимости от того есть ли у тебя jquery на сайте или нет, следует размещать в любом месте исходного кода html страницы. Т.е. открой файл (например, index.html) и в него копируй следующие строки. Все эти строки отвечают за вывод конкретных файлов. Конечно же, эти файлы должны быть на твоем хостинге или сервере, скачай слайдер и закинь все файлы в нужные директории, поменяй пути к ним. Посмотри как добавлен слайдер в исходном коде примера из архива (скачай ниже). Т.е. все пути - это пути к файлам. Проверяй их доступность. Еще раз: ты можешь посмотреть исходный код примера (ниже VIEW DEMO), нажав клавиши Crtl+U и увидишь все эти же строки. Если есть вопросы - пиши в комментарии.
1. Подключение jQuery
<script type="text/javascript" src="/jquery00.js"></script>
2. Добавление JS библиотек:
<script type="text/javascript" src="/jquery01.js"></script>
<script type="text/javascript" src="/jquery02.js"></script>
<script type="text/javascript" src="/custom00.js"></script>
3. Добавление стилей:
<link rel="stylesheet" href="/style000.css" type="text/css" media="screen">
<link rel="stylesheet" href="/prettyPh.css" type="text/css" media="screen">
4. Контейнер со слайдером:
<ul class="aviaslider" id="frontpage-slider">
<li><a href="https://f.inverser.pro/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds2.jpg" title=""><img src="https://f.inverser.pro/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds2.jpg" alt="Любой текст :: Который ты только захочешь разместить"></a></li>
<li><a href="https://f.inverser.pro/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds.jpg" title=""><img src="https://f.inverser.pro/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds.jpg" alt=""></a></li>
<li><a href="https://f.inverser.pro/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds3.jpg" title=""><img src="https://f.inverser.pro/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds3.jpg" alt="Двухэтажный пентхаус с винтовой горкой в Нью-Йорке :: Отличный дизайн квартиры, которая расположена в Нью-Йорке, США, является просто кладезем ценных идей"></a></li>
<li><a href="https://f.inverser.pro/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds4.jpg" title=""><img src="https://f.inverser.pro/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds4.jpg" alt=""></a></li>
<li><a href="https://f.inverser.pro/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds5.jpg" title=""><img src="https://f.inverser.pro/img/1/usemind.org_dvuhetajniy_pentgaus_usa_ds5.jpg" alt=""></a></li>
</ul>
<ul class="aviaslider" id="frontpage-slider"> - здесь прописан ID и CLASS, это не стоит изменять. Далее идут обычные ссылки на обычные изображения. Ты можешь указать ALT текст для изображений и тем самым получишь красивый его вывод над изображением.
5. Все, после этих манипуляций все должно работать.
Ты можешь настроить слайдер как угодно. Используй код для того, чтобы указать какой CLASS используется у тебя на сайте:
$('#slider1').aviaSlider();
Также можно передать функции слайдеру:
$('#slider1').aviaSlider({option1:"optionValue", option2:"optionValue", option3:"optionValue"});
blockSize: {height: 'full', width:'full'} // значение по умолчанию
blockSize: {height: 80, width:80}
blockSize: {height: 'full', width:20}
Если ты не хочешь использовать список (ul>li), то укажи это в настройках:
slides:"li"//значение по умолчанию
slides:".featured"
slides:"div"
Повторить показ слайдов:
autorotation: true //значение по умолчанию
autorotation: false
Скорость автопрокрутки:
autorotationSpeed:3 //значение по умолчанию
autorotationSpeed:8
autorotationSpeed:20
Управление показом слайдом (внизу кружочки)
slideControlls: 'items' //значение по умолчанию
slideControlls: 'none'
Добавить кнопки управления к html:
appendControlls:"" //значение по умолчанию (если значение отсутствует, то кнопки добавляются после слайдера)
appendControlls:"body"
appendControlls:"#id-of-choice"
Прокрутка слайдеров значение по времени:
betweenBlockDelay:60 //значение по умолчанию
betweenBlockDelay:30
betweenBlockDelay:200
Тип анимации для изображений:
transition: 'fade' //значение по умолчанию
transition: 'slide'
transition: 'drop'
Тип анимации смены изображений:
display: 'diagonaltop'
display: 'diagonalbottom'
display: 'topleft'//значение по умолчанию
display: 'bottomright'
display: 'random'
display: 'all'
Можно также при выборе значения ALL (т.е. использовать все виды), задействовать удобные для тебя виды смены изображений с указанными параметрами:
transitionOrder: ['diagonaltop', 'diagonalbottom','topleft', 'bottomright', 'random'] //значение по умолчанию transitionOrder: ['random', 'random','topleft'] transitionOrder: ['diagonaltop', 'diagonalbottom','diagonaltop' 'random']
В какую сторону будут меняться изображения:
switchMovement: false //значение по умолчанию
switchMovement: true
Показывать ALT описания изображений или нет:
showText: true //значение по умолчанию
showText: false
Прозрачность фона ALT описаний:
backgroundOpacity:0.8 //значение по умолчанию
backgroundOpacity:1
backgroundOpacity:0.2
Пример использования настроек:
$('#droping-curtain').aviaSlider({
blockSize: {height: 'full', width:40},
display: 'topleft',
transition: 'drop',
betweenBlockDelay:80,
animationSpeed: 800,
switchMovement: true,
slideControlls: 'items',
appendControlls: '.aviaslider'
});
Ты можешь посмотреть DEMO, а также посмотреть исходный код и понять как это все работает, если наше описание не подходит. Обрати внимание на то, что lightbox может НЕ работать в зависимости от определенных версий jQuery, которые используешь ты.
