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

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

ОБСУЖДЕНИЕ

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

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

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

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

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

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде с...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

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

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

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

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

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

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

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

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

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с помощ...

Красивое горизонтальное меню, используется изображения и анимация текста....

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Pack кнопок #2 на CSS3Pack кнопок #2 на CSS3

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...
  • Текущий 1.38/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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