Startseite Erkunden Hilfe
Anmelden
pwa
/
Lungo.js
Mirror von https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

Final example of Carousel

soyjavi vor 13 Jahren
Ursprung
99dd085cae
Commit
221049f864
6 geänderte Dateien mit 38 neuen und 554 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 8 1
      kitchen-sink/app/events.carousel.js
  2. 21 22
      kitchen-sink/app/sections/carousel.html
  3. 0 159
      kitchen-sink/carousel.html
  4. 1 1
      kitchen-sink/index.html
  5. 0 364
      kitchen-sink/test.html
  6. 8 7
      src/element/Lungo.Element.Carousel.js

+ 8 - 1
kitchen-sink/app/events.carousel.js
Datei anzeigen 

@@ -1 +1,8 @@
 
-Lungo.Element.Carousel($$('[data-control=carousel]')[0]);
 
+var carousel_example = Lungo.Element.Carousel($$('[data-control=carousel]')[0], function(index, element) {
 
+    Lungo.dom("section#carousel .subtitle span").html(index + 1);
 
+});
 
+
 
+Lungo.Events.init({
 
+    'tap section#carousel > header [data-direction=left]':  carousel_example.prev,
 
+    'tap section#carousel > header [data-direction=right]': carousel_example.next
 
+});

+ 21 - 22
kitchen-sink/app/sections/carousel.html
Datei anzeigen 

@@ -1,51 +1,50 @@
 
 <section id="carousel" data-transition="slide">
 
-    <header data-title="Carousel">
 
+    <header>
 
         <nav class="box">
 
             <a href="#back" data-router="section" data-label="back"></a>
 
         </nav>
 
+
 
+        <div class="centered title with-subtitle">
 
+            Carousel
 
+            <small class="subtitle">Photo Nº<span>1</span></small>
 
+        </div>
 
+
 
+        <nav class="right box">
 
+            <a href="#" data-action="carousel" data-direction="left" data-icon="left"></a>
 
+            <a href="#" data-action="carousel" data-direction="right" data-icon="right"></a>
 
+        </nav>
 
     </header>
 
-    <article id="carousel-article" class="indented">
 
+    <article id="carousel-article">
 
         <div data-control="carousel" class="carousel">
 
             <div>
 
                 <div align="center">
 
-                    <img src="http://lorempixel.com/256/128/food/">
 
-                    <p>Example of carousel</p>
 
+                    <img src="http://lorempixel.com/320/418/food/">
 
                 </div>
 
                 <div align="center">
 
-                    <img src="http://lorempixel.com/256/128/sports/">
 
-                    <p>Example of carousel</p>
 
+                    <img src="http://lorempixel.com/320/418/sports/">
 
                 </div>
 
                 <div align="center">
 
-                    <img src="http://lorempixel.com/256/128/people/">
 
-                    <p>Example of carousel</p>
 
+                    <img src="http://lorempixel.com/320/418/people/">
 
                 </div>
 
                 <div align="center">
 
-                    <img src="http://lorempixel.com/256/128/abstract/">
 
-                    <p>Example of carousel</p>
 
+                    <img src="http://lorempixel.com/320/418/abstract/">
 
                 </div>
 
                 <div align="center">
 
-                    <img src="http://lorempixel.com/256/128/city/">
 
-                    <p>Example of carousel</p>
 
+                    <img src="http://lorempixel.com/320/418/city/">
 
                 </div>
 
                 <div align="center">
 
-                    <img src="http://lorempixel.com/256/128/transport/">
 
-                    <p>Example of carousel</p>
 
+                    <img src="http://lorempixel.com/320/418/transport/">
 
                 </div>
 
                 <div align="center">
 
-                    <img src="http://lorempixel.com/256/128/nature/">
 
-                    <p>Example of carousel</p>
 
+                    <img src="http://lorempixel.com/320/418/nature/">
 
                 </div>
 
                 <div align="center">
 
-                    <img src="http://lorempixel.com/256/128/fashion/">
 
-                    <p>Example of carousel</p>
 
+                    <img src="http://lorempixel.com/320/418/fashion/">
 
                 </div>
 
                 <div align="center">
 
-                    <img src="http://lorempixel.com/256/128/technics/">
 
-                    <p>Example of carousel</p>
 
