VenoBox

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

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

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

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

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

    <a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg"></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" href="#inline" title="My Description">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