mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-21 04:12:01 +02:00
Code Issues Releases Wiki Activity

Initialize webslide in index.html

Browse Source
This commit is contained in:
Luis
2017-02-11 16:50:24 +01:00
parent 7a8f09cd73
commit cab0758f9e
2 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
index.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: Making HTML presentations easy</title> <title>WebSlides: Making HTML presentations easy</title>
<meta name="description" content="WebSlides is the easiest way to make HTML presentations, portfolios, and landings. Just essential features."> <meta name="description" content="WebSlides is the easiest way to make HTML presentations, portfolios, and landings. Just essential features.">
<!-- URL CANONICAL --> <!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/"> --> <!-- <link rel="canonical" href="http://your-url.com/"> -->
<!-- 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/"> <!-- YOUR URL --> <meta property="og:url" content="http://your-url.com/"> <!-- YOUR URL -->
<meta property="og:type" content="article"> <meta property="og:type" content="article">
@@ -43,7 +43,7 @@
<meta property="og:description" content="WebSlides is about telling stories beautifully. Just the essential features. Good karma."> <!-- EDIT --> <meta property="og:description" content="WebSlides is about telling stories beautifully. Just the essential features. Good karma."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:20:50"> <!-- EDIT --> <meta property="og:updated_time" content="2017-01-04T17:20: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,7 +51,7 @@
<meta name="twitter:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT --> <meta name="twitter:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is about good karma. Just essential features. 120+ free slides ready to use."> <!-- EDIT --> <meta name="twitter:description" content="WebSlides is about good karma. Just essential features. 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,11 +60,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">
@@ -91,16 +91,16 @@
</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>
<span class="background" style="background-image:url('https://webslides.tv/static/images/nature.jpg')"></span> <span class="background" style="background-image:url('https://webslides.tv/static/images/nature.jpg')"></span>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
@@ -118,7 +118,7 @@
</a> </a>
</p> </p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<!--.wrap = container 1200px --> <!--.wrap = container 1200px -->
@@ -370,26 +370,29 @@
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
</article> </article>
<!-- end article --> <!-- end article -->
</main> </main>
<!-- end main --> <!-- end main -->
<!-- Remove #webslides element :) <!-- Remove #webslides element :)
<footer role="contentinfo"> <footer role="contentinfo">
<div class="wrap"> <div class="wrap">
<p>An <a href="https://github.com/jlantunez/webslides">open source solution</a>, by <a href="https://twitter.com/jlantunez">@jlantunez</a>.</p> <p>An <a href="https://github.com/jlantunez/webslides">open source solution</a>, by <a href="https://twitter.com/jlantunez">@jlantunez</a>.</p>
</div> </div>
</footer> --> </footer> -->
<!-- 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>

2
static/js/webslides.js
View File

@@ -495,7 +495,6 @@ jQuery.fn.webslides = function(options) {
} }
// I don't know what it does
jQuery(document).ready(function($){ jQuery(document).ready(function($){
// Tabs // Tabs
jQuery('ul.tabs li').click(function(){ jQuery('ul.tabs li').click(function(){
@@ -508,7 +507,6 @@ jQuery(document).ready(function($){
}); });
}); });
// I don't know what it does
// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard // Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard
jQuery(document).keypress(function(e) { jQuery(document).keypress(function(e) {
if(e.which == 13) { if(e.which == 13) {