Differences

This shows you the differences between two versions of the page.

--- foundation [2014/10/14 09:43] – admin
+++ foundation [2021/12/06 21:55] (current) – removed admin
@@ Line 1: / Line 1: @@
-====== Foundation ======
-===== Reveal Lightbox =====
-**Description**
-Turn each a.lightbox into a Lightbox on click.
-**Code**
-**HTML:**
-<code html>
-<a href="BIG_IMAGE_URL" class="lightbox">
-  <img src="THUMBNAIL_IMAGE" />
-</a>
-</code>
-**JS:**
-<code javascript>
-$('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');
-	});
-});
-</code>
-===== Center Top-Bar Navi =====
-Simply wrap <div class="contain-to-grid"><div> around your menu.
-<code html>
-<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>
-</code>

Differences

Page Tools