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

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

ОБСУЖДЕНИЕ

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

Полно-экранное слайд-шоу с помощью JQuery плагина
Просмотров: 2051  Скачан: 202 раз  Комментариев в теме: 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>
Материалы по теме:

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изо...

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Таблица тарифных плановТаблица тарифных планов

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

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

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

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

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....
Интересные публикации:

MCUBE SolutionsMCUBE Solutions

HTML шаблон MCUBE Solutions хорошо подойдёт для сайта в сфере бизнеса, в шаблоне используется flash слайдер, который......

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Free MusicFree Music

Отличный html шаблон музыкального портала, сделанный по современным стандартам, в шаблоне уже встроенный проигрыватель аудио и видео файлов......

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......
  • Текущий 1.38/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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