VenoBox

Основною перевагою VenoBox є те, що він обчислює максимальну ширину зображення на екрані і зберігає його висоту, якщо воно вище вікна (в невеликих пристроях ви можете прокрутити вміст вниз, уникаючи мікроскопічного масштабування зображення).

Використання

Додайте CSS і JavaScript Venobox після бібліотеки jQuery

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add venobox -->
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="venobox/venobox.min.js"></script>

Вставте одне або декілька посилань, вказавши клас

<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>

<a class="venobox_custom" data-type="iframe" href="http://www.veno.it">open iFrame</a>

Для Google Maps використовувати iFrame href атрибут для коду вставки карти і set data type="iframe"

Для відео використовуйте просту url-адресу відео, наприклад: http://www.vimeo.com/your_video_id

Для вбудованого вмісту встановіть id прихованого елементу інтерфейсу і викличіть його за допомогою href лінку

Ініціалізація плагіну

$(document).ready(function(){
	/* default settings */
	$('.venobox').venobox(); 
	/* open content with custom settings */
	$('.venobox_custom').venobox({
		framewidth: '300px',
		frameheight: '250px',
		border: '6px',
		bordercolor: '#ba7c36',
		numeratio: true,
		infinigall: true
	});
	/* auto-open #firstlink on page load */
	$("#firstlink").venobox().trigger('click');
});

Галерея

Щоб активувати навігацію між кожним типом вмісту,додайте атрибут data-gall до кожного лінку. Наприклад:

<a class="venobox" data-gall="myGallery" href="image01-big.jpg"><img src="image01-small.jpg" /></a>
<a class="venobox" data-gall="myGallery" href="image02-big.jpg"><img src="image02-small.jpg" /></a>
<a class="venobox" data-gall="myGallery" href="image03-big.jpg"><img src="image03-small.jpg" /></a>

Опції

Якщо контент не є зображенням, то потрібно вказати його тип через атрибут data type

Доступні значення: iframe, inline, ajax, youtube, vimeo

<a class="venobox" data-type="iframe" href="http://www.veno.it">Open Iframe</a>
<a class="venobox" data-type="inline" title="My Description" href="#inline">Open inline content</a>
<a class="venobox" data-type="ajax" href="ajax-call.php">Retrieve data via Ajax</a>
<a class="venobox" data-type="youtube" href="http://youtu.be/d85gkOXeXG4">Open YouYbe video</a>
<a class="venobox" data-type="vimeo" href="http://vimeo.com/75976293">Open Vimeo video</a>

Додатково: встановіть атрибут title, щоб створити опис.

Колір фону

Просто додайте значення до data-overlay вашого посилання для динамічного фону

<a class="venobox" data-overlay="rgba(95,164,255,0.8)" href="...">...</a>
<a class="venobox" data-overlay="#ca294b" href="...">...</a>

або прикрипіть різні класи до data-css

<a class="venobox" data-css="red-bg" href="...">...</a>
<a class="venobox" data-css="yellow-bg" href="...">...</a>

Примітка: (не використовуйте це для статичного фону. Якщо потрібно, просто змініть .vbox-overlay всередині venobox.css)

Додаткові налаштування

Налаштуйте спливаюче вікно через JavaScript

• nfinigall: нескінченні галереї, перехід від останнього елемента до першого і навпаки, за замовчуванням: false

• numeratio: показує номер елемента і загальну кількість елементів поточної колекції, за замовчуванням: false

• border: товщина границі спливаючого вікна в пікселях, за замовчуванням: '0px'

• bgcolor: колір фону спливаючого вікна (також впливає на колір границі, якщо вона є), за замовчуванням: '#ffffff'

• framewidth: встановлення статичної ширини вікна, в іншому випадку плагін буде отримувати параметри розмірів з .venoframe

• frameheight: встановлення статичної висоти вікна, в іншому випадку плагін буде отримувати параметри розмірів з .venoframe

Github