Скрипты

ultimate-video-downloader-v2-0-скрипт-для-скачивания-видео-из-популярных-социальных-сетей Moko Ultimate Video Download Tool дает вам легкую возможность загружать ваши любимые видео с YouTube, Facebook, Instagram, Twitter, Vimeo, Dailymotion...
tinsta-v1-1-–-платформа-социальных-сетей-для-обмена-фотографиями Tinsta - это веб-платформа для обмена фотографиями в социальных сетях, она позволяет обмениваться фотографиями, видео с вашими подписчиками, такими как...
gostock-v1-3-–-скрипт-фотостока GoStock - Это платформа для обмена фотографиями, пользователи смогут загружать свои фотографии, чтобы поделиться со всем сообществом и посетителями, и...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Слайд шоу с плагином JQuery Flux Slider

Слайд шоу с плагином JQuery Flux Slider

В этом примере вы увидите возможности применения слайдер плагина Flux. Этот плагин использует CSS3 анимацию с разнообразными эффектами переходов как 2D так и 3D. Конечно не все браузеры имеют возможность отображать 3D переходы, это относиться к старым версиям, например Opera12.16 которая была последней на движке Presto. Но все новые браузеры использующие движок WebKit отлично показывают 3D эффекты.

 
 

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Flux Slider</title>
        <link rel="stylesheet" href="/css/main.css" type="text/css" />
        <script src="/js/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/flux.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/main.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="example">
            <h3><a href="#">Flux Slider</a></h3>

            <div id="slider">
                <img src="/data_images/pic1.jpg" alt="" />
                <img src="/data_images/pic2.jpg" alt="" />
                <img src="/data_images/pic3.jpg" alt="" />
                <img src="/data_images/pic4.jpg" alt="" />
                <img src="/data_images/pic5.jpg" alt="" />
                <img src="/data_images/pic6.jpg" alt="" />
                <img src="/data_images/pic7.jpg" alt="" />
                <img src="/data_images/pic8.jpg" alt="" />
                <img src="/data_images/pic9.jpg" alt="" />
                <img src="/data_images/pic10.jpg" alt="" />
            </div>

            <hr />
            <div id="transitions">
                <ul id="trans2D" class="transitions">
                    <li><b>2D Transitions</b></li>
                    <li><a href="#" id="bars">Bars</a></li>
                    <li><a href="#" id="zip">Zip</a></li>
                    <li><a href="#" id="blinds">Blinds</a></li>
                    <li><a href="#" id="blocks">Blocks</a></li>
                    <li><a href="#" id="concentric">Concentric</a></li>
                    <li><a href="#" id="warp">Warp</a></li>
                </ul>
                <ul id="trans3d" class="transitions">
                    <li><b>3D Transitions</b></li>
                    <li><a href="#" id="bars3d">Bars3D</a></li>
                    <li><a href="#" id="cube">Cube</a></li>
                    <li><a href="#" id="tiles3d">Tiles3D</a></li>
                    <li><a href="#" id="blinds3d">Blinds3D</a></li>
                </ul>
                <ul id="controls">
                    <li><b>Controls</b></li>
                    <li><a href="#" id="start">Play</a></li>
                    <li><a href="#" id="stop">Pause</a></li>
                    <li><a href="#" id="next">Next</a></li>
                    <li><a href="#" id="prev">Prev</a></li>
                </ul>
            </div>
            <div id="warn" style="display:none"></div>
        </div>
    </body>
</html>

CSS

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

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

/*customization of slider*/

#slider {
    padding:15px 0;
}
#slider .pagination {
    list-style:none outside none;
    padding:15px !important;
}
#slider .pagination li {
    cursor:pointer;
    display:inline-block;
    margin-left:0;
    background-color:#888;
    border-radius:10px 10px 10px 10px;
    height:8px;
    text-indent:10000px;
    width:8px;
}
#slider .pagination li.current {
    background-color:#000;
}
#transitions {
    overflow:hidden;
}
#transitions ul {
    float:left;
    list-style:none outside none;
    padding:0;
    width:33%;
}
#transitions ul#trans2D {
    text-align:right;
}
#transitions ul li {
    margin:0 10px;
}

#warn {
    font-weight:bold;
    text-align:center;
}

JavaScript

$(function(){
    // если браузер не поддерживает CSS3 анимацию - мы будем показывать сообщение об этом
    if (! flux.browser.supportsTransitions) {
        $('#warn').text('Необходим браузер который поддерживает CSS3 анимацию').show();
    }

    window.mf = new flux.slider('#slider', {
        autoplay: true,
        pagination: true,
        delay: 5000
    });

    // binding onclick events for our transitions
    $('.transitions').bind('click', function(event) {
        event.preventDefault();

        // если браузер не поддерживает 3D эффекты - мы будем показывать сообщение об этом
        if ($(event.target).closest('ul').is('ul#trans3d') && ! flux.browser.supports3d) {
            $('#warn').text("The '"+event.target.innerHTML+"' Необходим браузер который поддерживает 3D эффекты");
            $('#warn').animate({
              opacity: 'show'
            }, 1000, '', function() {
                $(this).animate({opacity: 'hide'}, 1000);
            });
            return;
        }

        // using custom transition effect
        window.mf.next(event.target.id);
    });

    $('#controls').bind('click', function(event) {
        event.preventDefault();

        var command = 'window.mf.'+event.target.id+'();';
        eval(command);
    });
});

С помощью вызова конструктора new flux.slider производим инициализацию, как параметр указываем селектор нашего слайдера (‘#slider’) и параметры autoplay, pagination, delay.



  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

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

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...