+                    <img src="http://lorempixel.com/320/418/technics/">
 
                 </div>
 
             </div>
 
         </div>
 
-
 
     </article>
 
-
 
 </section>

+ 0 - 159
kitchen-sink/carousel.html
Datei anzeigen 

@@ -1,159 +0,0 @@
 
-<!doctype html>
 
-<html>
 
-<head>
 
-    <meta charset="utf-8">
 
-    <title>KitchenSink - Lungo 2.0</title>
 
-    <meta name="description" content="">
 
-    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
-    <meta name="HandheldFriendly" content="True">
 
-    <meta name="MobileOptimized" content="320">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-    <meta name="apple-mobile-web-app-capable" content="yes">
 
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-    <meta name="format-detection" content="telephone=no">
 
-    <meta http-equiv="cleartype" content="on">
 
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://lungo.tapquo.com/resources/icon@2x.png">
 
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://lungo.tapquo.com/resources/icon-72.png">
 
-    <link rel="apple-touch-icon-precomposed" href="http://lungo.tapquo.com/resources/icon.png">
 
-    <link rel="apple-touch-startup-image" href="http://lungo.tapquo.com/resources/default.png">
 
-
 
-    <!-- Main Stylesheet -->
 
-
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.base.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.nav.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.aside.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.article.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.list.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.grid.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.splash.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.button.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.form.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.colour.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.icon.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.icon.brand.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.loading.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.notification.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.theme.default.css">
 
-
 
-    <!--
 
-    <link rel="stylesheet" href="../../release/lungo.css">
 
-    <link rel="stylesheet" href="../../release/lungo.icon.css">
 
-    <link rel="stylesheet" href="../../release/lungo.icon.brand.css">
 
-    <link rel="stylesheet" href="../../release/lungo.theme.default.css">
 
-    -->
 
-    <!-- App Stylesheet -->
 
-    <link rel="stylesheet" href="stylesheets/app.css">
 
-
 
-</head>
 
-
 
-<body class="app">
 
-    <section id="main" data-transition="slide" data-pull="normal">
 
-        <header class="">
 
-            <nav class="left button">
 
-                <a href="#main-article" data-router="article" data-icon="menu"></a>
 
-                <a href="#second-article" data-router="article" data-icon="menu"></a>
 
-            </nav>
 
-            <nav class="right button">
 
-                <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="share" target="_blank" ></a>
 
-            </nav>
 
-            <div class="left">
 
-                <div class="centered title with-subtitle">
 
-                    Lungo Framework
 
-                    <small class="subtitle">version 2</small>
 
-                </div>
 
-            </div>
 
-        </header>
 
-
 
-        <style>
 
-            .carousel {
 
-                padding:50px;
 
-                height: 100px;
 
-            }
 
-        </style>
 
-
 
-        <article id="main-article" class="scroll">
 
-            <a href="#" id="start1">start me!</a>
 
-            <div data-control="carousel-1" class="carousel" style="background: #aaa">
 
-                <ul>
 
-                    <li style="display:block">Lorem</li>
 
-                    <li style="display:none">2222</li>
 
-                    <li style="display:none">3333</li>
 
-                </ul>
 
-            </div>
 
-        </article>
 
-
 
-
 
-        <article id="second-article" class="scroll">
 
-            <a href="#" id="start2">start me!</a>
 
-            <div data-control="carousel-2" class="carousel" style="background: #ccc">
 
-                <ul>
 
-                    <li style="display:block">1111</li>
 
-                    <li style="display:none">2222</li>
 
-                    <li style="display:none">3333</li>
 
-                </ul>
 
-            </div>
 
-        </article>
 
-
 
-    </section>
 
-
 
-    <!-- Lungo dependencies -->
 
-    <script src="../src/lib/quo.js"></script>
 
-
 
-    <script src="../src/Lungo.js"></script>
 
-    <script src="../src/Lungo.Init.js"></script>
 
-    <script src="../src/Lungo.Core.js"></script>
 
-    <script src="../src/Lungo.Dom.js"></script>
 
-    <script src="../src/Lungo.Service.js"></script>
 
-    <script src="../src/Lungo.Constants.js"></script>
 
-    <script src="../src/Lungo.Events.js"></script>
 
