forked from nicolafranchini/VenoBox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
185 lines (161 loc) · 9.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>VenoBox - responsive jQuery modal window plugin</title>
<meta name="description" content="Responsive jQuery lightbox plugin, suitable for images, inline contents, iFrames, Vimeo and YouTube videos." />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="bootstrap.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="venobox/venobox.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<div class="header">
<img class="logo" src="v.jpg"><h1 class="pull-left"> VenoBox</h1>
</div>
<p class="lead">Just another responsive jQuery <a target="_blank" href="http://en.wikipedia.org/wiki/Lightbox_%28JavaScript%29">lightbox</a> plugin, suitable for images, inline contents, iFrames, Google-Maps, Ajax requests, Vimeo and YouTube videos.</p>
<p class="lead">The big difference compared to many others modal-window plugins is that <strong>VenoBox</strong> calculates the max width of the image displayed and preserves its height if is taller than the window (so in small devices you can scroll down the content, avoiding vertical microscopic resized images).</p>
</header>
<div class="block">
<h2>Examples</h2>
<p>Image gallery (possibility of navigation with keyboard arrows)</p>
<ul class="thumbs list-unstyled">
<li>
<a id="firstlink" class="venobox" data-gall="gall1" title="Breakfast Recipe" href="http://behance.vo.llnwd.net/profiles4/162876/projects/618102/25f7bf38a36413a35c1a1f1bf9363f76.png"><img src="img/pic1.jpg"></a>
</li>
<li>
<a class="venobox" data-gall="gall1" title="Twhater" href="http://behance.vo.llnwd.net/profiles4/162876/projects/6143067/dcc6e8ecad425c0caf94466e41535ef5.png"><img src="img/pic2.jpg"></a>
</li>
<li>
<a class="venobox" data-gall="gall1" href="http://behance.vo.llnwd.net/profiles20/884161/projects/3889289/52db37cfb4daafedb9909bf7cda59de8.jpg"><img src="img/pic3.jpg"></a>
</li>
<li>
<a class="venobox" data-gall="gall1" href="http://behance.vo.llnwd.net/profiles20/884161/projects/5205761/64628d508ea9b5de1ea0f2ff9066419c.jpg"><img src="img/pic4.jpg"></a>
</li>
</ul>
<small class="pull-left clearfix">pictures by: <a target="_blank" href="http://www.behance.net/luciobolognesi"> Basik</a>, <a target="_blank" href="http://www.behance.net/FedericoTomozBandini">TomoZ</a></small>
</div>
<div class="block">
<p>Various links</p>
<a class="btn btn-default venoboxframe" data-type="iframe" title="veno.it" href="http://www.veno.it">iFrame</a>
<a data-gall="gall2" data-type="iframe" class="btn btn-primary venoboxframe" href="https://maps.google.it/maps?oe=utf-8&client=firefox-a&ie=UTF8&q=Monkey+surf+club+Riccione&fb=1&gl=it&hq=monkey+surf&hnear=0x132cc3a48fa6592b:0xc1f284db17f1449d,Rimini&cid=0,0,1254770793035831807&t=m&vpsrc=0&iwloc=A&ll=44.007971,12.656561&spn=0.006295,0.006295&output=embed">G maps</a>
<a class="btn btn-info venoboxvid" data-gall="gall2" data-type="vimeo" href="http://vimeo.com/75976293">Vimeo</a>
<a class="btn btn-danger venoboxvid" data-gall="gall2" data-type="youtube" href="http://youtu.be/d85gkOXeXG4">YouTube</a>
<a class="btn btn-warning venoboxajax" data-gall="gall3" data-type="ajax" href="ajax.php">Ajax</a>
<a class="btn btn-warning venoboxinline" data-gall="gall3" data-type="inline" href="#inline-content">Inline</a>
</div>
<div id="inline-content" style="display:none;">
<div style="background:#fff; width:100%; height:100%; float:left; padding:10px;">
<h1>Hello world!</h1>
<p>this is my inline content</p>
</div>
</div>
<div class="block">
<h2>Usage</h2>
<p>Include <strong>VenoBox</strong> css and javascript after jQuery library</p>
<pre>
<!-- 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>
</pre>
<p>Insert one or more links with its custom class</p>
<pre>
<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>
</pre>
<pre>
<a class="venobox_custom" data-type="iframe" href="http://www.veno.it">open iFrame</a>
</pre>
<p>For Google Maps use the iFrame href attribute of map's embed code and set <code>data-type="iframe"</code></p>
<p>For videos use the simple url of the video, such as: <code>http://www.vimeo.com/your_video_id</code>, or <code>http://www.youtu.be/your_video_id</code></p>
<p>For inline contents set a hidden element with custom id, and call it from your link href</p>
</div>
<div class="block">
<h2>Initialize plugin</h2>
<pre>
$(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');
});
</pre>
</div>
<div class="block">
<h2>Gallery</h2>
<p>To activate navigation between every type of content assign the same data attribute <code>"data-gall"</code> to each link, like the example below</p>
<pre>
<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>
</pre>
</div>
<div class="block">
<h2>Options</h2>
<p>If the content is not an image you have to specify its type via data attribute <code>"data-type"</code></p>
<p>Available values: <code>iframe</code> <code>inline</code> <code>ajax</code> <code>youtube</code> <code>vimeo</code></p>
<pre>
<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>
</pre>
<p>Optional: set <code>title</code> attribute to show a description</p>
</div>
<div class="block">
<h2>Additional settings</h2>
<p>Customize the popup window via JavaScript</p>
<p><code>numeratio:</code> show navigation number and total items in current gallery - default: <code>false</code></p>
<p><code>border:</code> border thickness of the popup window in pixel - default: <code>'0px'</code></p>
<p><code>bgcolor:</code>background color of popup window (also affects border color, if has a border) - default: <code>'#ffffff'</code></p>
<p><code>framewidth:</code> you can set a static window width, otherwise the plugin will keep the responsive size settings of <code>.venoframe</code> class</p>
<p><code>frameheight:</code> you can set a static window height, otherwise the plugin will keep the responsive size settings of <code>.venoframe</code> class</p>
</div>
<footer class="footer">
<p><strong>VenoBox</strong> is a completely free plugin developed by <a target="_blank" href="http://www.veno.it"><strong>Nicola Franchini</strong></a></p>
<p><a target="_blank" href="http://www.twitter.com/nicolafranchini"><strong>Twitter</strong></a>
<a target="_blank" href="https://plus.google.com/110132773023219475486/about?rel=author"><strong>Google+</strong></a>
<a target="_blank" href="https://github.com/nicolafranchini"><strong>GitHub</strong></a></p>
<p class="ringraziamenti">many thanx to <a target="_blank" href="http://lokeshdhakar.com/projects/lightbox2/">Lokesh Dhakar</a>, the father of LightBox!</p>
</footer>
</div> <!-- wrapper -->
<script type="text/javascript">
$(document).ready(function(){
$('.venobox').venobox({
numeratio: true,
border: '20px'
});
$('.venoboxvid').venobox({
bgcolor: '#000'
});
$('.venoboxframe').venobox({
border: '6px'
});
$('.venoboxinline').venobox({
framewidth: '300px',
frameheight: '250px',
border: '6px',
bgcolor: '#f46f00'
});
$('.venoboxajax').venobox({
border: '30px;',
frameheight: '220px'
});
})
</script>
</body>
</html>