WEB лаборатория DLE » Другое для WEB » jQuery и JavaScript » iView - адаптивный jQuery слайдер
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2


    Последние комментарии
    ...
    HI-tech:
    1

    iView - адаптивный jQuery слайдер

    Автор: Robot_DLElabкатегория: Другое для WEB » jQuery и JavaScriptдата: 25-03-2013, 03:26
    iView - адаптивный jQuery слайдер


    Плагин для создания красивейших слайдеров - iView. Множество настроек, навигация, таймер, API, поддержка touch устройств, вставка видео и адаптивность.

    HTML разметка
    В head подключаем необходимые файлы для работы плагина:
    <link rel="stylesheet" href="iview.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="raphael-min.js" type="text/javascript"></script>
    <script src="jquery.easing.js" type="text/javascript"></script>
    <script src="iview.packed.js" type="text/javascript"></script>

    В тело документа вставьте секцию слайдера (или слайдеров):
    <div id="iview">
        <!-- Slide 1 -->
        <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>
        <!-- Slide 2 -->
        <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"></div>
    </div>
    

    Вы можете добавить Заголовок для каждого слайда. Для этого добавьте div с классом "iview-caption" в div приведенный выше:

        <!-- Slide 1 -->
        <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg">
            <!-- Caption -->
            <div class="iview-caption" data-x="0" data-y="0" data-width="400" data-height="300" data-transition="wipeRight" data-speed="700"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
        </div>
        <!-- Slide 2 -->
        <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg">
            <!-- Caption -->
            <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div>
        </div>
    </div>

    При добавлении html5 атрибута data-attribute к div с классом "iview-caption", вы можете указать эффект, который будет использоваться для Заголовка. Возможные эффекты: "wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade".
    <div class="iview-caption" data-transition="fade">Описание заголовка</div>

    Заголовок может иметь data-transition с параметром "fade", в этом случае он будет показываться с эффектом fade.

    Доступны ещё такие HTML5 атрибуты:

    • data-transition - возможные эффекты перехода: "wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade"

    • data-easing - полный список доступен тут

    • data-speed - скорость переходов мс.

    • data-x - позиция Заголовка по координате X в px.

    • data-y - позиция Заголовка по координате Y в px.

    • data-width - ширина Заголовка в px, если не указана будет использоваться исходная ширина Заголовка.

    • data-height - высота Заголовка в px, если не указана будет использоваться исходная высота Заголовка.



    Видео
    Чтобы использовать в вашем слайдшоу видео, нужно вставить iframe в один из ваших слайдов:
    <div data-iview:image="photos/photo.jpg">
        <!-- Video iFrame -->
        <iframe src="http://player.vimeo.com/video/11475955?byline=1&portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
     
        <!-- Caption -->
        <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div>
    </div>

    Как вы можете заметить, мы задали ширину iframe 100%, таким образом видео будет изменять свой размер в соответствии с размерами слайдшоу.
    И окончательно вам нужно теперь инициализировать плагин, то есть указать к какому селектору его применять:
    <script type="text/javascript">
    $(document).ready(function() {
        $('#slider').iView();
    });
    </script>

    Доступные опции.
    
    <script type="text/javascript">
    $(document).ready(function() {
        $('#slider').iView({
            fx: 'random', // установите эффект, например: 'left-curtain,fade,zigzag-top,strip-left-fade' (достпуные эффекты читайте ниже)
            easing: 'easeOutQuad', // полный список эффектов тут: http://jqueryui.com/demos/effect/easing.html
            strips: 20, // количество полос для их же анимации
            blockCols: 10, // количество колонок для блочной анимации
            blockRows: 5, // количество строк для блочной анимации
            captionSpeed: 500, // скорость эффекта перехода для Заголовка
            captionEasing: 'easeInOutSine', // easing эффект для заголовка
            captionOpacity: 1, // прозрачность заголовка
            animationSpeed: 500, // скорость анимациии слайдов
            pauseTime: 5000, // как доолго будет показываться каждый слайд
            startSlide: 0, // установвка начального слайда (0 index)
            directionNav: true, // навигация Вперед/Назад
            directionNavHoverOpacity: 0.6, // Fade при наведении курсора
            controlNav: true, // 1,2,3,4... цифровая навигация
            controlNavNextPrev: true, // навигация Вперед/Назад
            controlNavHoverOpacity: 0.6, // fade эффект при наведении на наввигацию
            controlNavThumbs: false, // Показывать миниатюры на навигации
            controlNavTooltip: true, // Показывать превьюшки изображений ввиде тултипов
            autoAdvance: true, // Force auto transitions
            keyboardNav: true, // использование стрелок влево / вправо
            touchNav: true, // использование Touch swipe для смены слайдов
            pauseOnHover: false, // остановка слайдшоу при наведении
            nextLabel: "Next", // текст для кнопки "Вперед"
            previousLabel: "Previous", // текст для кнопки "Назад"
            playLabel: "Play", // текст для кнопки "Плей"
            pauseLabel: "Pause", // текст для кнопки "Пауза"
            closeLabel: "Close", // текст для кнопки "Закрыть"
            randomStart: false, //начинать со случайного слайдера
            timer: 'Pie', // Стиль таймера: "Pie", "360Bar" или "Bar"
            timerBg: '#000', // Фон таймера
            timerColor: '#EEE', // цвет таймера
            timerOpacity: 0.5, // прозрачность таймера
            timerDiameter: 30, // диаметр таймера
            timerPadding: 4, // отступ для таймера
            timerStroke: 3, // ширина границы таймера
            timerBarStroke: 1, // ширина границы Bar тамера
            timerBarStrokeColor: '#EEE', // Цвет границы таймера Bar
            timerBarStrokeStyle: 'solid', // Стиль границы таймера Bar
            timerX: 10, // Timer X position threshold
            timerY: 10, // Timer Y position threshold
            tooltipX: 5, // Tooltip X position threshold
            tooltipY: -5, // Tooltip Y position threshold
            onBeforeChange: function(){}, // триггеры до перехода слайдера
            onAfterChange: function(){}, // триггеры после перехода слайдера
            onSlideshowEnd: function(){}, // триггеры после показа всех слайдов
            onLastSlide: function(){}, // триггеры, когда показан последний слайдер
            onAfterLoad: function(){}, // триггер, когда слайдер загружен
            onPause: function(){}, // триггер, когда слайдер на паузе
            onPlay: function(){} // триггер, когда слайдер проигрывается
        });
    });
    </script>
    

    Доступные значения эффектов для опции fx:

    • random

    • strip-down-right

    • strip-down-left

    • strip-up-right

    • strip-up-left

    • strip-up-down

    • strip-up-down-left

    • strip-left-right

    • strip-left-right-down

    • slide-in-right

    • slide-in-left

    • slide-in-up

    • slide-in-down

    • left-curtain

    • right-curtain

    • top-curtain

    • bottom-curtain

    • fade

    • block-random

    • block-fade

    • block-fade-reverse

    • block-expand

    • block-expand-reverse

    • block-expand-random

    • block-drop-random

    • zigzag-top

    • zigzag-bottom

    • zigzag-grow-top

    • zigzag-grow-bottom

    • zigzag-drop-top

    • zigzag-drop-bottom

    • strip-left-fade

    • strip-right-fade

    • strip-top-fade

    • strip-bottom-fade



    HTML5 атрибуты data-
    URL ссылка изображения в слайдере добавляется с помощью html5 атрибута data-. Это позволяет загрузить изображение только тогда, когда слайдшоу обращается к нему (lazy load метод).
    С помощью html5 атрибутов вы можете добавить множество свойств для слайда, чтобы перезаписать общие.
    Например, URL для миниатюр:
    <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>

    или эффект перехода, только для одного слайда:
    <div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top"></div>

    Вы можете установить случайные переходы из множества эффектов:
    <div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top,top-curtain,fade"></div>

    Ниже приведены все доступные атрибуты data-:

    • data-iview:transition - тип перехода: "strip-down-right", "strip-down-left", "strip-up-right", "strip-up-left", "strip-up-down", "strip-up-down-left", "strip-left-right", "strip-left-right-down", "slide-in-right", "slide-in-left", "slide-in-up", "slide-in-down", "left-curtain", "right-curtain", "top-curtain", "bottom-curtain", "fade", "block-random", "block-fade", "block-fade-reverse", "block-expand", "block-expand-reverse", "block-expand-random", "block-drop-random", "zigzag-top", "zigzag-bottom", "zigzag-grow-top", "zigzag-grow-bottom", "zigzag-drop-top", "zigzag-drop-bottom", "strip-left-fade", "strip-right-fade", "strip-top-fade", "strip-bottom-fade"

    • data-iview:easing - полный список easing эффектов тут

    • data-iview:image - URL изображение слайда

    • data-iview:thumbnail - URL миниатюры слайда (если значение опции 'controlNavThumbs' установлено, как true)

    • data-iview:pausetime - Задержка в мс между концом исползуемого эффекта и началом следующего

    • data-iview:type - тип слайда (установите для video, чтобы оптимизировать слайдер для показа видео роликов)



    CSS
    В этом примере мы используем два CSS файла. Один содержит некоторые общие стили, такие как цвета ссылок, размеры шрифтов и т.д. для страницы.

    Другой файл содержит все специфические стили скрипта:
    /* The strips and blocks in the Slider */
    .iview-strip {
        some styles
    }
    .iview-block {
        some styles
    }
     
    /* Direction nav styles (e.g. Next & Prev) */
    .iview-directionNav a {
        some styles
    }
    .iview-prevNav {
        some styles
    }
    .iview-nextNav {
        some styles
    }
     
    /* Control nav styles (e.g. 1,2,3...) */
    .iview-controlNav {
        some styles
    }
    .iview-controlNav a {
        some styles
    }
    .iview-controlNav a img {
        some styles
    }
    .iview-controlNav a.active {
        some styles
    }
     
    /* The captions in the Slider */
    .iview-caption {
        some styles
    }
     
    /* The timer in the Slider */
    #iview-timer {
        some styles
    }
     
    #iview-timer div {
        some styles
    }
     
    /* The Preloader in the Slider */
    #iview-preloader {
        some styles
    }
    #iview-preloader div {
        some styles
    }
     
    /* The video show in the Slider */
    .iview-video-show {
        some styles
    }
    .iview-video-show .iview-video-container {
        some styles
    }
    .iview-video-show .iview-video-container a.iview-video-close {
        some styles
    }
    .iview-video-show .iview-video-container a.iview-video-close:hover {
        some styles
    }
     
     
    /* The tooltip in the Slider */
    #iview-tooltip {
        some styles
    }
     
    #iview-tooltip div.holder {
        some styles
    }
     
    #iview-tooltip div.holder div.container {
        some styles
    }
     
    #iview-tooltip div.holder div.container div {
        some styles
    }
     
    #iview-tooltip div.holder div.container div img {
        some styles
    }

    javascript
    Как сделать Паузу и Плей слайдера?
    $('#slider').trigger('iView:pause'); //Остановка слайдера
    $('#slider').trigger('iView:play'); //Старт слайдера

    Как сменить слайд?
    $('#slider').trigger('iView:goSlide', [2]); //перейти к слайду 2

    Как перейти к следующему или предыдущему слайду?
    $('#slider').trigger('iView:previous'); //перейти к предыдущему слайду
    $('#slider').trigger('iView:next'); //перейти к следующему слайду

    Как установить показ со случайного слайда?
    var total = $('#slider').children().length;
    var rand = Math.floor(Math.random()*total);
    $('#slider').iView({
        startSlide:rand
    });



    Скачать бесплатно

    Теги: css, javascript

    Другие новости по теме:


    Ислам

    • 8 апреля 2013 15:03

    Блиин помогите пожалуйста правильно указать путь до файла в шаблоне, а то не отображаются картинки (((
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.