Welcome to JS slide show!

You are seeing an HTML page that has been prepared by a JavaScript to be a slide show.

Use the right and left side arrow-buttons to navigate. For keyboard navigation use CURSOR-RIGHT or ENTER, and CURSOR-LEFT or BACKSPACE.

2015-03-14

What you need for this

An up-to-date browser that knows CSS flexbox layout:
Firefox 22 Chrome 29 Opera 16 IE-11 Safari 6.1

How to navigate

The navigation controls will appear when you move the mouse.

The number of the current slide, and the total number of slides, is to be seen on top.

You can go to slide 99 by writing #99 at end of browser address line and press the Reload button after.

Keyboard navigation will not work when a web page is displayed in a slide, and input focus has been set to that page.

The optional "Down" button on bottom would toggle the visibility of the underlying document. This is useful for intermediate text searches.

What is expecting you here:

How to use an HTML page as slide-show by means of JS
Example slides
The contract between
- the script and HTML
- the script and CSS
Source code snippets
Full JS and CSS source listings

How can HTML be organized for slides

When there are elements with CSS class="slide" in document, these are the slides
Else all HTML elements directly below <body> are slides, excluding the slide frame and its controls, and empty elements

How can HTML be displayed in slides

Set document content invisible, establish a slide-frame on top of document
Establish navigation controls: Forward, Backward, Index, Count
Any normal element will be presented by copying it into the slide-frame
Any <a> element (hyperlink) will be displayed as its actual href location
Text will be centered, images will be scaled to fit into viewport

Sample HTML code

<html>
<head>
  <link href="slideshow.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="slide">
    <h1>Example: Image</h1>
    <p>Let's see how images fit into viewport ...</p>
  </div>
  
  <img class="slide" src="http://upload.wikimedia.org/wikipedia/commons/4/48/Anna_Atkins_1861.jpg"/>

  <div class="slide">
    <h1>Example: Hyperlink</h1>
    <p>Display a web page  ....</p>
  </div>
  
  <a class="slide"
      href="https://css-tricks.com/centering-css-complete-guide/">
    css-tricks
  </a>

  <script type="text/javascript" src="slideshow.js"></script>

</body>
</html>

You can find slideshow.js and slideshow.css on slide 12 and following.

But mind slideshow.js is an AMD module, so you may also want to view its caller slideshowcaller.js and the AMD loader define.js.

Best will be you use your browser's "View Page Source" menu item.

Examples

... showing the capabilities of this slide show.

Example: Tree

A slide show is like a vacation from losing yourself in endless details

A tree is not linear like a slide show
- It can expand a topic into details
- It can be navigated
  - bottom-up
  - top-down
    - depth-first
    - breadth-first
- Documents are written like trees
  - Hierarchical table of contents
  - General to detail downsizing with dotted title numbers
A slide show is a path through a tree
- The path highlights the most important details
- Slides are emphasising, summarizing, generalizing
Slide shows can simulate a tree by providing a "Down" button, but "Forward" and "Backward" would be confusing when being "Down"

Example: Long Text

This is to demonstrate that also long text can be on a slide.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse

End of long text

Example: Server Resource

  <a class="slide" href="../lib/slideshow/slideshow.js">slideshow.js</a>  
  <a class="slide" href="../lib/slideshow/slidecontrols.js">slidecontrols.js</a>
  <a class="slide" href="../lib/queue.js">queue.js</a>
  <a class="slide" href="../lib/slideshow/slideshow.css">slideshow.css</a>

Example: Image

Images should fill the viewport without losing their original aspect ratio. Try to change width and height of the browser window. The image never should be distorted during such an action (IE may behave as it likes). Further the image dimension should not provoke browser scroll bars.

Useful for image galleries!

  <img class="slide" src="http://somesite/somefolder/BEAUTIFUL.JPG"/>

Example: Hyperlink

The next slide should show a scrollable web page that explains how to center elements ....

  <a class="slide" href="https://css-tricks.com/centering-css-complete-guide/">CSS Tricks</a>

Example: Video

The next slide should show a video player ...

  <a class="slide" href="https://www.youtube.com/embed/IVpOyKCNZYw">youtube</a>

Script to HTML Contract

Responsibilities

All layout and text attributation within a slide is done by the author using HTML and CSS.

What the script does is ...

manage visibility and callbacks of navigation controls
center text slides
scale image slides to fit into viewport with original aspect ratio
resolve hyperlink slides and display them full-size

The script finds slides by class:

<div class = "slide"> (reserved CSS class name)

Not finding any means ...

all direct body children are slides,
except SCRIPT and empty elements, id="slideshow", and all other "slide..." ids.

... finds navigation controls by id:

id = "slideframe" frame where slides are shown in
id = "slideforward" button navigating to next slide
id = "slidebackward" button navigating to previous slide
id = "slidedownward" optional button toggling document visibility
id = "slideindex" current slide-index display
id = "slidecount" total slide-count display
id = "slidetools" the element containing index and count

Behavior and Assumptions

Not finding one of these means generating it.
Finding one means the author is responsible for its shape.

The slidedownward button can be avoided by providing slideforward and slidebackward in HTML.

The elements slideindex and slidecount must be children of slidetools.

The optional element id = "slideshow" is considered to be a custom slide frame layout container and is ignored in any way.

Slide show modes

Normally the show is "full-screen", taking 100% of browser height and width. The underlying document is set invisible.

By providing a custom HTML element id="slideshow", containing slideframe, slideforward, .... controls, the layout and shape of the slide show can be taken over completely by the HTML document and its CSS. That way it is possible to embed the slide show as part of a web page.

Custom slide show HTML

  <div id="slideshow" class="myslideshow">
    <div id="slideframe" class="slideframe"></div>
    <div id="slidetools" class="myslidetools">
      <span id="slideindex" style="font-weight: bold;"></span> of <span id="slidecount"></span>
    </div>
    <input id="slidebackward" class="myslidebackward" type="button" value="&lt;" />
    <input id="slideforward" class="myslideforward" type="button" value="&gt;" />
    <input id="slidedownward" class="myslidedownward" type="button" value="V" />
  </div>

Custom slide show CSS

<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="initial-scale=1"/>
  <title>JS Slide Show</title>
  
  <style type="text/css">
    .myslideshow {
      position: relative;
      top: 5%;
      width: 90%;
      height: 90%;
      overflow: auto;
      margin: auto;
      border: 4px solid gray;
      border-radius: 10px;
    }
    .myslidetools {
      position: absolute;
      top: 2%;
      right: 2%;
      background-color: white;
      padding: 0.3em;
      border: 1px solid lightGray;
    }
    .myslidebackward  {
      position: absolute;
      top: 50%;
      left: 1%;
      transform: translateY(-50%);
    } 
    .myslideforward  {
      position: absolute;
      top: 50%;
      right: 1%;
      transform: translateY(-50%);
    }
    .myslidedownward  {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateY(-50%);
    }
  </style>
  
</head>

Script to CSS Contract

Keep Layout in CSS

JS does no layout except some text- and image-centering fixes that can not be done by CSS because they rely on current viewport dimensions.

JS just assigns classes to slide-controls when it generates them by itself (when there is no custom slideshow in HTML)

id=slideframe -> class="slideframe"
id=slideforward -> class="navigation slideforward"
id=slidebackward -> class="navigation slidebackward"
id=slidedownward -> class="navigation slidedownward"
id=slidetools -> class="navigation slidetools"

But JS sets elements and slide controls visible and invisible.

Source Code

TODO: introduce the source piece by piece ....