-    <script src="../src/Lungo.Notification.js"></script>
 
-    <script src="../src/Lungo.Fallback.js"></script>
 
-
 
-    <script src="../src/router/Lungo.Router.js"></script>
 
-    <script src="../src/router/Lungo.Router.History.js" ></script>
 
-
 
-    <script src="../src/view/Lungo.View.Article.js" ></script>
 
-    <script src="../src/view/Lungo.View.Aside.js" ></script>
 
-
 
-    <script src="../src/element/Lungo.Element.Cache.js"></script>
 
-    <script src="../src/element/Lungo.Element.Carousel.js"></script>
 
-    <script src="../src/element/Lungo.Element.Count.js"></script>
 
-    <script src="../src/element/Lungo.Element.Loading.js"></script>
 
-    <script src="../src/element/Lungo.Element.Progress.js"></script>
 
-    <script src="../src/element/Lungo.Element.Pull.js"></script>
 
-
 
-    <script src="../src/data/Lungo.Data.Cache.js"></script>
 
-    <script src="../src/data/Lungo.Data.Sql.js"></script>
 
-    <script src="../src/data/Lungo.Data.Storage.js"></script>
 
-
 
-    <script src="../src/attributes/Lungo.Attributes.Data.js"></script>
 
-
 
-    <script src="../src/boot/Lungo.Boot.Resources.js" ></script>
 
-    <script src="../src/boot/Lungo.Boot.Stats.js" ></script>
 
-    <script src="../src/boot/Lungo.Boot.Layout.js"></script>
 
-    <script src="../src/boot/Lungo.Boot.Events.js"></script>
 
-    <script src="../src/boot/Lungo.Boot.Data.js"></script>
 
-    <script src="../src/boot/Lungo.Boot.Section.js"></script>
 
-    <script src="../src/boot/Lungo.Boot.Article.js"></script>
 
-
 
-    <!-- LungoJS - Sandbox App -->
 
-    <script>
 
-
 
-        Lungo.init();
 
-
 
-        $$('#start1').tap(function() {
 
-            var carousel1 = Lungo.View.Carousel($$('[data-control=carousel-1]')[0]);
 
-            alert("active");
 
-        });
 
-        $$('#start2').tap(function() {
 
-            var carousel2 = Lungo.View.Carousel($$('[data-control=carousel-2]')[0]);
 
-            setInterval(function() {
 
-                carousel2.next();
 
-            }, 750)
 
-        });
 
-
 
-    </script>
 
-</body>
 
-</html>

+ 1 - 1
kitchen-sink/index.html
Datei anzeigen 

@@ -58,7 +58,7 @@
 
                     Lungo
 
                     <small class="subtitle">HTML5 Cross-Device Framework</small>
 
                 </div>
 
-                </div>
 
+            </div>
 
         </header>
 
 
         <article id="main-article" class="list indented scroll">

+ 0 - 364
kitchen-sink/test.html
Datei anzeigen 

@@ -1,364 +0,0 @@
 
-<!doctype html>
 
-<html>
 
-<head>
 
-    <meta charset="utf-8">
 
-    <title>KitchenSink - Lungo 2.0</title>
 
-    <meta name="description" content="">
 
-    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
-    <meta name="HandheldFriendly" content="True">
 
-    <meta name="MobileOptimized" content="320">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-    <meta name="apple-mobile-web-app-capable" content="yes">
 
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-    <meta name="format-detection" content="telephone=no">
 
-    <meta http-equiv="cleartype" content="on">
 
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://lungo.tapquo.com/resources/icon@2x.png">
 
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://lungo.tapquo.com/resources/icon-72.png">
 
-    <link rel="apple-touch-icon-precomposed" href="http://lungo.tapquo.com/resources/icon.png">
 
-    <link rel="apple-touch-startup-image" href="http://lungo.tapquo.com/resources/default.png">
 
-
 
-    <!-- Main Stylesheet -->
 
-
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.base.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.nav.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.aside.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.article.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.list.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.layout.grid.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.splash.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.button.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.form.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.colour.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.icon.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.icon.brand.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.loading.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.notification.css">
 
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.theme.default.css">
 
-</head>
 
-
 
-<body class="app">
 
-    <section id="layout" data-transition="slide">
 
-        <header data-title="Layout"  class="extended">
 
