forked from Grafikart/Zoombox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (160 loc) · 12.5 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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"http://grafikart.fr/>
<title>Zoombox | Grafikart.fr</title>
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700|Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://grafikart.fr/css/style.css?v=21082011" />
<link rel="stylesheet" type="text/css" href="zoombox.css" /><link rel="stylesheet" type="text/css" href="http://grafikart.fr/css/zoombox.css" />
</head>
<body id="zoomboxc" class="white">
<div class="header" id="header">
<div class="wrap">
<a href="http://grafikart.fr" class="logo" id="logo">
<img src="http://grafikart.fr/img/logo.png" alt="" /> </a>
<ul class="menu">
<li><a href="http://grafikart.fr/blog/" title="Blog">Blog</a></li>
<li><a href="http://grafikart.fr/tutoriels" title="Tutoriel vidéo">Tutoriels</a></li>
<li><a href="http://grafikart.fr/ressources" title="Ressources web">Ressources</a></li>
<li><a href="http://grafikart.fr/forum" title="Forum">Forum</a></li>
<li><a href="http://grafikart.fr/portfolio" title="Portfolio">Portfolio</a></li>
<li><a href="http://grafikart.fr/contact" title="Contact">Contact</a></li>
</ul>
</div>
</div>
<div class="top wrap">
<div class="grid12">
<div class="subhead">
<div class="logo"><img src="http://grafikart.fr/img/zoombox/zoombox.png" alt="" /></div>
<ul>
<li class="current"><a href="http://grafikart.fr/zoombox">Home</a></li>
<li><a href="http://grafikart.fr/zoombox/howto">How to use</a></li>
<li><a href="http://grafikart.fr/zoombox/api">API & Options</a></li>
<li><a href="http://grafikart.fr/zoombox/faq">FAQ</a></li>
<li><a href="http://grafikart.fr/contact">Contact</a></li>
</ul>
</div>
</div>
<div class="cb"></div> <div class="grid6 alpha">
<img src="http://grafikart.fr/img/zoombox/zoombox_cover.png" alt="" /> </div>
<div class="grid6 omega">
<h1 style="border:none; font-size:26px;">What the fuck is Zoombox ?</h1>
<p>Zoombox is an easy to use jquery modul that allows you to display images, html content and multi media content with a "lightbox" that floats over your web ppage.</p>
<p><strong>Quick example : </strong></p>
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton1.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton1.jpg" class="bordered" alt="" /></a>
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton2.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton2.jpg" class="bordered" alt="" /></a>
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton3.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton3.jpg" class="bordered" alt="" /></a>
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton4.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton4.jpg" class="bordered" alt="" /></a>
<br/><br/>
<p>
<a href="https://github.com/Grafikart/Zoombox/zipball/master" class="bluebutton">Download</a>
<a href="https://github.com/Grafikart/Zoombox" class="blackbutton">View Sources <span>(on github)</span></a>
</p>
</div>
<div class="cb"></div>
</div><div class="content">
<div class="wrap">
<div class="grid6 alpha">
<div class="title">Features</div>
<ul>
<li>Can display <strong>all kind of links</strong> : Images, Flash animations, Youtube videos, Dailymotion videos, Iframe, HTML Content</li>
<li><strong>Everything is customizable</strong>, you can create new themes using CSS</li>
<li>You can <strong>group</strong> your link and make galleries</li>
<li><strong>Standalone version</strong>, you can use zoombox as a modalbox : <br/> $.zoombox.html('I can use this plugin to display modal boxes !');</li>
<li><strong>Keyboard shortcuts</strong> are now available for galleries (try pressing the arrow keys :)), you can also close the box using Escape key.</li>
</ul>
</div>
<div class="grid4">
<div class="title">More Examples</div>
<ul>
<li><strong>Multimédia contents :</strong><br/>
<a href="http://www.youtube.com/watch?v=8oejjWGFs6o" title="Hey this is youtube !" class="zoombox">Youtube</a><br/>
<a href="http://www.dailymotion.com/JojoRatonLaveur/video/x1xhl1_jojodemarrages2diabolos_creation" title="Dailymotion now" class="zoombox">Dailymotion</a><br/>
<a href="http://vimeo.com/752979" title="We all like vimeo !" class="zoombox">Vimeo</a><br/>
<a href="http://grafikart.fr/img/zoombox/video.flv" title="" class="zoombox w500 h400">FLV</a><br/>
<a href="http://grafikart.fr/img/zoombox/video.mp4" title="" class="zoombox w450 h375">MP4/Mov</a><br/>
</li>
<li><strong><a title="This is an Inception ! zoombox inside a zoombox inside a zoombox" href="http://grafikart.fr/zoombox" class="zoombox">Iframe</a></strong></li>
<li><strong><a href="#" onclick="$.zoombox.html('<strong>Hi !</strong><p>This is a HTML content !</p>',{theme:'prettyphoto',width:600,height:50}); return false;">HTML Content</a></strong></li>
<li><strong><a href="#" onclick="$.zoombox.open('/img/zoombox/ratons/raton1.jpg',{theme:'prettyphoto',animation:false}); return false;">No animation</a></strong></li>
<li>
<strong>Build in Themes : </strong><br/>
<a title="I like prettyphoto" href="http://grafikart.fr/img/zoombox/ratons/raton1.jpg" onclick="$.zoombox.options.theme = 'prettyphoto';" class="zoombox">PrettyPhoto Theme</a><br/>
<a title="I like prettyphoto" href="http://grafikart.fr/img/zoombox/ratons/raton2.jpg" onclick="$.zoombox.options.theme = 'darkprettyphoto';" class="zoombox">Dark PrettyPhoto Theme</a><br/>
<a title="I like lightbox" href="http://grafikart.fr/img/zoombox/ratons/raton3.jpg" onclick="$.zoombox.options.theme = 'lightbox';" class="zoombox">Lightbox Theme</a><br/>
<a title="I like it simple" href="http://grafikart.fr/img/zoombox/ratons/raton6.jpg" onclick="$.zoombox.options.theme = 'simple';" class="zoombox">Simple Theme</a><br/>
</li>
</ul>
</div>
<div class="grid2 omega">
<div class="title">Buy me a coffee</div>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4ACPY266ZE69W">
<input type="image" src="http://grafikart.fr/img/zoombox/coffee.png" border="0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !">
<img alt="" border="0" src="https://www.paypal.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
</form>
<p class="center">You like my work ?<br/>I like coffee :)</p>
</div>
<div class="clear">
<div class="grid6 alpha">
<div class="title">Video demonstration</div>
<p>Sorry but I'm french so I have a horrible accent...</p>
<object width="460" height="300">
<param name="movie" value="http://www.dailymotion.com/swf/video/xhhmho"></param>
<param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param>
<embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/xhhmho" width="460" height="300" allowfullscreen="true" allowscriptaccess="always"></embed>
</object>
</div>
<div class="grid6 omega">
<div class="title">Explications (en français)</div>
<p>Vous verrez à travers cette présentation comment installer et utiliser zoombox.</p>
<object width="460" height="300">
<param name="movie" value="http://www.dailymotion.com/swf/video/xhhowp"></param>
<param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param>
<embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/xhhowp" width="460" height="300" allowfullscreen="true" allowscriptaccess="always"></embed>
</object>
</div>
</div>
</div> <div class="cb"></div>
</div>
<div class="footer">
<div class="wrap">
<div class="grid4">
<a href="http://grafikart.fr/"><img src="http://grafikart.fr/img/logo.png" alt="" /></a>
<p>Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : <strong>Vous</strong>.</p>
</div>
<div class="grid4">
<div class="title">Dernier tweets</div>
<div class="tweet">@Circonflex_net C'est le PC qui donne de mauvaise couleur, exemple le fond de mon site apparait blanc alors qu'il est gris avec motif</div>
<div class="tweet">@Circonflex_net Du web, quand je passe sur mac je vois des couleurs que je ne vois pas sur PC (surtout sur les couleurs claires)</div>
<div class="tweet">@Circonflex_net On arrive vraiment a avoir des gros changement de couleur ou c'est vraiment léger ? pense investir :D</div>
</div>
<div class="grid4">
<div class="title">Retrouver Grafikart.fr sur :</div>
<a href="http://feeds.feedburner.com/Grafikart" title="RSS"><img src="http://grafikart.fr/img/icons/social/rss.png" height="32" alt="" /></a>
<a href="http://twitter.com/grafikart_fr" title="Twitter"><img src="http://grafikart.fr/img/icons/social/twitter.png" height="32" alt="" /></a>
<a href="https://plus.google.com/103723959414194068092" title="Google plus"><img src="http://grafikart.fr/img/icons/social/googleplus.png" height="32" alt="" /></a>
<a href="http://www.facebook.com/pages/Grafikart/483920250642" title="Facebook"><img src="http://grafikart.fr/img/icons/social/facebook.png" height="32" alt="" /></a>
<a href="http://www.formspring.me/Grafikart" title="Formspring"><img src="http://grafikart.fr/img/icons/social/formspring.png" height="32" alt="" /></a>
<a href="http://fr.linkedin.com/in/grafikartfr" title="Linkedin"><img src="http://grafikart.fr/img/icons/social/linkedin.png" height="32" alt="" /></a>
<a href="http://www.lastfm.fr/listen/user/Grafikart" title="LastFM"><img src="http://grafikart.fr/img/icons/social/lastfm.png" height="32" alt="" /></a> </div>
<div class="cb"></div>
</div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://grafikart.fr/js/main.js"></script> <script type="text/javascript" src="zoombox.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('a.zoombox').zoombox();
});
//]]>
</script>
</html>