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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<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.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- 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">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink" /> <!-- YOUR URL/PERMALINK -->
<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:updated_time" content="2017-01-04T17:23:46"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -51,7 +51,7 @@
<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:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<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">
@@ -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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
@@ -90,16 +90,16 @@
</ul>
</nav>
</header>
<main role="main">
<article id="webslides">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
-->
<section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
<!--.wrap = container 1200px with fadein animation -->
@@ -1928,17 +1928,20 @@
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!--main-->
<!--main-->
<!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body>
</html>

69
demos/components.html
View File

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

51
demos/keynote.html
View File

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

58
demos/landings.html
View File

@@ -3,39 +3,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<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.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- 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">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<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:updated_time" content="2017-01-04T16:54:27"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<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: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 -->
<!-- FAVICONS -->
<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">
@@ -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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
@@ -92,13 +92,13 @@
</header>
<main role="main">
<article id="webslides">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
-->
<section class="bg-purple aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
<!--.wrap = container 1200px -->
@@ -371,7 +371,7 @@
<div class="alignright size-50 bg-trans-dark">
<p class="text-subtitle text-serif">New in London</p>
<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>
</div>
</div>
@@ -1144,7 +1144,7 @@
<li> Founded
<span>1986</span>
</li>
<li>
<li>
<span>120+</span>
Prebuilt Slides
</li>
@@ -1518,7 +1518,7 @@
<h2>Buttons</h2>
<p>
<a href="#" class="button" title="Button">
.button</a>
.button</a>
<a href="#" class="button" title="Button">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
@@ -1537,7 +1537,7 @@
<p><code>a.badge-ios</code> and <code>a.badge-android</code></p>
<p>
<a href="#" class="badge-ios" title="Download iOS App">
iOS App</a>
iOS App</a>
<a href="#" class="badge-android" title="Download Android App">
Android App</a>
</p>
@@ -1694,7 +1694,7 @@
<div class="wrap">
<h2>Transparent Logos</h2>
<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>
<hr>
<ul class="flexblock">
@@ -1718,7 +1718,7 @@
</li>
<li class="bg-green">
<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>
</div>
</li>
@@ -1811,7 +1811,7 @@
<div class="content-left">
<h3>Responsive Videos</h3>
<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;/div&gt;</pre>
<p><code>.embed</code></p>
@@ -1836,7 +1836,7 @@
</div>
<!-- .end .embed -->
</div>
<!-- .end .wrap -->
<!-- .end .wrap -->
</section>
<section class="fullscreen">
<!-- Fullscreen Video -->
@@ -1913,16 +1913,20 @@
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!--main-->
<!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body>
</html>

65
demos/portfolios.html
View File

@@ -3,39 +3,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<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.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- 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">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<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:updated_time" content="2017-01-04T17:26:50"> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<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: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 -->
<!-- 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="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="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="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
@@ -90,16 +90,16 @@
</ul>
</nav>
</header>
<main role="main">
<article id="webslides">
<!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
-->
<section class="bg-primary">
<span class="background dark" style="background-image:url('https://source.unsplash.com/oHrodCLNnU8/')"></span>
<div class="wrap aligncenter">
@@ -358,7 +358,7 @@
<div class="wrap">
<div class="content-right">
<h2>
Redesigning
Redesigning
<svg class="fa-apple">
<use xlink:href="#fa-apple"></use>
</svg>
@@ -458,7 +458,7 @@
<li> Founded
<span>1976</span>
</li>
<li>
<li>
<span>120+</span>
Prebuilt Slides
</li>
@@ -1051,7 +1051,7 @@
</h2>
<p>.card-50.bg-white</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>
<ul class="description">
<li>
@@ -1192,7 +1192,7 @@
<use xlink:href="#fa-globe"></use>
</svg>
<h2>Works with all major banks</h2>
Apple Pay is accepted in restaurants, hotels...
Apple Pay is accepted in restaurants, hotels...
</div>
</li>
<li>
@@ -1451,7 +1451,7 @@
<div class="wrap">
<h2>Transparent Logos</h2>
<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>
<hr>
<ul class="flexblock">
@@ -1475,8 +1475,8 @@
</li>
<li class="bg-green">
<div>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<code>img.whitelogo</code>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<code>img.whitelogo</code>
</div>
</li>
</ul>
@@ -1722,7 +1722,7 @@
<div class="content-left">
<h3>Responsive Videos</h3>
<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;/div&gt;</pre>
<p><code>.embed</code></p>
@@ -1747,7 +1747,7 @@
</div>
<!-- .end .embed -->
</div>
<!-- .end .wrap -->
<!-- .end .wrap -->
</section>
<section class="fullscreen">
<!-- Fullscreen Video -->
@@ -1857,13 +1857,16 @@
</article>
</main>
<!--main-->
<!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body>
</html>

54
demos/why-webslides.html
View File

@@ -3,39 +3,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover,
you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github:
https://github.com/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<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.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- 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">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<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:width" content="800">
<meta property="og:image:height" content="429">
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
@@ -53,7 +53,7 @@
<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:image" content="https://webslides.tv/static/images/share-karma.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<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">
@@ -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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
</head>
<body>
<header role="banner">
@@ -92,22 +93,22 @@
</ul>
</nav>
</header>
<main role="main">
<article id="webslides" class="vertical">
<!-- Quick Guide
- 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;
-->
<section>
<!--.wrap = container 1200px -->
<div class="wrap aligncenter">
<h1 class="text-landing">Good Karma</h1>
<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.
</p>
<nav>
@@ -126,7 +127,7 @@
<!--.wrap = container 1200px -->
<div class="wrap fadeInUp">
<h1>
Everyone
Everyone
<svg class="fa-heart-o">
<use xlink:href="#fa-heart-o"></use>
</svg>
@@ -309,7 +310,7 @@
<p>The best way to inspire with your content is to connect on a personal level:</p>
<ul class="description">
<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>.
</li>
<li>
@@ -333,17 +334,20 @@
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!--main-->
<!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body>
</html>