-            <nav class="box">
 
-                <a href="#features" data-router="aside" data-icon="grid"></a>
 
-                <a href="#features" data-router="aside" data-label="User"></a>
 
-
 
-            </nav>
 
-            <nav class="right box">
 
-                <a href="#splash" data-router="section" data-icon="inbox" ></a>
 
-                <a href="#splash" data-router="section" data-icon="user" data-count="3" ></a>
 
-
 
-            </nav>
 
-        </header>
 
-
 
-        <footer>
 
-            <nav class="with-labelss">
 
-                <a href="#layout-art1" class="current"  data-router="article" data-label="Home" data-icon="home" ></a>
 
-                <a href="#layout-art2" data-router="article" data-label="Inbox" data-icon="inbox"  data-count="2" ></a>
 
-                <a href="#layout-art3" data-router="article" data-label="Profile" data-icon="user"></a>
 
-                <a href="#layout-art4" id="bb"  data-router="article" data-label="Settings" data-icon="settings"></a>
 
-            </nav>
 
-        </footer>
 
-
 
-        <nav class="groupbar">
 
-            <a href="#layout-art1" data-router="article" data-label="Normal" class="current"></a>
 
-            <a href="#layout-art3" data-router="article" data-label="Indented"></a>
 
-
 
-        </nav>
 
-
 
-         <article id="layout-art1" class="list indented scroll">
 
-            <ul>
 
-                <li>
 
-                    <strong>&lt;li&gt; + &lt;strong&gt; </strong>
 
-                </li>
 
-
 
-                <li class="selectable">
 
-                    <strong>&lt;li .selectable&gt; + &lt;strong&gt; </strong>
 
-                </li>
 
-
 
-                <li>
 
-                    <a href="#">
 
-                        <strong>&lt;li&gt; + &lt;a&gt; + &lt;strong&gt; </strong>
 
-                    </a>
 
-                </li>
 
-
 
-                <li>
 
-                    <strong>&lt;li&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-
 
-                <li class="anchor">colors</li>
 
-
 
-                <li class="dark">
 
-                    <strong>&lt;li .dark&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-
 
-                <li class="theme">
 
-                    <strong>&lt;li .theme&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-
 
-                <li class="arrow light">
 
-                    <strong>&lt;li .arrow.light&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-
 
-                <li class="anchor">.arrow class</li>
 
-
 
-                <li class="arrow">
 
-                    <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
 
-                </li>
 
-
 
-                <li class="arrow">
 
-                    <strong>&lt;li .arrow&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-
 
-
 
-                <li class="anchor">.right element</li>
 
-
 
-                <li>
 
-                    <a href="#">
 
-                        <div class="right">.right</div>
 
-                        <strong>&lt;strong&gt; element</strong>
 
-                        <small>with &lt;small&gt; element</small>
 
-                    </a>
 
-                </li>
 
-
 
-                <li>
 
-                    <a href="#">
 
-                        <strong>&lt;strong&gt; element</strong>
 
-                        <small>with &lt;small&gt; element</small>
 
-                        <div class="right">.right</div>
 
-                    </a>
 
-                </li>
 
-
 
-                <li>
 
-                    <a href="#">
 
-                        <div class="right bubble blue">.right.bubble</div>
 
-                        <strong>&lt;strong&gt; element</strong>
 
-                        <small>with &lt;small&gt; element</small>
 
-                    </a>
 
-                </li>
 
-
 
-                <li>
 
-                    <a href="#">
 
-                        <div class="right bubble blue" data-icon="clock">.right data-icon</div>
 
-                        <strong>&lt;strong&gt; element</strong>
 
-                        <small>with &lt;small&gt; element</small>
 
-                    </a>
 
-                </li>
 
-
 
-                <li class="anchor">With data-icon or data-image attribute</li>
 
-                <li data-image="http://lungo.tapquo.com/resources/icon@2x.png">
 
-                    <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-                <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon@2x.png">
 
-                    <strong>&lt;li .thumb data-image&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-                <li data-icon="user">
 
-                    <strong>&lt;li data-icon&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-                <li class="thumb" data-icon="user">
 
-                    <strong>&lt;li .thumb data-icon&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-
 
-                <li class="anchor">With colours</li>
 
-                <li class="blue">
 
