RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Rotator на css и jQueryRotator на css и jQuery

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

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью J...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....
Интересные публикации:

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

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

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MySQL

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....
  • Текущий 1.38/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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