Lecaw

Учимся создавать Web-сайты

Fresco - jQuery lightbox

November 1, 2012 1158hits

Fresco - красивый адаптивный jQuery lightbox. Он может использоваться, чтобы создать ошеломляющие оверлейные программы, которые отлично работают на любых размерах экрана, во всех браузерах, на всех устройствах.

Исходные файлы ДЕМО

 

Чтобы сделать элементы еще более красивыми, Fresco имеет функции полноэкранного режима, поддержку ретина-дисплеев, интеграцию с YouTube и Vimeo для HTML5 видео и имеет мощный API Javascript.

Установка jQuery lightbox

Сначала удостоверьтесь что в самом начале вашего документа присутствует строка doctype:

<!DOCTYPE html>

Подключите jQuery 1.4.4 или выше в заголовке документа. Рекомендуем использовать последнюю версию 1.8.x для оптимальной производительности и работы с Google CDN.

Скачайте Fresco и переместите скачанные файлы на свой сервер. Подключите fresco.js в том месте, где подключали jQuery. Также необходимо подключить файл fresco.css и удостоверьтесь, что указали верный путь с расположением данных файлов.

Также нужно подключить YouTube API Iframe для того чтобы воспроизводить YouTube видео в HD качестве.

<!--  jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <!-- Для IE8 и ниже, добавим поддержку CSS3 MediaQuery -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]--> <!-- Youtube Iframe API  -->
<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script> <!-- Fresco -->
<script type="text/javascript" src="/js/fresco/fresco.js"></script>
<link rel="stylesheet" type="text/css" href="/css/fresco/fresco.css"/>

Вот и все! Теперь плагин готов к работе.

Использование

Самый простой способ использовать jQuery lightbox это - добавить класс fresco к ссылке.

<a href="#" class="fresco">Show image</a>

Другой способ использования с API Javascript. См. ниже раздел с API.

Fresco.show('image.jpg');

Заголовок может быть добавлен при помощи атрибута data-fresco-caption:

<a href="#" 
class="fresco"
data-fresco-caption="Caption below the image">Caption</a>

Опции

Дополнительные опции и обратные вызовы могут быть добавлены, используя атрибут data-fresco-options.

<a  href="#" 
class="fresco"
data-fresco-caption="Caption on top of the image"
data-fresco-options="ui: 'inside'">Caption on top</a>

Группы

Создавайте группы, давая ссылкам класс data-fresco-group. У каждой группы должно быть уникальное имя. Группы могут содержать несколько типов контента, изображения могут быть смешаны с YouTube видео, например:

<a  href="#" 
class="fresco"
data-fresco-group="mixed">Image</a>
<a href="#"
class="fresco"
data-fresco-group="mixed">Youtube</a>

Если у ссылок в группе имеются одинаковые опции, то можно применить атрибут data-fresco-group-options. Набор опций на этом атрибуте будет использоваться всей группой:

<a href="#" 
class="fresco"
data-fresco-group="shared_options"
data-fresco-group-options="ui: 'inside'">This group</a>
<a href="#"
class="fresco"
data-fresco-group="shared_options">has shared</a>
<a href="#"
class="fresco"
data-fresco-group="shared_options">options</a>

Пользовательский интерфейс

Есть два типа настроек пользовательского интерфейса: внутренний и внешний. Значение по умолчанию – внешний, он поместит элементы пользовательского интерфейса за пределы окна.

data-fresco-group-options="ui: 'outside'"

Второй тип, помещает элементы в окне:

data-fresco-group-options="ui: 'inside'"

Масштабирование jQuery lightbox

Данная опция может использоваться для того, чтобы создать эффект изменения масштаба. Адаптация по умолчанию установлена в обоих типах, которая изменяет размеры изображения, чтобы соответствовать размерам экрана. При помощи только ширины или высоты, можно настроить изображение до нужного размера.

При помощи ширины, можно создать хороший эффект изменения масштаба с overflow вдоль оси y:

<a  href="#" 
class="fresco"
data-fresco-options="fit: 'width'">Zoom - Fitted width</a>

Использование значение none, полностью отключит изменение размеров, сохраняя изображение в его первоначальном размере. Это пригодится для полноэкранного изменения масштаба в сочетании с набором ui к внутренней части.

<a  href="#" 
class="fresco"
data-fresco-options="fit: 'none', ui: 'inside'">Zoom - No fit, UI inside</a>

Миниатюры

Миниатюры включены по умолчанию и автоматически сгенерированы для YouTube видео и изображений. Они могут также быть отключены, устанавливая опцию thumbnail в значение false:

data-fresco-group-options="thumbnails:false"

Используйте опцию thumbnail на отдельных элементах, чтобы установить свою миниатюру:

data-fresco-options="thumbnail: 'image.jpg'"

Для всех элементов в группе нужно чтобы был включен набор миниатюры. Тип vimeo не поддерживает миниатюры, они должны быть установлены, используя опцию thumbnail.

Типы медиа файлов