-                    <strong>&lt;li .blue&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-                <li class="green">
 
-                    <strong>&lt;li .green&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-                <li class="yellow">
 
-                    <strong>&lt;li .yellow&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-            </ul>
 
-
 
-        </article>
 
-
 
-        <article id="layout-art2" class="padding scroll">
 
-
 
-            <form>
 
-                <input type="search" placeholder="type your search" />
 
-                <a href="#" class="button theme" data-icon="search"></a>
 
-
 
-                <label>Progress</label>
 
-                <div id="kaka" data-progress="30%"></div>
 
-
 
-                <div data-loading="black"></div>
 
-
 
-                <div id="cargador"></div>
 
-
 
-                <a href="#" class="button big" data-label="Send Email" data-icon="mail"></a>
 
-
 
-                <div class="four columns left">
 
-                        <a href="#" class="button big theme" data-label="Accept" data-icon="check"></a>
 
-                    </div>
 
-                    <div class="four columns right">
 
-                        <a href="#" class="button big red" data-label="Cancel" data-icon="close"></a>
 
-                    </div>
 
-            </form>
 
-        </article>
 
-
 
-        <article id="layout-art3" class="list indented">
 
-            <ul>
 
-                <li data-image="http://lungo.tapquo.com/resources/icon@2x.png">
 
-                    <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                </li>
 
-                <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon@2x.png">
 
-                    <strong>&lt;li .thumb data-image&gt; + &lt;strong&gt; </strong>
 
-                    <small>&lt;small&gt;</small>
 
-                    <small>&lt;small&gt;</small>
 
-
 
-                </li>
 
-                <li></li>
 
-                <li></li>
 
-                <li></li>
 
-                <li></li>
 
-                <li></li>
 
-                <li></li>
 
-                <li></li>
 
-                <li></li>
 
-            </ul>
 
-
 
-
 
-        </article>
 
-        <article id="layout-art4"></article>
 
-    </section>
 
-
 
-    <aside id="features" class="left">
 
-    <header data-title="BETA Features"></header>
 
-    <article class="list scroll">
 
-        <ul>
 
-            <!-- Basic Layout -->
 
-
 
-            <li>
 
-                <strong>Suggestions</strong>
 
-            </li>
 
-
 
-            <li class="current">
 
-                <a href="#">
 
-                    <strong>Jobs</strong>
 
-                    <small>lorem</small>
 
-                </a>
 
-            </li>
 
-
 
-            <li class="arrow">
 
-                <strong>Network</strong>
 
-                <small>lorem</small>
 
-            </li>
 
-
 
-
 
-            <li>
 
-                <a href="#">
 
-                    <div class="right bubble blue">128</div>
 
-                    <strong>Favorites</strong>
 
-                    <small>with lorem element</small>
 
-                </a>
 
-            </li>
 
-
 
-            <li data-image="http://lungo.tapquo.com/resources/icon@2x.png">
 
-                <strong>Javi Jimenez</strong>
 
-                <small>small</small>
 
-            </li>
 
-            <li class=" thumb" data-image="http://lungo.tapquo.com/resources/icon@2x.png">
 
-                <strong>Javi Jimenez</strong>
 
-                <small>small</small>
 
-            </li>
 
-            <li data-icon="user">
 
-                <strong>Javi Jimenez</strong>
 
-                <small>small</small>
 
-            </li>
 
-            <li class="thumb" data-icon="user">
 
-                <strong>Javi Jimenez</strong>
 
-                <small>small</small>
 
-            </li>
 
-
 
-        </ul>
 
-    </article>
 
-</aside>
 
-
 
-
 
-    <!-- Lungo dependencies -->
 
-    <script src="../src/lib/quo.debug.js"></script>
 
-    <!--
 
-    <script src="../../release/lungo.js"></script>
 
-    -->
 
-    <script src="../src/Lungo.js"></script>
 
-    <script src="../src/Lungo.Init.js"></script>
 
-    <script src="../src/Lungo.Core.js"></script>
 
-    <script src="../src/Lungo.Dom.js"></script>
 
-    <script src="../src/Lungo.Service.js"></script>
 
-    <script src="../src/Lungo.Constants.js"></script>
 
-    <script src="../src/Lungo.Events.js"></script>
 
