g0dsp33d

old jquery venobox

Go to file

mw_wbp f6382e3353 better naming		2024-04-22 08:43:09 +02:00
venobox	better naming	2024-04-22 08:43:09 +02:00
demo.css	better	2024-04-22 08:42:43 +02:00
readme.html	better	2024-04-22 08:42:43 +02:00

readme.html

Hello world!

this is my inline content

Usage

Include VenoBox css and javascript after jQuery library


<!-- Add jQuery library -->

<script type="text/javascript" src="https://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>

Insert one or more links with its custom class


<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>

For Google Maps use the iFrame href attribute of map's embed code and set data-type="iframe"

For videos use the simple url of the video, such as: http://www.vimeo.com/your_video_id, or http://www.youtu.be/your_video_id

For inline contents set a hidden element with custom id, and call it from your link href

Initialize plugin


$(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

	});



	/* auto-open #firstlink on page load */

	$("#firstlink").venobox().trigger('click');

});

Gallery

To activate navigation between every type of content assign the same data attribute "data-gall" to each link, like the example below


<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>

Options

If the content is not an image you have to specify its type via data attribute "data-type"

Available values: 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>

Optional: set title attribute to show a description

Additional settings

Customize the popup window via JavaScript

numeratio: show navigation number and total items in current gallery - default: false

border: border thickness of the popup window in pixel - default: '0px'

bgcolor:background color of popup window (also affects border color, if has a border) - default: '#ffffff'

framewidth: you can set a static window width, otherwise the plugin will keep the responsive size settings of .venoframe class

frameheight: you can set a static window height, otherwise the plugin will keep the responsive size settings of .venoframe class

</html>