mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-09-02 09:33:25 +02:00
Code Issues Releases Wiki Activity

Transform to javascript object

Browse Source
This commit is contained in:
Luis
2017-02-11 16:25:46 +01:00
parent df06b6b13f
commit b71550d954
7 changed files with 632 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
demos/classes.html
View File

@@ -3,39 +3,39 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Tutorial: Classes</title> <title>WebSlides Tutorial: Classes</title>
<meta name="description" content="WebSlides Cheat Sheet. A quick reference guide for beginners. This tutorial contains hundreds of HTML/CSS examples."> <meta name="description" content="WebSlides Cheat Sheet. A quick reference guide for beginners. This tutorial contains hundreds of HTML/CSS examples.">
<!-- URL CANONICAL --> <!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> --> <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors --> <!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) --> <!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) --> <!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK --> <!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink" /> <!-- YOUR URL/PERMALINK --> <meta property="og:url" content="http://your-url.com/permalink" /> <!-- YOUR URL/PERMALINK -->
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
@@ -43,7 +43,7 @@
<meta property="og:description" content="A quick reference guide. This tutorial contains hundreds of HTML/CSS examples."> <!-- EDIT --> <meta property="og:description" content="A quick reference guide. This tutorial contains hundreds of HTML/CSS examples."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:23:46"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:23:46"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER --> <!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="WebSlides Documentation: Classes"> <!-- EDIT --> <meta name="twitter:title" content="WebSlides Documentation: Classes"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides Cheat Sheet.This tutorial contains hundreds of HTML/CSS examples."> <!-- EDIT --> <meta name="twitter:description" content="WebSlides Cheat Sheet.This tutorial contains hundreds of HTML/CSS examples."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT --> <meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS --> <!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png"> <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -60,7 +60,7 @@
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png"> <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png"> <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android --> <!-- Android -->
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333"> <meta name="theme-color" content="#333333">
@@ -90,16 +90,16 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">
<article id="webslides"> <article id="webslides">
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px - <div class="wrap"> = container 1200px
--> -->
<section class="bg-black-blue aligncenter"> <section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
<!--.wrap = container 1200px with fadein animation --> <!--.wrap = container 1200px with fadein animation -->
@@ -1928,17 +1928,20 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script> <script src="../static/js/webslides.js"></script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) --> <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script> <script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body> </body>
</html> </html>

69
demos/components.html
View File

@@ -3,39 +3,39 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Documentation: Components</title> <title>WebSlides Documentation: Components</title>
<meta name="description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <meta name="description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples.">
<!-- URL CANONICAL --> <!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> --> <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- CSS Base -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/base.css"> <link rel="stylesheet" type='text/css' media='all' href="../static/css/base.css">
<!-- CSS Colors --> <!-- CSS Colors -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/colors.css"> <link rel="stylesheet" type='text/css' media='all' href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) --> <!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css"> <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) --> <!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK --> <!-- FACEBOOK -->
<meta property="og:url" content="/" /> <meta property="og:url" content="/" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
@@ -43,7 +43,7 @@
<meta property="og:description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <!-- EDIT --> <meta property="og:description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:25:31"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:25:31"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER --> <!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="WebSlides Components"> <!-- EDIT --> <meta name="twitter:title" content="WebSlides Components"> <!-- EDIT -->
<meta name="twitter:description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <!-- EDIT --> <meta name="twitter:description" content="Learn WebSlides in simple steps starting from basic to advanced concepts with examples."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT --> <meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS --> <!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png"> <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -60,7 +60,7 @@
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png"> <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png"> <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android --> <!-- Android -->
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333"> <meta name="theme-color" content="#333333">
@@ -90,16 +90,16 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">
<article id="webslides"> <article id="webslides">
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px - <div class="wrap"> = container 1200px
--> -->
<section class="bg-black-blue aligncenter"> <section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
@@ -303,7 +303,7 @@
<!--.wrap o <nav> = container 1200px --> <!--.wrap o <nav> = container 1200px -->
<div class="wrap"> <div class="wrap">
<p> <p>
<span class="alignleft"><a href="https://google.com" title="Google"><img src="../static/images/logos/google.svg" alt="Google"></a></span> <span class="alignleft"><a href="https://google.com" title="Google"><img src="../static/images/logos/google.svg" alt="Google"></a></span>
<span class="alignright"> <span class="alignright">
<a href="#" title="Twitter"> <a href="#" title="Twitter">
<svg class="fa-twitter"> <svg class="fa-twitter">
@@ -1984,7 +1984,7 @@
<li> Founded <li> Founded
<span>2040</span> <span>2040</span>
</li> </li>
<li> <li>
<span>120+</span> <span>120+</span>
Prebuilt Slides Prebuilt Slides
</li> </li>
@@ -2508,7 +2508,7 @@
<h2>Buttons</h2> <h2>Buttons</h2>
<p> <p>
<a href="#" class="button" title="Button"> <a href="#" class="button" title="Button">
.button</a> .button</a>
<a href="#" class="button" title="Button"> <a href="#" class="button" title="Button">
<svg class="fa-github"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
@@ -2527,7 +2527,7 @@
<p><code>a.badge-ios</code> and <code>a.badge-android</code></p> <p><code>a.badge-ios</code> and <code>a.badge-android</code></p>
<p> <p>
<a href="#" class="badge-ios" title="Download iOS App"> <a href="#" class="badge-ios" title="Download iOS App">
iOS App</a> iOS App</a>
<a href="#" class="badge-android" title="Download Android App"> <a href="#" class="badge-android" title="Download Android App">
Android App</a> Android App</a>
</p> </p>
@@ -2817,7 +2817,7 @@
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3>Responsive Videos</h3>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code></p>
@@ -2842,7 +2842,7 @@
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="fullscreen"> <section class="fullscreen">
<!-- Fullscreen Video --> <!-- Fullscreen Video -->
@@ -2904,7 +2904,7 @@
<div class="wrap"> <div class="wrap">
<h2>Transparent Logos</h2> <h2>Transparent Logos</h2>
<p> <p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners. Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p> </p>
<hr> <hr>
<ul class="flexblock blink"> <ul class="flexblock blink">
@@ -2935,8 +2935,8 @@
<li class="bg-blue"> <li class="bg-blue">
<a href="" title="Block Link = .blink"> <a href="" title="Block Link = .blink">
<div> <div>
<img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix"> <img class="whitelogo" src="../static/images/logos/netflix.svg" alt="Netflix">
<p><code>img.whitelogo</code></p> <p><code>img.whitelogo</code></p>
</div> </div>
</a> </a>
</li> </li>
@@ -3001,7 +3001,7 @@
</div> </div>
<!-- end .grid--> <!-- end .grid-->
</div> </div>
<!-- end .wrap--> <!-- end .wrap-->
</section> </section>
<section> <section>
<div class="wrap"> <div class="wrap">
@@ -3084,7 +3084,7 @@
<li> <li>
<a href="https://github.com/VincentGarreau/particles.js" title="particles.js"> <a href="https://github.com/VincentGarreau/particles.js" title="particles.js">
<h2>particles.js</h2> <h2>particles.js</h2>
A lightweight .js library for creating particles. A lightweight .js library for creating particles.
</a> </a>
</li> </li>
<li> <li>
@@ -3121,17 +3121,20 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script> <script src="../static/js/webslides.js"></script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) --> <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script> <script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body> </body>
</html> </html>

