Zoombox/ml At Master · Grafikart/Zoombox - GitHub

Trang chủ » Html Css Grafikart » Zoombox/ml At Master · Grafikart/Zoombox - GitHub

Có thể bạn quan tâm

Skip to content Dismiss alert {{ message }} This repository has been archived by the owner on Jul 3, 2022. It is now read-only. / Zoombox Public archive
  • Notifications You must be signed in to change notification settings
  • Fork 467
  • Star 160
  • Code
  • Issues 24
  • Pull requests 6
  • Actions
  • Projects
  • Wiki
  • Security
  • Insights
Additional navigation options

Files

 master

Breadcrumbs

  1. Zoombox
index.html Blame Blame

Latest commit

 

History

History177 lines (160 loc) · 12.5 KB master
  1. Zoombox
index.htmlTop

File metadata and controls

  • Code
  • Blame
177 lines (160 loc) · 12.5 KBRaw123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 <!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 &amp; 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> &nbsp; &nbsp; <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> &nbsp; &nbsp; <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> &nbsp; &nbsp; <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> &nbsp; &nbsp; <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/> &nbsp; &nbsp; <a href="http://www.youtube.com/watch?v=8oejjWGFs6o" title="Hey this is youtube !" class="zoombox">Youtube</a><br/> &nbsp; &nbsp; <a href="http://www.dailymotion.com/JojoRatonLaveur/video/x1xhl1_jojodemarrages2diabolos_creation" title="Dailymotion now" class="zoombox">Dailymotion</a><br/> &nbsp; &nbsp; <a href="http://vimeo.com/752979" title="We all like vimeo !" class="zoombox">Vimeo</a><br/> &nbsp; &nbsp; <a href="http://grafikart.fr/img/zoombox/video.flv" title="" class="zoombox w500 h400">FLV</a><br/> &nbsp; &nbsp; <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/> &nbsp; &nbsp; <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/> &nbsp; &nbsp; <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/> &nbsp; &nbsp; <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/> &nbsp; &nbsp; <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> &nbsp;<a href="http://twitter.com/grafikart_fr" title="Twitter"><img src="http://grafikart.fr/img/icons/social/twitter.png" height="32" alt="" /></a> &nbsp;<a href="https://plus.google.com/103723959414194068092" title="Google plus"><img src="http://grafikart.fr/img/icons/social/googleplus.png" height="32" alt="" /></a> &nbsp;<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> &nbsp;<a href="http://www.formspring.me/Grafikart" title="Formspring"><img src="http://grafikart.fr/img/icons/social/formspring.png" height="32" alt="" /></a> &nbsp;<a href="http://fr.linkedin.com/in/grafikartfr" title="Linkedin"><img src="http://grafikart.fr/img/icons/social/linkedin.png" height="32" alt="" /></a> &nbsp;<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> &nbsp; </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> You can’t perform that action at this time.

Từ khóa » Html Css Grafikart