Слайд-шоу для сайта

...

Очень часто задают вопрос: "Как сделать слайд-шоу для сайта". И сложно ли это?

Отвечу сразу, для этого есть разные программы. Но мы сейчас займемся одной из них. Она очень проста в понимании, несложна в исполнении, а эффект изумителен!

Вот как это будет выглядеть в итоге:

Итак, что нам для этого нужно.

  1. Создать новую папку script, в которую закачиваем архив. Там его и распаковываем.
  2. На самой странице, где будет располагаться наше слайд-шоу, между тегами <head>...</head> вставляем следующие строчки, где указан путь к скриптам и небольшой javascript, определяющий параметры слайд-шоу:
    <script src="scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'fade'
    });
    });
    </script>
    <style type="text/css">
    .slideshow {
    width: 500px;
    height: 185px;
    margin: auto;
    }
    </style>
    width:500px и height:185px - соответственно ширина и высота нашего слайд-шоу, она равна размерам наших картинок, которые должны, естественно быть одного размера.
  3. Осталось загрузить наши изображения.
    <div align="center" class="slideshow" >
    <img src="i_01.jpg" alt="" width="500" height="250" />
    <img src="i_02.jpg" alt="" width="500" height="250" />
    <img src="i_03.jpg" alt="" width="500" height="250" />
    <img src="i_04.jpg" alt="" width="500" height="250" />
    </div>

Вот и все!

Настройка параметров слайд-шоу Slides

В созданном слайд-шоу можно устанавливать разные виды переходов между кадрами, изменяя javascript, размещенный в заголовке страницы. Кроме того, заменив в скрипте строчку sync:false на sync:true, можно убирать пробел при смене изображений. Приведу несколько распространенных вариантов слайд-шоу и соответствующие им скрипты, которые следует вставить в заголовок страницы.

1. Растворение (наш пример):
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' //вид перехода
});
});
</script>
2. Перетасовывание:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'shuffle',
sync: false,
delay: -2000 //задержка
});
});
</script>
3. Зум:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'zoom',
sync: false,
delay: -2000
});
});
</script>
4. Переворот по оси X или Y:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'curtainX', // для поворота по оси Y - curtainY
sync: false,
delay: -2000
});
});
</script>
5. Сворачивание по вертикали:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'turnDown', // направление можно задать turnUp, turnLeft, turnRight
sync: true,
delay: -4000
});
});
</script>
6. Скроллинг (смещение):
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx:'scrollDown', // направление смещения можно задать scrollUp, scrollLeft, scrollRight
sync: true,
delay: -2000
});
});
</script>
7. Наплыв справа:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'cover',
speed: 1000, //скорость
timeout: 3000 //задержка
});
});
</script>

Иногда нужно разместить несколько вариантов слайд-шоу на одной странице сайта, как это сделано в данной статье. Для этого надо просто указывать разные классы для каждого варианта в строчке $('.slideshow').cycle({ (смотрите код в таблице выше), и не забудьте прописать в CSS размеры окна для каждого класса.