51
demos/keynote.html
View File

@@ -3,39 +3,39 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Keynote: Make a Keynote presentation using HTML</title> <title>WebSlides Keynote: Make a Keynote presentation using HTML</title>
<meta name="description" content="WebSlides is the easiest way to make HTML presentations. Just essential features, clean code, and lovely CSS."> <meta name="description" content="WebSlides is the easiest way to make HTML presentations. Just essential features, clean code, and lovely CSS.">
<!-- URL CANONICAL --> <!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> --> <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors --> <!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) --> <!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) --> <!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK --> <!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT --> <meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<meta property="og:type" content="article"> <meta property="og:type" content="article">
@@ -43,7 +43,7 @@
<meta property="og:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT --> <meta property="og:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:32:14"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:32:14"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER --> <!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="Make a Keynote presentation using HTML"> <!-- EDIT --> <meta name="twitter:title" content="Make a Keynote presentation using HTML"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT --> <meta name="twitter:description" content="WebSlides is the easiest way to make HTML presentations. 120+ free slides ready to use."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT --> <meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS --> <!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png"> <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -60,7 +60,7 @@
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png"> <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png"> <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android --> <!-- Android -->
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333"> <meta name="theme-color" content="#333333">
@@ -90,16 +90,16 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">
<article id="webslides"> <article id="webslides">
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px - <div class="wrap"> = container 1200px
--> -->
<section class="bg-apple aligncenter"> <section class="bg-apple aligncenter">
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
<div class="wrap"> <div class="wrap">
@@ -473,7 +473,7 @@
<div class="wrap"> <div class="wrap">
<div class="content-right"> <div class="content-right">
<h2> <h2>
Redesigning Redesigning
<svg class="fa-apple"> <svg class="fa-apple">
<use xlink:href="#fa-apple"></use> <use xlink:href="#fa-apple"></use>
</svg> </svg>
@@ -530,7 +530,7 @@
<use xlink:href="#fa-globe"></use> <use xlink:href="#fa-globe"></use>
</svg> </svg>
<h2>Works with all major banks</h2> <h2>Works with all major banks</h2>
Apple Pay is accepted in restaurants, hotels... Apple Pay is accepted in restaurants, hotels...
</div> </div>
</li> </li>
<li> <li>
@@ -739,7 +739,7 @@
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3>Responsive Videos</h3>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code></p>
@@ -838,17 +838,20 @@
<p><a href="https://twitter.com/webslides" title="@jlantunez on Twitter">@jlantunez</a></p> <p><a href="https://twitter.com/webslides" title="@jlantunez on Twitter">@jlantunez</a></p>
<p class="text-symbols">* * *</p> <p class="text-symbols">* * *</p>
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script> <script src="../static/js/webslides.js"></script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) --> <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script> <script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body> </body>
</html> </html>

58
demos/landings.html
View File

@@ -3,39 +3,39 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Landings: Create your web presence easily</title> <title>WebSlides Landings: Create your web presence easily</title>
<meta name="description" content="WebSlides is the easiest way to create HTML presentations and landings. 120+ free slides ready to use."> <meta name="description" content="WebSlides is the easiest way to create HTML presentations and landings. 120+ free slides ready to use.">
<!-- URL CANONICAL --> <!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> --> <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors --> <!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) --> <!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) --> <!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK --> <!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT --> <meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<meta property="og:type" content="article"> <meta property="og:type" content="article">
@@ -43,7 +43,7 @@
<meta property="og:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT --> <meta property="og:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T16:54:27"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T16:54:27"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER --> <!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="WebSlides Landings: Create your web presence easily"> <!-- EDIT --> <meta name="twitter:title" content="WebSlides Landings: Create your web presence easily"> <!-- EDIT -->
<meta name="twitter:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT --> <meta name="twitter:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT --> <meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS --> <!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png"> <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -60,7 +60,7 @@
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png"> <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png"> <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android --> <!-- Android -->
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333"> <meta name="theme-color" content="#333333">
@@ -92,13 +92,13 @@
</header> </header>
<main role="main"> <main role="main">
<article id="webslides"> <article id="webslides">
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px; - <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
--> -->
<section class="bg-purple aligncenter"> <section class="bg-purple aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
@@ -371,7 +371,7 @@
<div class="alignright size-50 bg-trans-dark"> <div class="alignright size-50 bg-trans-dark">
<p class="text-subtitle text-serif">New in London</p> <p class="text-subtitle text-serif">New in London</p>
<h3><strong>Hotel Daenerys</strong></h3> <h3><strong>Hotel Daenerys</strong></h3>
<p>The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.</p> <p>The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.</p>
<p class="aligncenter"><a class="button" href="#">More info</a></p> <p class="aligncenter"><a class="button" href="#">More info</a></p>
</div> </div>
</div> </div>
@@ -1144,7 +1144,7 @@
<li> Founded <li> Founded
<span>1986</span> <span>1986</span>
</li> </li>
<li> <li>
<span>120+</span> <span>120+</span>
Prebuilt Slides Prebuilt Slides
</li> </li>
@@ -1518,7 +1518,7 @@
<h2>Buttons</h2> <h2>Buttons</h2>
<p> <p>
<a href="#" class="button" title="Button"> <a href="#" class="button" title="Button">
.button</a> .button</a>
<a href="#" class="button" title="Button"> <a href="#" class="button" title="Button">
<svg class="fa-github"> <svg class="fa-github">
<use xlink:href="#fa-github"></use> <use xlink:href="#fa-github"></use>
@@ -1537,7 +1537,7 @@
<p><code>a.badge-ios</code> and <code>a.badge-android</code></p> <p><code>a.badge-ios</code> and <code>a.badge-android</code></p>
<p> <p>
<a href="#" class="badge-ios" title="Download iOS App"> <a href="#" class="badge-ios" title="Download iOS App">
iOS App</a> iOS App</a>
<a href="#" class="badge-android" title="Download Android App"> <a href="#" class="badge-android" title="Download Android App">
Android App</a> Android App</a>
</p> </p>
@@ -1694,7 +1694,7 @@
<div class="wrap"> <div class="wrap">
<h2>Transparent Logos</h2> <h2>Transparent Logos</h2>
<p> <p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners. Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p> </p>
<hr> <hr>
<ul class="flexblock"> <ul class="flexblock">
@@ -1718,7 +1718,7 @@
</li> </li>
<li class="bg-green"> <li class="bg-green">
<div> <div>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google"> <img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<p><code>img.whitelogo</code></p> <p><code>img.whitelogo</code></p>
</div> </div>
</li> </li>
@@ -1811,7 +1811,7 @@
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3>Responsive Videos</h3>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code></p>
@@ -1836,7 +1836,7 @@
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="fullscreen"> <section class="fullscreen">
<!-- Fullscreen Video --> <!-- Fullscreen Video -->
@@ -1913,16 +1913,20 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script> <script src="../static/js/webslides.js"></script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) --> <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script> <script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body> </body>
</html> </html>

65
demos/portfolios.html
View File

@@ -3,39 +3,39 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Portfolios: Showcase your work</title> <title>WebSlides Portfolios: Showcase your work</title>
<meta name="description" content="WebSlides is the easiest way to make HTML presentations and portfolios. It's simple, fast, and free."> <meta name="description" content="WebSlides is the easiest way to make HTML presentations and portfolios. It's simple, fast, and free.">
<!-- URL CANONICAL --> <!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> --> <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors --> <!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) --> <!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) --> <!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK --> <!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT --> <meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<meta property="og:type" content="article"> <meta property="og:type" content="article">
@@ -43,7 +43,7 @@
<meta property="og:description" content="The easiest way to create a portfolio website. It is free, fast, and fun."> <!-- EDIT --> <meta property="og:description" content="The easiest way to create a portfolio website. It is free, fast, and fun."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:26:50"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:26:50"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT --> <meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER --> <!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,16 +51,16 @@
<meta name="twitter:title" content="Create your portfolio with WebSlides"> <!-- EDIT --> <meta name="twitter:title" content="Create your portfolio with WebSlides"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is the easiest way to create a portfolio website. 120+ slides ready to use."> <!-- EDIT --> <meta name="twitter:description" content="WebSlides is the easiest way to create a portfolio website. 120+ slides ready to use."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT --> <meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS --> <!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png"> <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png"> <link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png"> <link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png"> <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png"> <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android --> <!-- Android -->
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333"> <meta name="theme-color" content="#333333">
@@ -90,16 +90,16 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">
<article id="webslides"> <article id="webslides">
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px - <div class="wrap"> = container 1200px
--> -->
<section class="bg-primary"> <section class="bg-primary">
<span class="background dark" style="background-image:url('https://source.unsplash.com/oHrodCLNnU8/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/oHrodCLNnU8/')"></span>
<div class="wrap aligncenter"> <div class="wrap aligncenter">
@@ -358,7 +358,7 @@
<div class="wrap"> <div class="wrap">
<div class="content-right"> <div class="content-right">
<h2> <h2>
Redesigning Redesigning
<svg class="fa-apple"> <svg class="fa-apple">
<use xlink:href="#fa-apple"></use> <use xlink:href="#fa-apple"></use>
</svg> </svg>
@@ -458,7 +458,7 @@
<li> Founded <li> Founded
<span>1976</span> <span>1976</span>
</li> </li>
<li> <li>
<span>120+</span> <span>120+</span>
Prebuilt Slides Prebuilt Slides
</li> </li>
@@ -1051,7 +1051,7 @@
</h2> </h2>
<p>.card-50.bg-white</p> <p>.card-50.bg-white</p>
<p> <p>
Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro. Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro.
</p> </p>
<ul class="description"> <ul class="description">
<li> <li>
@@ -1192,7 +1192,7 @@
<use xlink:href="#fa-globe"></use> <use xlink:href="#fa-globe"></use>
</svg> </svg>
<h2>Works with all major banks</h2> <h2>Works with all major banks</h2>
Apple Pay is accepted in restaurants, hotels... Apple Pay is accepted in restaurants, hotels...
</div> </div>
</li> </li>
<li> <li>
@@ -1451,7 +1451,7 @@
<div class="wrap"> <div class="wrap">
<h2>Transparent Logos</h2> <h2>Transparent Logos</h2>
<p> <p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners. Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p> </p>
<hr> <hr>
<ul class="flexblock"> <ul class="flexblock">
@@ -1475,8 +1475,8 @@
</li> </li>
<li class="bg-green"> <li class="bg-green">
<div> <div>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google"> <img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<code>img.whitelogo</code> <code>img.whitelogo</code>
</div> </div>
</li> </li>
</ul> </ul>
@@ -1722,7 +1722,7 @@
<div class="content-left"> <div class="content-left">
<h3>Responsive Videos</h3> <h3>Responsive Videos</h3>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt; &lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt; &lt;/iframe&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p><code>.embed</code></p> <p><code>.embed</code></p>
@@ -1747,7 +1747,7 @@
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section class="fullscreen"> <section class="fullscreen">
<!-- Fullscreen Video --> <!-- Fullscreen Video -->
@@ -1857,13 +1857,16 @@
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script> <script src="../static/js/webslides.js"></script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) --> <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script> <script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body> </body>
</html> </html>

54
demos/why-webslides.html
View File

@@ -3,39 +3,39 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides https://github.com/jlantunez/webslides
Thanks, Thanks,
@jlantunez. @jlantunez.
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides: Why WebSlides is so inspiring?</title> <title>WebSlides: Why WebSlides is so inspiring?</title>
<meta name="description" content="WebSlides is about good karma. Create your own HTML presentation instantly. Just the esentials."> <meta name="description" content="WebSlides is about good karma. Create your own HTML presentation instantly. Just the esentials.">
<!-- URL CANONICAL --> <!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> --> <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors --> <!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) --> <!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css"> <link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) --> <!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK --> <!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT --> <meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<meta property="og:type" content="article"> <meta property="og:type" content="article">
@@ -45,7 +45,7 @@
<meta property="og:image" content="https://webslides.tv/static/images/share-karma.jpg" > <!-- EDIT --> <meta property="og:image" content="https://webslides.tv/static/images/share-karma.jpg" > <!-- EDIT -->
<meta property="og:image:width" content="800"> <meta property="og:image:width" content="800">
<meta property="og:image:height" content="429"> <meta property="og:image:height" content="429">
<!-- TWITTER --> <!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT --> <meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -53,7 +53,7 @@
<meta name="twitter:title" content="Why WebSlides? Good karma"> <!-- EDIT --> <meta name="twitter:title" content="Why WebSlides? Good karma"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT --> <meta name="twitter:description" content="WebSlides is a very effective way to engage young audiences, customers, teams..."> <!-- EDIT -->
<meta name="twitter:image" content="https://webslides.tv/static/images/share-karma.jpg"> <!-- EDIT --> <meta name="twitter:image" content="https://webslides.tv/static/images/share-karma.jpg"> <!-- EDIT -->
<!-- FAVICONS --> <!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png"> <link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png"> <link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -62,10 +62,11 @@
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png"> <link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png"> <link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android --> <!-- Android -->
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333"> <meta name="theme-color" content="#333333">
</head> </head>
<body> <body>
<header role="banner"> <header role="banner">
@@ -92,22 +93,22 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">
<article id="webslides" class="vertical"> <article id="webslides" class="vertical">
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px; - <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
--> -->
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
<div class="wrap aligncenter"> <div class="wrap aligncenter">
<h1 class="text-landing">Good Karma</h1> <h1 class="text-landing">Good Karma</h1>
<p class="text-intro"> <p class="text-intro">
<strong><a href="http://webslides.tv/">WebSlides</a></strong> &mdash; HTML presentations made easy. <br> <strong><a href="http://webslides.tv/">WebSlides</a></strong> &mdash; HTML presentations made easy. <br>
Hypertext and beauty as narrative elements. Hypertext and beauty as narrative elements.
</p> </p>
<nav> <nav>
@@ -126,7 +127,7 @@
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
<div class="wrap fadeInUp"> <div class="wrap fadeInUp">
<h1> <h1>
Everyone Everyone
<svg class="fa-heart-o"> <svg class="fa-heart-o">
<use xlink:href="#fa-heart-o"></use> <use xlink:href="#fa-heart-o"></use>
</svg> </svg>
@@ -309,7 +310,7 @@
<p>The best way to inspire with your content is to connect on a personal level:</p> <p>The best way to inspire with your content is to connect on a personal level:</p>
<ul class="description"> <ul class="description">
<li> <li>
<strong>Animations:</strong> <a href="https://github.com/daneden/animate.css/" title="Animate.css"> <strong>Animations:</strong> <a href="https://github.com/daneden/animate.css/" title="Animate.css">
Animate.css</a>. Animate.css</a>.
</li> </li>
<li> <li>
@@ -333,17 +334,20 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- jQuery (required for slides to work) --> <!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script> <script src="../static/js/webslides.js"></script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) --> <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script> <script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body> </body>
</html> </html>

805
static/js/webslides.js
View File

