This is an old revision of the document!
Description
Turn each a.lightbox into a Lightbox on click.
Code
HTML:
<a href="BIG_IMAGE_URL" class="lightbox"> <img src="THUMBNAIL_IMAGE" /> </a>
JS:
$('a.lightbox').click(function(event) { event.preventDefault(); var div = '<div id="lightbox" class="reveal-modal" data-reveal><img /><a class="close-reveal-modal">×</a></div>'; $(div).appendTo('body'); var url = $(this).attr('href'); $.ajax({ url: url, cache: true, processData: false, }).always(function() { $("#lightbox img").attr("src", url); $("#lightbox").foundation('reveal', 'open'); }); });
Simply wrap <div class=“contain-to-grid”><div> around your menu.
<div class="contain-to-grid"> <nav class="menu"> <nav class="top-bar" data-topbar> <!-- TITLE --> <ul class="title-area"> <li class="name"> <h1><a href="/"></a></h1> <div id="logoIcon"> <h1>ochorocho</h1> </div> </li> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <!-- MENU --> <section class="top-bar-section"> <div> <ul class="left"> <li class="current"><a href="/links.html">Home</a></li> <li class="has-dropdown normal"> <a href="/menu.html">Menu</a> <ul class="dropdown"> <li class="normal"><a href="/menu/links.html">Submenu</a></li> <li class="normal"><a href="/menu/links.html">Submenu</a></li> </ul> </li> <li class="normal"><a href="/links.html">Submenu</a></li> <li class="normal"><a href="/links.html">Chapter</a></li> </ul> </div> </section> </nav> </nav> </div>