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

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

ОБСУЖДЕНИЕ

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

Видео слайдер для сайта
Просмотров: 2501  Скачан: 239 раз  Комментариев в теме: 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 и jqueryСлайдер на css3 и jquery

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

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

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

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carou...

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

css3 слайдерcss3 слайдер

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

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

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

Rotator на css и jQueryRotator на css и jQuery

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

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......

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

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

AirlinesAirlines

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

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

FolderFolder

Универсальный html шаблон Folder, на главной странице располагается слайдер с миниатюрами и комментариями к изображению, есть галерея......
  • Текущий 1.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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