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

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

ОБСУЖДЕНИЕ

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

Полно-экранное слайд-шоу с помощью JQuery плагина
Просмотров: 1779  Скачан: 186 раз  Комментариев в теме: 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, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

Стильный мульти слайдер с красивым эффектом, отлично подойдёт для интернет магазина, несомненно идея при создании этого слайдера, была взята в Aplle.....

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

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

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jqu...

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

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

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

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......
Интересные публикации:

Design StudioDesign Studio

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

Paris ClarkParis Clark

Красивый html шаблон Paris Clark, на главной странице используется привлекательный слайдер, имеется портфолио, контактная форма......

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

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

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

Full Page Image GalleryFull Page Image Gallery

Красивая галерея для вашего сайта на css и JQuery, если вам нужна красивая галерея и вам хочется, что-то необычное......

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню на cs...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Контактная форма (дизайн)Контактная форма (дизайн)

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

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

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

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


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