User Tools

Site Tools


foundation

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
foundation [2014/10/14 10:03] adminfoundation [2021/12/06 22: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 ===== 
- 
-Simpley 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> 
foundation.1413273784.txt.gz · Last modified: 2014/10/14 10:03 by admin