@@ -9,137 +9,343 @@ Based on SimpleSlides, by Jenn Schiffer:
https://github.com/jennschiffer/SimpleSlides https://github.com/jennschiffer/SimpleSlides
==================================================================== */ ==================================================================== */
jQuery(document).ready(function($){ jQuery.fn.webslides = function(options) {
var ID = { var obj = {};
slideshow : 'webslides',
slide : 'slide',
counter : 'counter',
navigation : 'navigation',
next : 'next',
previous : 'previous',
current : 'current',
verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding
};
var easing = 'swing';
var slideOffset = 50; // minimun number of pixels for sliding
var verticalDelay = 150; // to avoid 2 slides in a row
var wheelDetail = -3; // how far the wheel turned for Firefox
var wheelDelta = 150; // how far the wheel turned for Chrome
var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
var $slideshow = jQuery('#' + ID.slideshow), // Private vars
$navigation = jQuery('<div>').attr('id','navigation'), var easing = 'swing';
$slides = $slideshow.children('section').addClass(ID.slide), var slideOffset = 50; // minimun number of pixels for sliding
$currentSlide, var verticalDelay = 150; // to avoid 2 slides in a row
$firstSlide = $slides.first(), var wheelDetail = -3; // how far the wheel turned for Firefox
$lastSlide = $slides.last(), var wheelDelta = 150; // how far the wheel turned for Chrome
$auxSlide = null; var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
var total = $slides.length; var $slideshow,
$navigation,
$slides,
$counter,
$next,
$previous,
$currentSlide,
$firstSlide,
$lastSlide,
$auxSlide = null,
slidePointer;
var labels = { var total = 0;
next : $slideshow.hasClass(ID.verticalClass)?'&darr;':'&rarr;',
previous : $slideshow.hasClass(ID.verticalClass)?'&uarr;':'&larr;', var labels = {};
separator : ' / '
}; /**
* Init function
* @param {Object} settings Plugin settings
* @param {string} id Container HTML ID
* @param {string} class Slide class
* @param {string} counter Counter container ID
* @param {string} navigation Navigation container ID
* @param {string} next Next HTML element ID
* @param {string} previous Previous HTML element ID
* @param {string} current Current HTML element ID
* @param {string} verticalClass Vertical class
*/
var init = function(_options) {
obj.settings = {
id : 'webslides',
class : 'slide',
counter : 'counter',
navigation : 'navigation',
next : 'next',
previous : 'previous',
current : 'current',
verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding
};
// Allow overriding the default config
$.extend( obj.settings, _options );
setup();
run();
initClickEvents();
initKeyEvents();
initMouseWheel();
initTouchEvents();
initHash();
}
var setup = function() {
$slideshow = jQuery('#' + obj.settings.id);
$navigation = jQuery('<div>').attr('id', obj.settings.navigation);
$slides = $slideshow.children('section').addClass(obj.settings.class);
$firstSlide = $slides.first();
$lastSlide = $slides.last();
total = $slides.length;
labels = {
next : $slideshow.hasClass(obj.settings.verticalClass)?'&darr;':'&rarr;',
previous : $slideshow.hasClass(obj.settings.verticalClass)?'&uarr;':'&larr;',
separator : ' / '
};
// make sure the last slide doesn't page break while printing.
jQuery('head').append( '<style> .slide:nth-child(' + total + ') { page-break-after: auto }</style>' );
// remove non-section children (like html comments which wp wraps in <p> tags)
$slideshow.children().not('section').remove();
// add navigational arrows and counter
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',obj.settings.previous).html(labels.previous));
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',obj.settings.next).html(labels.next));
$slideshow.append($navigation);
$slideshow.append(jQuery('<span>').attr('id',obj.settings.counter));
$counter = jQuery('#'+obj.settings.counter),
$next = jQuery('#'+obj.settings.next),
$previous = jQuery('#'+obj.settings.previous);
$navigation.append($counter);
$slideshow.data('moving', false);
};
/**
* Starts sliders
*/
var run = function() {
// Initially hide all slides
$slides.hide();
// The first slide is number first, last is slides length
slidePointer = {
current : 1,
last : $slides.length
};
var slideState = parseInt(document.location.hash.replace('#slide=', ''));
if ( slideState && (slideState > 0 && slideState <= $slides.length )) {
// if slide= hash state is given and valid, go to that slide
obj.goToSlide(slideState);
}
else {
// The first slide is the first slide, so make visible and set the counter...
$currentSlide = $firstSlide.show().addClass(obj.settings.current);
updateCounter();
}
};
/**
* Init click events
*/
var initClickEvents = function() {
// "next" arrow clicked => next slide
$next.click( function(e){
e.preventDefault();
obj.nextSlide();
});
// "previous" arrow clicked => previous slide
$previous.click( function(e){
e.preventDefault();
obj.previousSlide();
});
}
// make sure the last slide doesn't page break while printing. /**
jQuery('head').append( '<style> .slide:nth-child(' + total + ') { page-break-after: auto }</style>' ); * Init keypress events
*/
// remove non-section children (like html comments which wp wraps in <p> tags) var initKeyEvents = function() {
$slideshow.children().not('section').remove(); // Add keyboard shortcuts for changing slides
jQuery(document).keydown(function(e){
// add navigational arrows and counter if (!$slideshow.hasClass(obj.settings.verticalClass) || isMobile) {
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',ID.previous).html(labels.previous)); $slideshow.data('iswheel', false);
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',ID.next).html(labels.next)); if (e.which == 39 || e.which == 32) {
$slideshow.append($navigation); // right key pressed => next slide
$slideshow.append(jQuery('<span>').attr('id',ID.counter)); obj.nextSlide();
return false;
var $counter = jQuery('#'+ID.counter),
$next = jQuery('#'+ID.next),
$previous = jQuery('#'+ID.previous);
$navigation.append($counter);
/*** FUNCTIONS ***/
var updateCounter = function() {
// updates the counter
$counter.text(slidePointer.current + labels.separator + slidePointer.last);
};
var updateURL = function() {
// updates slide state
var currentURL = document.location.toString();
if (currentURL.indexOf('#') != 1){
currentURL = currentURL.substr(0,currentURL.indexOf('#'));
} }
else if (e.which == 37) {
history.pushState(null, null, '#slide='+ slidePointer.current ); // left or l key pressed => previous slide
}; obj.previousSlide();
return false;
var hideCurrentSlide = function() {
// hide the current slide
if ( $currentSlide ) {
$currentSlide.hide().removeClass(ID.current);
} }
}; }
});
$slideshow.data('moving', false); // Add keyboard shortcuts for changing slides
var nextSlide = function() { jQuery(document).keydown(function(e){
var nextSlide; if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) {
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical $slideshow.data('iswheel', false);
if ($slideshow.data('moving')) return; if (e.which == 40 || e.which == 32) {
$slideshow.data('moving', true); // right key pressed => next slide
jQuery('html').css({overflow: 'hidden'}); obj.nextSlide();
return false;
nextSlide = $currentSlide.next(); }
slidePointer.current = ((slidePointer.current+1)%total); else if (e.which == 38) {
if (slidePointer.current === 0) slidePointer.current = total; // left or l key pressed => previous slide
obj.previousSlide();
// show next slide return false;
nextSlide.show().addClass(ID.current); }
// scroll to next slide }
var animated = false; });
jQuery('html, body').animate({scrollTop: nextSlide.offset().top}, 500, easing, function() { }
if (!animated) {
$currentSlide.hide().removeClass(ID.current);
$currentSlide.siblings('.slide').last().after($currentSlide);
$currentSlide = nextSlide;
// update counter
updateCounter();
// update url
updateURL();
// fire slide event
fireSlideEvent();
jQuery('html').css({overflow: 'auto'});
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
}
animated = true;
});
/**
* Init mouse wheel
*/
var initMouseWheel = function() {
// Mouse wheel
jQuery(window).bind('mousewheel DOMMouseScroll', function(event){
$slideshow.data('iswheel', true);
if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) {
if (event.originalEvent.wheelDelta > wheelDelta || event.originalEvent.detail <= wheelDetail) {
// Scroll up
obj.previousSlide();
} else if (event.originalEvent.wheelDelta < -wheelDelta || event.originalEvent.detail >= -wheelDetail) {
// scroll down
obj.nextSlide();
}
}
});
}
} else { // Is landscape /**
jQuery("html, body").animate({ scrollTop: 0 }, 0); * Init touch events
// hide current slide */
hideCurrentSlide(); var initTouchEvents = function() {
// Touch
jQuery(window).on("touchstart", function(ev) {
var e = ev.originalEvent;
$slideshow.data('touchYStart', e.touches[0].screenY);
$slideshow.data('touchXStart', e.touches[0].screenX);
$slideshow.data('touchYEnd', e.touches[0].screenY);
$slideshow.data('touchXEnd', e.touches[0].screenX);
});
jQuery(window).on("touchmove", function(ev) {
var e = ev.originalEvent;
$slideshow.data('touchYEnd', e.touches[0].screenY);
$slideshow.data('touchXEnd', e.touches[0].screenX);
});
jQuery(window).on("touchend", function(ev) {
$slideshow.data('iswheel', false);
var e = ev.originalEvent;
var diffX = $slideshow.data('touchXStart') - $slideshow.data('touchXEnd');
var diffY = $slideshow.data('touchYStart') - $slideshow.data('touchYEnd');
if ((!$slideshow.hasClass(obj.settings.verticalClass) || isMobile) && Math.abs(diffX) > Math.abs(diffY)) {
if(diffX < -slideOffset) {
previousSlide();
// Scroll up
} else if(diffX > slideOffset) {
// scroll down
nextSlide();
}
}
});
}
// get the next slide /**
nextSlide = $currentSlide.next(); * Init hash
*/
var initHash = function() {
/**
* Bind the event HashChange when the prev/next history button was clicked
*/
jQuery(window).bind("hashchange", function () {
if (hasHash()) {
goToSlideIfSlideHashChange();
} else {
window.location.reload();
}
});
nextSlide.show().addClass(ID.current); function hasHash() {
return window.location.hash ? true : false;
}
function goToSlideIfSlideHashChange() {
var paramsArr = getArrayOfHashParams();
var slideObj = $.grep(paramsArr, function (e) {
return (e.key == "slide");
});
if (slideObj.length == 1) {
obj.goToSlide(slideObj[0].value);
}
}
function getArrayOfHashParams() {
var hash = window.location.hash.replace('#', '').split('&');
var paramsArr = new Array([]);
for (var i = 0; i < hash.length; i++) {
var itemArray = hash[i].split('=');
var action = new Object({});
action.key = itemArray[0];
action.value = itemArray[1];
paramsArr.push(action);
}
return paramsArr;
}
}
/*** FUNCTIONS ***/
/**
* Updates slider counter
*/
var updateCounter = function() {
// updates the counter
$counter.text(slidePointer.current + labels.separator + slidePointer.last);
};
/**
* Updates current URL with counter position
*/
var updateURL = function() {
// updates slide state
var currentURL = document.location.toString();
if (currentURL.indexOf('#') != 1){
currentURL = currentURL.substr(0,currentURL.indexOf('#'));
}
history.pushState(null, null, '#slide='+ slidePointer.current );
};
/**
* Hides current Slide
*/
var hideCurrentSlide = function() {
// hide the current slide
if ( $currentSlide ) {
$currentSlide.hide().removeClass(obj.settings.current);
}
};
/**
* Goes to next slide
*/
obj.nextSlide = function() {
var nextSlide;
if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return;
$slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'});
nextSlide = $currentSlide.next();
slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current === 0) slidePointer.current = total;
// show next slide
nextSlide.show().addClass(obj.settings.current);
// scroll to next slide
var animated = false;
jQuery('html, body').animate({scrollTop: nextSlide.offset().top}, 500, easing, function() {
if (!animated) {
$currentSlide.hide().removeClass(obj.settings.current);
$currentSlide.siblings('.slide').last().after($currentSlide); $currentSlide.siblings('.slide').last().after($currentSlide);
$currentSlide = nextSlide; $currentSlide = nextSlide;
slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current == 0) slidePointer.current = total;
// update counter // update counter
updateCounter(); updateCounter();
@@ -149,274 +355,163 @@ jQuery(document).ready(function($){
// fire slide event // fire slide event
fireSlideEvent(); fireSlideEvent();
jQuery('html').css({overflow: 'auto'});
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
} }
}; animated = true;
});
} else { // Is landscape
jQuery("html, body").animate({ scrollTop: 0 }, 0);
// hide current slide
hideCurrentSlide();
var previousSlide = function() { // get the next slide
var prevSlide; nextSlide = $currentSlide.next();
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return;
$slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'});
$currentSlide.before($currentSlide.siblings('.slide').last()); nextSlide.show().addClass(obj.settings.current);
$currentSlide.siblings('.slide').last().after($currentSlide);
$currentSlide = nextSlide;
slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current == 0) slidePointer.current = total;
prevSlide = $currentSlide.prev(); // update counter
updateCounter();
if (prevSlide.length === 0) return false; // update url
// show next slide updateURL();
prevSlide.show().addClass(ID.current);
// scroll to next slide
var animated = false;
jQuery('html, body').scrollTop($currentSlide.offset().top);
jQuery('html, body').animate({scrollTop: prevSlide.offset().top}, 500, easing, function() {
if (!animated) {
$currentSlide.hide().removeClass(ID.current);
$currentSlide = prevSlide;
// not the last slide => go to the next one and increment the counter // fire slide event
$currentSlide = prevSlide; fireSlideEvent();
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1); }
};
// update counter /**
updateCounter(); * Goes to previous slide
*/
obj.previousSlide = function() {
var prevSlide;
if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return;
$slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'});
// update url $currentSlide.before($currentSlide.siblings('.slide').last());
updateURL();
// fire slide event prevSlide = $currentSlide.prev();
fireSlideEvent();
jQuery('html').css({overflow: 'auto'}); if (prevSlide.length === 0) return false;
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0); // show next slide
} prevSlide.show().addClass(obj.settings.current);
animated = true; // scroll to next slide
}); var animated = false;
jQuery('html, body').scrollTop($currentSlide.offset().top);
jQuery('html, body').animate({scrollTop: prevSlide.offset().top}, 500, easing, function() {
if (!animated) {
$currentSlide.hide().removeClass(obj.settings.current);
$currentSlide = prevSlide;
// not the last slide => go to the next one and increment the counter
} else { // Is landscape
jQuery("html, body").animate({ scrollTop: 0 }, 0);
// hide current slide
hideCurrentSlide();
// get the previous slide
$currentSlide.before($currentSlide.siblings('.slide').last());
prevSlide = $currentSlide.prev();
prevSlide.show().addClass(ID.current);
$currentSlide = prevSlide; $currentSlide = prevSlide;
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1); slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
// update counter // update counter
updateCounter(); updateCounter();
// update URL // update url
updateURL(); updateURL();
// fire slide event // fire slide event
fireSlideEvent(); fireSlideEvent();
jQuery('html').css({overflow: 'auto'});
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
} }
}; animated = true;
var goToSlide = function(slideNumber) {
// hide current slide
hideCurrentSlide();
moveToSlide = slideNumber-1;
$currentSlide = $slides.eq(moveToSlide);
$currentSlide.show().addClass(ID.current);
jQuery('.slide:lt('+$currentSlide.index()+')').each(function() {
var $this = jQuery(this);
$this.siblings('.slide').last().after($this);
});
slidePointer.current = slideNumber;
// update counter
updateCounter();
};
var fireSlideEvent = function(slide) {
var slideEvent = new window.CustomEvent('slidechanged', {
detail: { slide: slide || $currentSlide }
});
window.dispatchEvent(slideEvent);
};
/*** INIT SLIDESHOW ***/
// Initially hide all slides
$slides.hide();
// The first slide is number first, last is slides length
var slidePointer = {
current : 1,
last : $slides.length
};
var slideState = parseInt(document.location.hash.replace('#slide=', ''));
if ( slideState && (slideState > 0 && slideState <= $slides.length )) {
// if slide= hash state is given and valid, go to that slide
goToSlide(slideState);
}
else {
// The first slide is the first slide, so make visible and set the counter...
$currentSlide = $firstSlide.show().addClass(ID.current);
updateCounter();
}
/*** EVENTS ***/
// "next" arrow clicked => next slide
$next.click( function(e){
e.preventDefault();
nextSlide();
}); });
// "previous" arrow clicked => previous slide } else { // Is landscape
$previous.click( function(e){ jQuery("html, body").animate({ scrollTop: 0 }, 0);
e.preventDefault(); // hide current slide
previousSlide(); hideCurrentSlide();
});
// Add keyboard shortcuts for changing slides // get the previous slide
jQuery(document).keydown(function(e){ $currentSlide.before($currentSlide.siblings('.slide').last());
if (!$slideshow.hasClass(ID.verticalClass) || isMobile) { prevSlide = $currentSlide.prev();
$slideshow.data('iswheel', false);
if (e.which == 39 || e.which == 32) {
// right key pressed => next slide
nextSlide();
return false;
}
else if (e.which == 37) {
// left or l key pressed => previous slide
previousSlide();
return false;
}
}
});
// Add keyboard shortcuts for changing slides prevSlide.show().addClass(obj.settings.current);
jQuery(document).keydown(function(e){ $currentSlide = prevSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
$slideshow.data('iswheel', false);
if (e.which == 40 || e.which == 32) {
// right key pressed => next slide
nextSlide();
return false;
}
else if (e.which == 38) {
// left or l key pressed => previous slide
previousSlide();
return false;
}
}
});
// update counter
updateCounter();
/** // update URL
* Bind the event HashChange when the prev/next history button was clicked updateURL();
*/
jQuery(window).bind("hashchange", function () {
if (hasHash()) {
goToSlideIfSlideHashChange();
} else {
window.location.reload();
}
});
function hasHash() { // fire slide event
return window.location.hash ? true : false; fireSlideEvent();
}
function goToSlideIfSlideHashChange() {
var paramsArr = getArrayOfHashParams();
var slideObj = $.grep(paramsArr, function (e) {
return (e.key == "slide");
});
if (slideObj.length == 1) {
goToSlide(slideObj[0].value);
}
}
function getArrayOfHashParams() {
var hash = window.location.hash.replace('#', '').split('&');
var paramsArr = new Array([]);
for (var i = 0; i < hash.length; i++) {
var itemArray = hash[i].split('=');
var action = new Object({});
action.key = itemArray[0];
action.value = itemArray[1];
paramsArr.push(action);
}
return paramsArr;
}
// Mouse wheel
jQuery(window).bind('mousewheel DOMMouseScroll', function(event){
$slideshow.data('iswheel', true);
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) {
if (event.originalEvent.wheelDelta > wheelDelta || event.originalEvent.detail <= wheelDetail) {
// Scroll up
previousSlide();
} else if (event.originalEvent.wheelDelta < -wheelDelta || event.originalEvent.detail >= -wheelDetail) {
// scroll down
nextSlide();
}
}
});
// Touch
jQuery(window).on("touchstart", function(ev) {
var e = ev.originalEvent;
$slideshow.data('touchYStart', e.touches[0].screenY);
$slideshow.data('touchXStart', e.touches[0].screenX);
$slideshow.data('touchYEnd', e.touches[0].screenY);
$slideshow.data('touchXEnd', e.touches[0].screenX);
});
jQuery(window).on("touchmove", function(ev) {
var e = ev.originalEvent;
$slideshow.data('touchYEnd', e.touches[0].screenY);
$slideshow.data('touchXEnd', e.touches[0].screenX);
});
jQuery(window).on("touchend", function(ev) {
$slideshow.data('iswheel', false);
var e = ev.originalEvent;
var diffX = $slideshow.data('touchXStart') - $slideshow.data('touchXEnd');
var diffY = $slideshow.data('touchYStart') - $slideshow.data('touchYEnd');
if ((!$slideshow.hasClass(ID.verticalClass) || isMobile) && Math.abs(diffX) > Math.abs(diffY)) {
if(diffX < -slideOffset) {
previousSlide();
// Scroll up
} else if(diffX > slideOffset) {
// scroll down
nextSlide();
}
}
});
// Tabs
jQuery('ul.tabs li').click(function(){
var $this = jQuery(this);
var tab_id = $this.attr('data-tab');
jQuery('ul.tabs li').removeClass('current');
jQuery('.tab-content').removeClass('current');
$this.addClass('current');
jQuery("#"+tab_id).addClass('current');
});
/* jQuery plugin */
$.WebSlides = function () {};
/* Public goToSlide */
$.WebSlides.goToSlide = goToSlide;
});
// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard
$(document).keypress(function(e) {
if(e.which == 13) {
$('body').toggleClass('baseline').css('height', $(document).height());
} }
};
/**
* Goes to a specific slide
*
* @param {number} slideNumber Where to go
*/
obj.goToSlide = function(slideNumber) {
// hide current slide
hideCurrentSlide();
moveToSlide = slideNumber-1;
$currentSlide = $slides.eq(moveToSlide);
$currentSlide.show().addClass(obj.settings.current);
jQuery('.slide:lt('+$currentSlide.index()+')').each(function() {
var $this = jQuery(this);
$this.siblings('.slide').last().after($this);
});
slidePointer.current = slideNumber;
// update counter
updateCounter();
};
/**
* Fires slide event
*/
var fireSlideEvent = function(slide) {
var slideEvent = new window.CustomEvent('slidechanged', {
detail: { slide: slide || $currentSlide }
});
window.dispatchEvent(slideEvent);
};
// Init plugin
init(options);
// Return same object
return obj;
}
// I don't know what it does
jQuery(document).ready(function($){
// Tabs
jQuery('ul.tabs li').click(function(){
var $this = jQuery(this);
var tab_id = $this.attr('data-tab');
jQuery('ul.tabs li').removeClass('current');
jQuery('.tab-content').removeClass('current');
$this.addClass('current');
jQuery("#"+tab_id).addClass('current');
}); });
});
// I don't know what it does
// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard
jQuery(document).keypress(function(e) {
if(e.which == 13) {
jQuery('body').toggleClass('baseline').css('height', $(document).height());
}
});