-    <script src="../src/Lungo.Notification.js"></script>
 
-    <script src="../src/Lungo.Fallback.js"></script>
 
-
 
-    <script src="../src/router/Lungo.Router.js"></script>
 
-    <script src="../src/router/Lungo.Router.History.js" ></script>
 
-
 
-    <script src="../src/view/Lungo.View.Article.js" ></script>
 
-    <script src="../src/view/Lungo.View.Aside.js" ></script>
 
-
 
-    <script src="../src/element/Lungo.Element.Cache.js"></script>
 
-    <script src="../src/element/Lungo.Element.Carousel.js"></script>
 
-    <script src="../src/element/Lungo.Element.Count.js"></script>
 
-    <script src="../src/element/Lungo.Element.Loading.js"></script>
 
-    <script src="../src/element/Lungo.Element.Progress.js"></script>
 
-    <script src="../src/element/Lungo.Element.Pull.js"></script>
 
-
 
-    <script src="../src/data/Lungo.Data.Cache.js"></script>
 
-    <script src="../src/data/Lungo.Data.Sql.js"></script>
 
-    <script src="../src/data/Lungo.Data.Storage.js"></script>
 
-
 
-    <script src="../src/attributes/Lungo.Attributes.Data.js"></script>
 
-
 
-    <script src="../src/boot/Lungo.Boot.Resources.js" ></script>
 
-    <script src="../src/boot/Lungo.Boot.Stats.js" ></script>
 
-    <script src="../src/boot/Lungo.Boot.Layout.js"></script>
 
-    <script src="../src/boot/Lungo.Boot.Events.js"></script>
 
-    <script src="../src/boot/Lungo.Boot.Data.js"></script>
 
-    <script src="../src/boot/Lungo.Boot.Section.js"></script>
 
-    <script src="../src/boot/Lungo.Boot.Article.js"></script>
 
-
 
-    <!-- LungoJS - Sandbox App -->
 
-    <script>
 
-        Lungo.init();
 
-
 
-        Lungo.ready(function() {
 
-            // Lungo.View.Aside.show('features');
 
-        });
 
-
 
-        Lungo.Element.count('#bb', 29);
 
-        setTimeout(function(){
 
-            Lungo.Element.count('#bb', 0);
 
-        }, 1000);
 
-
 
-        setTimeout(function(){
 
-            Lungo.Element.progress('#kaka', 70);
 
-        }, 300);
 
-
 
-        setTimeout(function(){
 
-            Lungo.Element.loading('#cargador', "black");
 
-        }, 300);
 
-
 
-
 
-        setTimeout(function(){
 
-            Lungo.Element.loading('#cargador', null);
 
-        }, 1300);
 
-    </script>
 
-</body>
 
-</html>

+ 8 - 7
src/element/Lungo.Element.Carousel.js
Datei anzeigen 

@@ -95,16 +95,16 @@ Lungo.Element.Carousel = function(element, callback) {
 
         window.addEventListener('resize', _setup, false);
 
     };
 
 
-    var _touchStart = function(e) {
 
+    var _touchStart = function(event) {
 
         _instance.start = {
 
-            pageX: e.touches[0].pageX,
 
-            pageY: e.touches[0].pageY,
 
+            pageX: event.touches[0].pageX,
 
+            pageY: event.touches[0].pageY,
 
             time: Number(new Date())
 
         };
 
         _instance.isScrolling = undefined;
 
         _instance.deltaX = 0;
 
         _instance.element.style.MozTransitionDuration = _instance.element.style.webkitTransitionDuration = 0;
 
-        e.stopPropagation();
 
+        event.stopPropagation();
 
     };
 
 
     var _touchMove = function(e) {
 
@@ -143,9 +143,10 @@ Lungo.Element.Carousel = function(element, callback) {
 
         e.stopPropagation();
 
     };
 
 
-    var _transitionEnd = function(e) {
 
-        if(_instance.callback != undefined)
 
-            _instance.callback(e, (_instance.index + 1), _instance.slides[this.index]);
 
+    var _transitionEnd = function(event) {
 
+        if(_instance.callback) {
 
+            _instance.callback.apply(_instance.callback, [_instance.index, _instance.slides[_instance.index]]);
 
+        }
 
     };
 
 
     _setup();