background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Полноэкранное слайдшоу для сайта

Полно-экранное слайд-шоу с помощью JQuery плагина
Просмотров: 1658  Скачан: 175 раз  Комментариев в теме: 0

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

Особенности плагина:

- Слайд-шоу.

- Навигационные стрелки (вправо, влево).

- Дополнительные навигационные кнопки перехода по картинкам.

- Возможность остановить слайд-шоу (поставить на паузу).

- Панель картинок ( раскрывается, закрывается, а так же возможность их листания).

- Возможность управлять с помощью клавиатуры (листание, пауза).

- Автоподгон изображение по 100% ширине.

- Предотвращает обрезание картинки, заблокировав её по 100% высоте.

- Игнорирует минимальную ширину и высоту.

- Определяет загружена страница или нет, потом начинает запускать слайд-шоу.

Шаг 1 - создание разметки

 

HTML

<div id="prevthumb"></div>
<div id="nextthumb"></div>
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
    <div id="thumb-back"></div>
    <div id="thumb-forward"></div>
</div>
<div id="progress-back" class="load-item">
    <div id="progress-bar"></div>
</div>
<div id="controls-wrapper" class="load-item">
    <div id="controls">
        <a id="play-button"><img id="pauseplay" src="images/img/pause.png"/></a>
        <div id="slidecounter">
            <span class="slidenumber"></span> / <span class="totalslides"></span>
        </div>
        <div id="slidecaption"></div>
        <a id="tray-button"><img id="tray-arrow" src="images/img/button-tray-up.png"/></a>
        <ul id="slide-list"></ul>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.js"></script>
<script type="text/javascript" src="js/supersized.shutter.js"></script>
<script type="text/javascript">
    jQuery(function($){
        $.supersized({
            // Functionality
            slideshow               :   1,          // Slideshow on/off
            autoplay                :   1,          // Slideshow starts playing automatically
            start_slide             :   1,          // Start slide (0 is random)
            stop_loop               :   0,          // Pauses slideshow on last slide
            random                  :   0,          // Randomize slide order (Ignores start slide)
            slide_interval          :   3000,       // Length between transitions
            transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed        :   1000,       // Speed of transition
            new_window              :   1,          // Image links open in new window/tab
            pause_hover             :   0,          // Pause slideshow on hover
            keyboard_nav            :   1,          // Keyboard navigation on/off
            performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
            image_protect           :   1,          // Disables image dragging and right click with Javascript   
            // Size & Position   
            min_width               :   0,          // Min width allowed (in pixels)
            min_height              :   0,          // Min height allowed (in pixels)
            vertical_center         :   1,          // Vertically center background
            horizontal_center       :   1,          // Horizontally center background
            fit_always              :   0,             // Image will never exceed browser width or height (Ignores min. dimensions)
            fit_portrait            :   1,          // Portrait images will not exceed browser height
            fit_landscape           :   0,          // Landscape images will not exceed browser width   
            // Components
            slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            thumb_links             :   1,          // Individual thumb links for each slide
            thumbnail_navigation    :   0,          // Thumbnail navigation
            slides                  :   [           // Slideshow Images
                {image : 'images/1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'images/thumb/1.jpg', url : '#'},
                {image : 'images/2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'images/thumb/2.jpg', url : '#'},  
                {image : 'images/3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'images/thumb/3.jpg', url : '#'},
                {image : 'images/4.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'images/thumb/4.jpg', url : '#'},
                {image : 'images/5.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'images/thumb/5.jpg', url : '#'},
                {image : 'images/6.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'images/thumb/6.jpg', url : '#'},
                {image : 'images/7.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'images/thumb/7.jpg', url : '#'},
                {image : 'images/8.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'images/thumb/8.jpg', url : '#'},
                {image : 'images/9.jpg', title : 'Image', thumb : 'images/thumb/9.jpg', url : '#'},
                {image : 'images/10.jpg', title : 'Image', thumb : 'images/thumb/10.jpg', url : '#'}
            ],
            // Theme Options   
            progress_bar            :   1,          // Timer for each slide
            mouse_scrub             :   0
        });
    });   
</script>
Материалы по теме:

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carou...

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......
Интересные публикации:

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

Full галерея на jQueryFull галерея на jQuery

Отличная галерея созданная с помощью Jquery и является одной с лучших полно-экранных галерей. В галерее красиво происходит переход с......

GameleonGameleon

Gameleon – это отличная тема для создания игрового портала. Большой набор функций и гибкие настройки делают её очень удобной в использовании....

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid accordi...

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

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu Kwic...

Стильное горизонтальное меню с выдвижными иконками

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......

ChromeGTChromeGT

Оригинальный html шаблон ChromeGT имеющий 5 цветовых стилей, галерею с миниатюрами, красивый слайдер в трёх видах (изображения, контент, 3D (Flash), с...
  • Текущий 1.43/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.4/5( Голосов 7 )

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

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить