Создание слайдшоу на JavaScript и несколько особенностей анимации

Владимир | | HTML, JavaScript, Web разработка.

jquery_panel_gallery

Приветствую всех!

На днях я экспериментировал с плагином jQuery Panel Gallery и хочу поделиться впечатлениями, а заодно рассказать, как с ним работать. Кроме того, использование подобных плагинов имеет некоторые особенности, которые касаются не их самих, а JavaScript анимации вообще.

Итак, начнем с плагина.

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

Как это выглядит можно посмотреть на демонстрационной страничке.

Demo

И, конечно, вы можете скачать архив с примером.

Source

Использовать плагин не сложно. Просто подключаете файлы со скриптами, размещаете на странице несколько картинок и вызываете метод panelGallery плагина. И все, слайдшоу работает.

Выглядит это примерно так

    <div id="myimages" style="position:relative">
        <img src="images/1w.jpg" alt="картинка" width="390px" height="290px" />
        <img src="images/2w.jpg" alt="картинка" width="390px" height="290px" />
......
    </div>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.panelgallery-1_2.js"></script>
<script type="text/javascript">
$(function() {
    $('#myimages').panelGallery({
        sections:5
        ,sectionTransitionDelay:500
    });
});
</script>

Правда есть несколько нюансов, о которых нужно помнить.

1) Картинки должны находиться внутри блока с позиционированием. Т.е. для этого блока должно быть установлено CSS правило position:relative или position:absolute или position:fixed.

2) Вы можете использовать картинки разного размера, но атрибуты width и height должны быть одинаковыми, т.е. браузер подгонит их под заданный размер. На мой взгляд лучше заранее подготовить картинки одинакового размера.

3) Нормально работать плагин начнет только после того, как все картинки будут загружены, поэтому если вы решите сделать слайдшоу из сотни-другой картинок, то посетителю придется немного подождать 🙂

4) Плагин имеет довольно много настроек, с помощью которых можно контролировать анимацию. Их перечень в конце этой статьи.

Теперь самое главное – анимация, а точнее нагрузка на систему.

К сожалению, на сегодняшний день поддержка JavaScript в браузерах далека от идеала. Т.е. пока вы используете несложные функции, которые выполняются только при определенных действиях посетителя – все отлично.

Но если этот код будет работать постоянно (как в случае этого плагина), то нагрузка резко возрастает.

Этот плагин не исключение. Во время смены картинок нагрузка на процессор достигает 20-30%.

Причем она может быть и больше. Уменьшите задержки между запуском анимации, увеличьте количество сегментов, поднимите скорость и, думаю, вы легко возьмете планку в 40-50% 😉

В общем, глядя на эти цифры, возникает острое желание поискать какое-нибудь решение на Flash или Silverlight 🙂

А вы как думаете?

P.S. Настройки плагина.

sections – количество блоков, на которые разбивается изображение (по-умолчанию 3).

imageTransitionDelay – пауза (в мс) перед началом показа следующего изображения (по-умолчанию 3000).

startDelay – пауза перед запуском первой анимации (по-умолчанию 2000).

sectionTransitionDelay – задержка между показами секций изображения (по-умолчанию 700мс).

overlap – позволяет начать анимацию следующей секции до того как закончится анимация предыдущей. Задается как доля от значения параметра sectionTransitionDelay (изменяется от 0 до 1). Например, если sectionTransitionDelay:1000, а overlap:0.5, то следующая секция начнет появляться через 500мс после предыдущей.

enablePause – если равен 1, то анимация будет остановлена при наведении курсора на картинку.

repeat – если равен true, то картинки будут повторяться по кругу.

direction – направление переходов. “lr” (слева направо), “rl” (справа налево), “tb” (сверху вниз), and “bt” (снизу вверх) (по-умолчанию: “lr”).

Постовой

В каждом случае ведение бухучета ООО требует индивидуального подхода

  • А я сегодня экспериментировал с LightBox / SlimBox (в последнем сообшении у меня находится результат). Классная штука, хорошо, что кто-то уже библиотеки написал 🙂

    • Это точно, без библиотек было бы тяжело 🙂

  • А я сегодня экспериментировал с LightBox / SlimBox (в последнем сообшении у меня находится результат). Классная штука, хорошо, что кто-то уже библиотеки написал 🙂

    • Это точно, без библиотек было бы тяжело 🙂

  • немного подтормаживает, но это скорее проблема моего канала, thx за пример )

    • Подтормаживать может в начале, при загрузке картинок (5 шт. по 45 кБ), потом анимация должна нормально работать.

      • be3

        Видимо не следует грузить фотки сразу, достаточно 2 штук, а остальные подгружать при начале показа предыдущей +)

        • Кстати, вариант. Можно по срабатыванию таймера вставлять картинку и переинициализировать плагин. Только вот как все это выглядеть будет? Подозреваю, что страничка будет немного дергаться 🙂

  • немного подтормаживает, но это скорее проблема моего канала, thx за пример )

    • Подтормаживать может в начале, при загрузке картинок (5 шт. по 45 кБ), потом анимация должна нормально работать.

      • be3

        Видимо не следует грузить фотки сразу, достаточно 2 штук, а остальные подгружать при начале показа предыдущей +)

        • Кстати, вариант. Можно по срабатыванию таймера вставлять картинку и переинициализировать плагин. Только вот как все это выглядеть будет? Подозреваю, что страничка будет немного дергаться 🙂

  • Очень гибкий и удобный плагин!

  • Очень гибкий и удобный плагин!

  • juri

    В опере 10 если на картинки навести мышкой то анимация останавливается… или это только у меня?

    • Так и должно быть. И не только в опере, а во всех браузерах. Изменить это поведение можно с помощью параметра enablePause.

  • juri

    В опере 10 если на картинки навести мышкой то анимация останавливается… или это только у меня?

    • Так и должно быть. И не только в опере, а во всех браузерах. Изменить это поведение можно с помощью параметра enablePause.

  • Плагин вполне можно использовать в рекламных целях, если баннерокрутилки нет )

    • Если только сами баннеры не анимированные (и не flash) 🙂

  • Плагин вполне можно использовать в рекламных целях, если баннерокрутилки нет )

    • Если только сами баннеры не анимированные (и не flash) 🙂

  • Flash представляет проблему для использующих Linux. Flash под Linux-ом жрет огромное количество ресурсов. Конечно, десктопный Linux — 1-2%, но об этом стоит знать, когда «возникает острое желание»

  • Flash представляет проблему для использующих Linux. Flash под Linux-ом жрет огромное количество ресурсов. Конечно, десктопный Linux — 1-2%, но об этом стоит знать, когда «возникает острое желание»

  • Информация очень ценная. Думаю многие Вам спасибо скажут.

  • Информация очень ценная. Думаю многие Вам спасибо скажут.

  • mymotomir.ru

    Классная вещь!!!

  • mymotomir.ru

    Классная вещь!!!