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

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

ОБСУЖДЕНИЕ

Видео слайдер для сайта

Видео слайдер для сайта
Просмотров: 1761  Скачан: 189 раз  Комментариев в теме: 0

Вашему вниманю представлен отличный видео слайдер для сайта, чем же этот слайдер отличается от себе подобных спросите вы, да все очень просто, благодаря плагину AnythingSlider вы можете свободно использовать текст, изображение, видео (YouTube, Vimeo, HTML5 Video), при этом можно все и сразу, на этом возможности его не заканчиваются, слайдер адаптирован под все браузеры, также в слайдере имеются навигационные стрелки (вправо, влево) правда замечен небольшой баг, при воспроизведении видео с (YouTube, Vimeo), видео немножко налазит на стрелки, но этот баг ни чуть не портит превосходный вид слайдера и легко решается в стилях, так же в сладере предусмотрено слайд-шоу и дополнительная навигационная панель (располагаться она в нижнем правом углу слайдера).

Нельзя не отметить, наверное ещё некоторые особенности этого слайдера: это возможность поместить любое содержимое в слайдер, зацикленный показ, возможность использовать несколько слайдеров на одной странице, пауза при наведение в слайд-шоу.

Видео можно подгружать с таких источников как:

- YouTube: iframe

- YouTube: Embedded

- Vimeo: iframe

- Vimeo: Embeded

- HTML5 Video

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

 

HTML

<div id="page-wrap">
    <ul id="slider1">
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li class="panel5">
            <div>
                <div class="textSlide">
                    <span class="rightside_text">
                        <img src="images/3.jpg" />
                    </span>
                    <h3>Other Information</h3>
                    <br>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.</li>
                        <li>Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.</li>
                        <li>Morbi a magna eu ligula scelerisque lobortis vel non nisi.</li>
                        <li>Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.</li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="panel5">
            <div>
                <div class="textSlide">
                    <span class="rightside">
                        <object width="400" height="300">
                            <param name="allowFullScreen" value="true"/>
                            <param name="allowscriptaccess" value="always"/>
                            <param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1"/>
                            <embed src="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300"></embed>
                        </object>
                    </span>
                    <h3>Other Information</h3>
                    <br>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.</li>
                        <li>Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.</li>
                        <li>Morbi a magna eu ligula scelerisque lobortis vel non nisi.</li>
                        <li>Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.</li>
                    </ul>
                </div>
            </div>
        </li>
        <li><iframe width="640" height="360" src="http://www.youtube.com/embed/ZJPcLB4n1f8?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></li>
        <li>
            <object width="640" height="360">
                <param name="movie" value="http://www.youtube.com/v/M7FIvfx5J10?hl=ru_RU&version=3"/>
                <param name="allowFullScreen" value="true"/>
                <param name="allowscriptaccess" value="always"/>
                <embed src="http://www.youtube.com/v/M7FIvfx5J10?hl=ru_RU&version=3" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed>
            </object>
        </li>
        <li><iframe src="http://player.vimeo.com/video/18011143?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe></li>
        <li>
            <object width="750" height="550">
                <param name="allowfullscreen" value="true" />
                <param name="allowscriptaccess" value="always" />
                <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12280336&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0" />
                <embed src="http://vimeo.com/moogaloop.swf?clip_id=12280336&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="750" height="550"></embed>
            </object>
        </li>
        <li>
            <video width="700" height="400" controls="controls">
                <source src="video/movie.ogg" type="video/ogg">
                <source src="video/movie.mp4" type="video/mp4">
                <source src="video/movie.webm" type="video/webm">
            </video>
        </li>
    </ul> 
</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.1.3.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.jatt.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.video.js"></script>
<script type="text/javascript">
    $(function(){
        $('#slider1').anythingSlider({
            theme           : 'metallic',
            easing          : 'easeOutCubic',
            navigationFormatter : function(index, panel){
                return ['IMAGES', 'IMAGES', 'IMAGES and TEXT', 'VIDEO and TEXT', 'VIDEO YouTube: iframe', 'VIDEO YouTube: embed', 'VIDEO Vimeo: iframe', 'VIDEO Vimeo: embed', 'VIDEO and HTML5'][index - 1];
            },
            onSlideComplete : function(slider){
            }
        });
        $.jatt();
    });
</script>

Таблица совместимости видео с браузерами.

Видео слайдер для сайта

Обозначение:

FF - Firefox 3+ - все отлично работает.

C - Chrome - в некоторых случаях игнорирует попытку JavaScript получить доступ к структуре с URL.

S - Safari 4+ - замечены не критичные проблемы с HTML5.

O - Opera 9+ - замечены некоторые проблемы с iframe ( YouTube).

IE10 Internet Explorer 10 - все отлично работает.

IE9 Internet Explorer 9 - все отлично работает.

IE8 Internet Explorer 8 - не поддерживает HTML5.

IE7 Internet Explorer 7 - не поддерживает HTML5 и iframe.

 

Ниже представлен список анимации перехода Easing, которые вы можете использовать в этом плагине. Для смены анимации найдите в открытом выше скрипте строку easing, рядом будет стоять значение (по умолчанию там стоит easeOutCubic), замените это значение любым из списка, в последствии слайдер будет использовать анимацию перехода, которую вы укажите.

easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
Материалы по теме:

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

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

Круговой слайдерКруговой слайдер css3

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

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

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

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

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

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

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

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

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

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

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

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

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

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

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

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

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

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......
  • Текущий 1.29/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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