Fresco jQuery lightbox автоматически определяет тип фалов, используя указанный URL. Тип может также быть установлен в одно из следующих значений, используя атрибут data-fresco-type: image, YouTube или vimeo.

Изображение

Изображения не нуждаются в автоматическом определении типа, оно нуждается только в случаях, где Fresco jQuery lightbox не может обнаружить его на основе URL:

<a href="#" class="fresco" data-fresco-type="image">Image</a>

YouTube

Ссылки к YouTube видео будут встроены, используя YouTube iframe API.

<a href="#" class="fresco">Youtube</a>

Опции YouTube iframe API могут быть установлены при помощи YouTube Embedded Players and Player Parameters для всех доступных параметров.

<a  href="#" 
class="fresco"
data-fresco-options="
width: 853,
height: 480,
youtube: { html5: 1 }
">Youtube - Dimensions and options</a>

YouTube по умолчанию оптимизирует установку качества на основе размера видео. Fresco может использовать HD качество видео, если включен Youtube Iframe API.

Vimeo

Ссылки к Vimeo будут встроены, используя API Vimeo:

<a href="#" class="fresco">Vimeo</a>

Опции API Проигрывателя Vimeo могут быть установлены, используя опции vimeo.

<a  href="#" 
class="fresco"
data-fresco-options="
width: 640,
height: 272,
vimeo: {
autoplay: 0,
portrait: 1
}
">Dimensions and options</a>

У Vimeo нет миниатюр заданных по умолчанию, они могут быть установлены, используя опцию thumbnail.

JAVASCRIPT API

Поскольку более качественное использование плагина состоит на основе документации относительно API Javascript. Все демонстрации на этой странице могут также быть созданы, используя API Javascript.

Fresco.show([
  { url: 'image1.jpg', caption: 'Caption below the image' },
  { url: 'image2.jpg' },
  { url: 'http://www.youtube.com/watch?v=7gFwvozMHR4', 
    options: {
      width: 853, 
      height: 480
    }
  },
  { url: 'http://vimeo.com/36897783', 
    options: {
      width: 853, 
      height: 480,
      thumbnail: 'vimeo_thumbnail.jpg'
    }
  }
], {
  afterPosition: function(position) {
    alert('Moved to position: ' + position); 
  }
});

API

Альтернативное использование HTML базируется на подходе с использованием API Javascript. API это способ использования плагина как и с HTML, но с некоторыми дополнительными функциями.

Fresco.show()

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

Fresco.show( url )

Передача URL файла.

jQuery(document).ready(function($) {
  $('#demo_api_basic').bind('click', function(event) {
    event.preventDefault(); 
    Fresco.show('image.jpg');
  });
});

Fresco.show( Element )

Передача URL файла с дополнительными параметрами.

Передача URL файла с дополнительными параметрами.
jQuery(document).ready(function($) {
  $('#demo_show_element_object').bind('click', function(event) {
    event.preventDefault();
    Fresco.show({
      url: 'http://www.youtube.com/watch?v=c0KYU2j0TM4',
      caption: 'This video is shown using the Javascript API',
      options: {
        width: 853, 
        height: 480,
        youtube: { html5: 1 }
      }
    });
  });
});

Fresco.show( elements [ , options ] [ , position ] )

Группы могут быть показаны при помощи массива строк или объектов или их комбинаций:

Fresco.show([
  'image1.jpg',
  'image2.jpg',
  { url: 'http://www.youtube.com/watch?v=c0KYU2j0TM4', options: { width: 853, height: 480 } }
]);

Возможности для всей группы:

Fresco.show(['image1.jpg', 'image2.jpg', 'image3.jpg'], {
  thumbnails: false
});

Перезапись настроек заданных на отдельных объектах:

Fresco.show([{
  url: 'http://www.youtube.com/watch?v=c0KYU2j0TM4', 
  options: {
    width: 853, 
    height: 480
  }
}, {
  url: 'http://www.youtube.com/watch?v=nTFEUsudhfs'
}, {
  url: 'http://www.youtube.com/watch?v=F_NEIwDiCSw'
}], {
  width: 640,
  height: 360
});

Позиция открытия плагина. Например вторая позиция:

<a  href="#" id="demo_api_group">Open group at 2nd  position</a>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('demo_api_group').bind('click', function(event) {
event.preventDefault();     Fresco.show([
{ url: 'image1.jpg' },
{ url: 'image2.jpg' },
{ url: 'image3.jpg' }
], { ui: 'inside' }, 2);
});
});
</script>

Fresco.show( HTMLElement )

Элемент с HTML атрибутами:

Fresco.show($('#element_id')[0]);

Fresco.setDefaultSkin()

Определение шаблона по умолчанию.

Эта функция должна быть вызвана после файла, который определяет пользовательский шаблон, например:

<script  type='text/javascript' src='/js/fresco/fresco.js'></script>
<script type='text/javascript' src='/js/fresco/fresco-custom-skin.js'></script> <script type='text/javascript'>
Fresco.setDefaultSkin('custom');
</script>

светодиодное шоу

Исходные файлы ДЕМО

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий