| Current Path : /home/happyrenas/old/happy-and-pay.fr/js/zoombox/ |
Linux webd005.cluster105.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 |
| Current File : /home/happyrenas/old/happy-and-pay.fr/js/zoombox/index.html |
<!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>