Плагин для создания красивейших слайдеров - iView. Множество настроек, навигация, таймер, API, поддержка touch устройств, вставка видео и адаптивность.
04.03.2013 1 692
Плагин для создания микро галереи на сайте. Автопоказ, возможность добавления описания для каждого изображения, и режим листания по кругу, т.е. зацикливание.
01.02.2013 1 153
Плагин jQuery.popeye это элегантное и красивое решение для показа галереи изображении не покидая страницы. На странице отображается только одно фото, при наведении появляется возможность пролистать или увеличить все изображения в данном наборе. Плагин прост в установке и настройке и разрабатывался, как альтернатива часто использующихся lightbox2, fancybox или colorbox, которые используют модальные окна.
23.11.2012 7 286
Отличный адаптивный jQuery слайдер - FlexSlider. Включает возможность навигации bullet (точками), позволяет использовать миниатюры вкупе с навигацией, возможность вставки видео в качестве слайда, опция карусели, а также плагин имеет небольшое API.
12.09.2012 4 667
Mobilyslider - простой плагин на jQuery весом всего 5Кб, при этом выглядит минималистично и стильно. Есть несколько дополнительных опции, в числе которых включение/отключение навигации, стрелок вперед/назад, авто слайдшоу, выбор вида перехода и др.
07.06.2012 1 403
Создадим полноэкранное слайдшоу, основная идея которого состоит в том, чтобы порезать текущий открытый слайд при навигации к следующему или предыдущему. Используя jQuery и CSS анимацию, мы можем получить уникальные переходы между слайдами.
09.05.2012 778
Слайдшоу на jQuery с музыкальным сопровождением с помощью кросс платформенной библиотеки jPlayer. Смена слайдов происходит в указанные промежутки музыкальной композиции.
04.05.2012 892
Rhinoslider - довольно гибкий jQuery плагин слайдшоу. Предлагаются не только разнообразные эффекты, но и есть возможность добавления собственных стилей, эффектов и функций к слайдеру. На официальной странице плагина имеется удобный генератор эффектов - генератор - определившись с выбором можно сразу скачать сгенерированный рабочий пример.
03.05.2012 2 061
Плагин слайдшоу базирующийся на jQuery и плагине easing. Добавлена возможность прокрутки слайдов с помощью колесика мышки. На демо страницах представлены различные варианты использования навигации по слайдам.
12.04.2012 1 387
Используя jmpress, сделаем jquery плагин для создания слайдшоу с интересными 3D эффектами для слайдов.
HTML слайд шоу из фотографий легко добавит блеска вашей странице и вы получите внимание как посетителей, так и поисковых систем. Cincopa предлагает вам несколько потрясающих и быстро настраиваемых скинов, которые позволят показать многочисленные фотографии или видео на относительно небольшом пространстве и без использования квоты сервера, благодаря бесплатному хостингу и доставке (пакет которого может быть увеличен за определенную оплату). Вся процедура создания и вставки слайд шоу HTML занимает несколько минут и очень легко завершается, даже если у вас нулевые знания в области программирования.
HTML слайдер из фотографий Cincopa является удивительно эффективным, надежным и привлекательным. Технические требования выполняются автоматически программой для создания слайд шоу, и все, что вам действительно нужно сделать, чтобы создать слайд шоу HTML, просто загрузить высококачественные мультимедийные файлы. Эти файлы могут быть загружены с любого из ваших устройств или из социальных сетей, таких как Facebook или Instagram.
СКИНЫ HTML СЛАЙД ШОУ от Cincopa Как это работает1 Выбери один из наших удивительных скинов
2 Загрузи свои файлы на,облако” Cincopa
3 Получи простой код и вставь на своем сайте
ВЫБЕРИ СКИН HTML СЛАЙД-ШОУВыберите один из слайд-шоу HTML поддерживаемых скинов и настройте такие параметры как панель управления расположений, контроль местоположения, вид Cooliris, перетасование, авто-прогрывание и т.д.; затем, просматрите скин в отдельном окне. Обязательно попробуйте ряд скинов, прежде чем принять решение.
ЗАГРУЗИ МЕДИА ФАЙЛЫВы можете загрузить столько файлов, сколько вы хотите с вашего рабочего стола, портативных устройств или непосредственно из веб-камеры, а также из любого внешнего веб-источника. Организуйте ваши файлы на,облаке” Cincopa; Cincopa позаботиться о преобразование ваших фотографий, изменение размера и других адаптаций. Дизайн HTML слайд-шоу может быть изменен позже из любого вашего устройства.
ВСТАВЬ СГЕНЕРИРОВАННЫЙ КОДПростой пошаговый интерфейс Cincopa предложит вам выбрать способ; это означает, что если вы управляете сайтом на основе HTML вы должны выбрать вариант “слайд-шоу HTML”. Скопируйте строку кода, созданную с помощью приложения и вставьте его в любом месте на вашем сайте.
Зачем пользоваться программой для создания HTML слайд шоу Cincopa?Cincopa предоставляет Вам эксклюзивные, богатые медиа продукции и услуги пакета, которые были разработаны, чтобы ответить на любые возможные требования, которые возможно у вас есть от HTML слайдера для сайта. У программы для создания слайд шоу есть простой пошаговый интерфейс, который проведет вас через процедуру создания и управления, через программное обеспечение высокого класса и через выделенные сервера, которые обеспечивают надежную, плавную и быструю производительность и прогрессивную систему безопасности, гарантирующую что ваши файлы полностью защищены.
Cincopa позволяет делать творческие решения, но освобождает вас от всех технических проблем. Вы можете загружать неограниченное количество файлов практически из любого источника и отображать слайд-шоу HTML в любом количестве сайтов и социальных каналов.
ОСНОВНЫЕ ХАРАКТЕРИСТИКИ СЛАЙД-ШОУ HTML:Вероятно, что вы уже слышали о новом элементе HTML5 canvas . Это специальный элемент, который позволяет создавать и модифицировать графику. К тому же, мы можем использовать его как любой другой элемент на странице - применять анимации jQuery для него, обрабатывать события для него и интегрировать его в шаблон.
Обычно использование элемента canvas ограничивается играми и концептуальными демонстрациями. В данном уроке мы будем использовать его практично - сделаем слайдшоу с отличным эффектом перехода, которое будет работать и в старых браузерах.
С помощью JavaScript сделаем специальный фильтр для каждого изображения в слайдшоу. Мы будем создавать новую версию изображения с более высоким контрастом и более яркими цветам, и сохранять ее в элементе canvas.
Когда пользователь хочет перейти к следующему слайду, элемент canvas выводится на экран с помощью анимации fadeIn , создавая плавный эффект перехода.
HTMLНачнем с создания разметки HTML.
html5-slideshow.htmlСлайд шоу на основе элемента HTML5 сanvas и jQuery | Демонстрация для сайта сайт
Разметка для слайдшоу очень проста. Основной элемент div #slideshow содержит неупорядоченный список и стрелки на следующий и предыдущий слайды. Неупорядоченный список содержит слайды, которые определены как элементы li . На иллюстрации выше показано, что элемент canvas с модифицированным изображением будет вставляться сюда.
В конце включаются jQuery и наш файл script.js , который будет разбираться позже в данном уроке.
CSSВсе стили для слайдшоу содержатся в файле styles.css . Мы используем id основного элемента #slideshow в качестве определения пространства имен, поэтому можно просто добавить данные стили к вашему проекту без риска конфликта имен.
styles.css#slideshow{ background-color:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box-shadow:0 0 22px #111; } #slideshow ul{ height:320px; left:10px; list-style:none outside none; overflow:hidden; position:absolute; top:10px; width:620px; } #slideshow li{ position:absolute; display:none; z-index:10; } #slideshow li:first-child{ display:block; z-index:1000; } #slideshow .slideActive{ z-index:1000; } #slideshow canvas{ display:none; position:absolute; z-index:100; } #slideshow .arrow{ height:86px; width:60px; position:absolute; background:url("img/arrows.png") no-repeat; top:50%; margin-top:-43px; cursor:pointer; z-index:5000; } #slideshow .previous{ background-position:left top;left:0;} #slideshow .previous:hover{ background-position:left bottom;} #slideshow .next{ background-position:right top;right:0;} #slideshow .next:hover{ background-position:right bottom;}
Мы можем разделить наших посетителей, которые будут взаимодействовать со слайдшоу, на три группы:
- Те, у кого отключен JavaScript . Такие пользователи будут видеть только первый слайд, у них не будет возможности переключиться на другие слайды.
- Те, у кого включен JavaScript, но отсутствует поддержка элемента canvas . Для таких посетителей слайды будут переключаться мгновенно без эффекта перехода.
- Те, у кого включена поддержка JavaScript и поддерживается элемент canvas . Эта группа использует последние версии Firefox, Safari, Chrome, Opera. Они будут видеть слайдшоу во всей красе.
Правила разработаны с учетом первых двух групп. С помощью селектора first-child будет выводиться только первый слайд по умолчанию.
Базовый принцип действия слайдшоу мы уже разобрали. Теперь рассмотрим практическую реализацию.
script.js - Часть 1 $(window).load(function(){
// Мы используем событие window.load, поэтому уверены, что
// изображения слайдшоу загружены без ошибок.
// Проверяем, поддерживает ли текущий браузер элемент canvas:
var supportCanvas = "getContext" in document.createElement("canvas");
// Манипуляции с элементом canvas создают интенсивную нагрузку на процессор,
// поэтому мы используем setTimeout, чтобы сделать работу асинхронной и улучшить
// время отклика страницы
var slides = $("#slideshow li"),
current = 0,
slideshow = {width:0,height:0};
setTimeout(function(){
window.console && window.console.time && console.time("Сгенерировано за:");
if(supportCanvas){
$("#slideshow img").each(function(){
if(!slideshow.width){
// Получаем размеры первого изображения:
slideshow.width = this.width;
slideshow.height = this.height;
}
// Выводим модифицированную версию изображения
createCanvasOverlay(this);
});
}
window.console && window.console.timeEnd && console.timeEnd("Сгенерировано за:");
$("#slideshow .arrow").click(function(){
var li = slides.eq(current),
canvas = li.find("canvas"),
nextIndex = 0;
// В зависимости от того, какая стрелка была нажата,
// вычисляем индекс следующего слайда
if($(this).hasClass("next")){
nextIndex = current >= slides.length-1 ? 0: current+1;
}
else {
nextIndex = current
