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

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

ОБСУЖДЕНИЕ

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

Видео слайдер для сайта
Просмотров: 2301  Скачан: 225 раз  Комментариев в теме: 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
Материалы по теме:

Скроллер картинокСкроллер картинок

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

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

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

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

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

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

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

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

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

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

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid ac...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....
Интересные публикации:

Sooshal v2.4Sooshal v2.4

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

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

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

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

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

Web HostingWeb Hosting

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

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

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

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

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

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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