Slideshow

Provided by Prettydiff.com

BSD-3 License

Copyright (c) 2012, Austin Cheney
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

• Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
• Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
• Neither the name of Prettydiff.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Features

• Automatic slide numbering
• The footer is created automatically
• 'Table of Contents' is created automatically
• Reference slide(s) are created automatically
• Slides resize to maximum size without loosing aspect ratio
• Supports aspect ratios of 16x9 and 4x3
• Allows deep linking to numbered slides
• Navigation does not interfere with browser history

Basic Slide Requirements

• Each slide must be a div with a class attribute of value slide.
• The first slide must have an id attribute of value slide-1.
• Every other slide after the first should not have an id attribute.

Navigation

• Clicking the left arrow key will go back to a prior slide.
• Clicking the right arrow key will go to the next step.
• Mouse clicks will also go to the next step.
• Mouse wheel can also be used to cycle through steps in the slideshow.
• Slides can be directly targeted using a fragment on the slideshow address of "slide-" + slide number. Look at the current page address for an example.

Content

Content will cover five areas.

Headings

• The first slide is a title slide and must contain a h1 tag.
• Major headings must be h2 tags.
• Major headings become major points in the 'Table of Contents'
• Minor headings must be h3 tags.
• Minor headings become minor points in the 'Table of Contents'
• Subpoints may use h4-h6 tags and will not be included in the 'Table of Contents'
• Any h2 or h3 heading that should be omitted from the heading must have a class attribute value of notoc
• A heading either be the first item or absent entirely for each slide.

Slide Content

• The primary content of a slide can be structured as:
  • quote (q)
  • paragraph (p)
  • ordered list (ol)
  • unordered list (ul)
• A quote is structured similar to a paragraph, except quoted text is italicized and presents graphical quotation marks at the start and end.
• Ordered lists structure content in a manner similar to unordered lists. Ordered lists should only be used when the relative order of each list item is important, such as baking instructions.
• Content that is to be visually inferior to the surrounding content of the same quote, paragraph, or list item can be so designated with a class value of small.
• Content structures that are to be reduced in size may be provided class attribute values of diagram, wordy, long, and extra-long. Value wordy is intended for use with large quote or paragraphs that would otherwise not fit on a slide. Values long and extra-long are for use with lists. The value diagram suppies special presentation for large graphics.

Graphics

• All graphics should be SVG so that they can resize as the slides resize.
• Graphics supplied to supplement specific slides must be considered slide content, which means they should be structured in accordance with the previous slide, Slide Content
• SVG graphics supplied to specific slides should be included directly as XML structures. This allows custom interaction.
• SVG graphics can be included as CSS background images if they are referenced as data URIs. Look at the included CSS code for an example.

Content Transitions

• A content transition represents content of a single slide that can be navigated through as though navigating though additional slides.
• Navigating backwards from a slide ahead of the slide containing transitions will remove the transitions and leave the slide's content as static unchanging content.
• Content transitions should not include slide headings or slide references.
• Content transitions work by repeating content inside of div tags where each of these div tags has a class attribute of value transition.
• The first transisition div container must have a class attribute value of "transisition first" opposed to just "transition".
• An example of a transition can be seen on the slide with heading Contents.

Slide References

• Slide references must be an ordered list (ol) structure with a class attribute of value ref.
• The ol tag representing a slide should be the last thing in a given slide, but is also entirely optional.
• A reference can be a notation, but should represent a hyperlink to an external source.
• A well written reference will read as the source's title and possibly the source authors instead of displaying the hyperlink address.
• Slide references, if any, will be collected to form the reference slides at the end of the slideshow.

Hidden Settings

• Settings are supplied with input tags of type hidden. These hidden input tags should occur directly after the opening body tag.
• These hidden input tags must have an id attribute with one of the following values:
  • brand
  • brandType
  • class
  • ratio-x
  • ratio-y
  • toc
  • mousedir

Hidden Settings Defined

• The value for the brand input is the text that appears in the center of the footer, which is "Brandname Example" for this slideshow. A value should be supplied even if a graphical logo is available for accessibility.
• The brandType input is option and must have a value of logo for the text from the previously mentioned input to be replaced by a SVG CSS background image.
• The class input is the text that appears in the footer, which on this slideshow is the value "Classification". This is optional and notifies the user whether the slideshow is for private use, public access, or some other limited distribution.
• The ratio-x input is optional and sets horizontal value for the display ratio. This defaults to the value 16.
• The ratio-y input is optional and sets horizontal value for the display ratio. This defaults to the value 9. Although only 16x9 and 4x3 ratios are officially supported any positive integer is accepted for experimentation.
• The toc input is optional. If a value of disable is supplied there will be no table of contents for the slideshow.
• The mousedir input reverses the direction of the mouse wheel during slide navigation if this is supplied a value of invert.

Summary

• See a working demo at http://mailmarkup.org/slideshow.xhtml
• Github repo: https://github.com/austincheney/slideshow
• Use Prettydiff.com