805
static/js/webslides.js
View File

@@ -9,137 +9,343 @@ Based on SimpleSlides, by Jenn Schiffer:
https://github.com/jennschiffer/SimpleSlides
==================================================================== */
jQuery(document).ready(function($){
jQuery.fn.webslides = function(options) {
var ID = {
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 obj = {};
var $slideshow = jQuery('#' + ID.slideshow),
$navigation = jQuery('<div>').attr('id','navigation'),
$slides = $slideshow.children('section').addClass(ID.slide),
$currentSlide,
$firstSlide = $slides.first(),
$lastSlide = $slides.last(),
$auxSlide = null;
// Private vars
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 total = $slides.length;
var $slideshow,
$navigation,
$slides,
$counter,
$next,
$previous,
$currentSlide,
$firstSlide,
$lastSlide,
$auxSlide = null,
slidePointer;
var labels = {
next : $slideshow.hasClass(ID.verticalClass)?'&darr;':'&rarr;',
previous : $slideshow.hasClass(ID.verticalClass)?'&uarr;':'&larr;',
separator : ' / '
};
var total = 0;
var labels = {};
/**
* 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>' );
// 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',ID.previous).html(labels.previous));
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',ID.next).html(labels.next));
$slideshow.append($navigation);
$slideshow.append(jQuery('<span>').attr('id',ID.counter));
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('#'));
/**
* Init keypress events
*/
var initKeyEvents = function() {
// Add keyboard shortcuts for changing slides
jQuery(document).keydown(function(e){
if (!$slideshow.hasClass(obj.settings.verticalClass) || isMobile) {
$slideshow.data('iswheel', false);
if (e.which == 39 || e.which == 32) {
// right key pressed => next slide
obj.nextSlide();
return false;
}
history.pushState(null, null, '#slide='+ slidePointer.current );
};
var hideCurrentSlide = function() {
// hide the current slide
if ( $currentSlide ) {
$currentSlide.hide().removeClass(ID.current);
else if (e.which == 37) {
// left or l key pressed => previous slide
obj.previousSlide();
return false;
}
};
}
});
$slideshow.data('moving', false);
var nextSlide = function() {
var nextSlide;
if ($slideshow.hasClass(ID.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(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;
});
// Add keyboard shortcuts for changing slides
jQuery(document).keydown(function(e){
if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) {
$slideshow.data('iswheel', false);
if (e.which == 40 || e.which == 32) {
// right key pressed => next slide
obj.nextSlide();
return false;
}
else if (e.which == 38) {
// left or l key pressed => previous slide
obj.previousSlide();
return false;
}
}
});
}
/**
* 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);
// hide current slide
hideCurrentSlide();
/**
* Init touch events
*/
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 = nextSlide;
slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current == 0) slidePointer.current = total;
// update counter
updateCounter();
@@ -149,274 +355,163 @@ jQuery(document).ready(function($){
// fire slide event
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() {
var prevSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return;
$slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'});
// get the next slide
nextSlide = $currentSlide.next();
$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;
// show next slide
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;
// update url
updateURL();
// not the last slide => go to the next one and increment the counter
$currentSlide = prevSlide;
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
// fire slide event
fireSlideEvent();
}
};
// 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
updateURL();
$currentSlide.before($currentSlide.siblings('.slide').last());
// fire slide event
fireSlideEvent();
prevSlide = $currentSlide.prev();
jQuery('html').css({overflow: 'auto'});
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
}
animated = true;
});
if (prevSlide.length === 0) return false;
// show next slide
prevSlide.show().addClass(obj.settings.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(obj.settings.current);
$currentSlide = prevSlide;
} 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);
// not the last slide => go to the next one and increment the counter
$currentSlide = prevSlide;
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
// update counter
updateCounter();
// update URL
// update url
updateURL();
// fire slide event
fireSlideEvent();
jQuery('html').css({overflow: 'auto'});
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
}
};
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();
animated = true;
});
// "previous" arrow clicked => previous slide
$previous.click( function(e){
e.preventDefault();
previousSlide();
});
} else { // Is landscape
jQuery("html, body").animate({ scrollTop: 0 }, 0);
// hide current slide
hideCurrentSlide();
// Add keyboard shortcuts for changing slides
jQuery(document).keydown(function(e){
if (!$slideshow.hasClass(ID.verticalClass) || isMobile) {
$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;
}
}
});
// get the previous slide
$currentSlide.before($currentSlide.siblings('.slide').last());
prevSlide = $currentSlide.prev();
// Add keyboard shortcuts for changing slides
jQuery(document).keydown(function(e){
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) {
$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;
}
}
});
prevSlide.show().addClass(obj.settings.current);
$currentSlide = prevSlide;
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
// update counter
updateCounter();
/**
* Bind the event HashChange when the prev/next history button was clicked
*/
jQuery(window).bind("hashchange", function () {
if (hasHash()) {
goToSlideIfSlideHashChange();
} else {
window.location.reload();
}
});
// update URL
updateURL();
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) {
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());
// fire slide event
fireSlideEvent();
}
};
/**
* 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());
}
});