User Tools

Site Tools


foundation

Foundation

Reveal Lightbox

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">&#215;</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');
	});
});

Center Top-Bar Navi

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>
foundation.txt · Last modified: 2014/10/14 11:43 by admin