Just Add Images

Screen, Tablet & Mobile Swipe Display

If you can:

copy & paste text,
edit HTML lists & links, and
post art & pages to the web,

you can give readers a standards-compliant swipe display.

Open your web document with your swipe & snap stylesheet:

<!doctype html>

<html>

<head>

<title>document title</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link type="text/css" rel="stylesheet" href="swipe_snap.css">

</head>
Set your swipe to vertical or horizontal, to display scrollbar on desktop or not, and to enable fade-ins or not:

<body>

<div class="vertical swipe_snap scrollbar">

<div class="enable">
Open an HTML list with your previous arrow:

<ul>

<li><strong>&lsaquo;</strong><span> </span></li>
Set the empty links in your list to your image files:

<li><a href="path/folder/your-image01.jpg"></a></li>

<li><a href="path/folder/your-image02.jpg"></a></li>

<li><a href="path/folder/your-image03.jpg"></a></li>
1. To swipe-in, add a class to the slate to swipe:
  
  <li class="swipe_out"><a href="path/folder/your-image03.jpg"></a></li>
  
  <li><a href="path/folder/your-image04.jpg"></a></li>
2. To fade-in, repeat the previous image paired with the new panel faded into (IE support for fade-ins begins v10):
  
  <li><a href="path/folder/your-image03.jpg"></a></li>
  
  <li>
  
  <a href="path/folder/your-image03.jpg"></a>
  
  <a href="path/folder/your-image04.jpg"></a>
  
  </li>
3. Add a second overlay to fade-in captions:
  
  <li><a href="path/folder/your-image03.jpg"></a></li>
  
  <li>
  
  <a href="path/folder/your-image03.jpg"></a>
  
  <a href="path/folder/your-image04.jpg"></a>
  
  <a href="path/folder/your-image05.jpg"></a> 
  
  </li>
4. Practiced CSS-coders can customize blank slates to dress-up text to display:
  
  <li><span><a href="#">[ your text 1 ]</a></span></li>
  
  <li><span><a href="#">[ your text 2 ]</a></span></li>
  
  <li><span><a href="#">[ your text 3 ]</a></span></li>
Close the open tags to complete your swipe display:

<li><strong>&rsaquo;</strong><span> </span></li> 

</ul>

</div>

</div>
To show reader progress, you can include, a. the tags to display page count:

<p class="page_number"></p>

or, b. if you know how to style them, the tags to insert the dynamic menu:

<ul class="toc"><li></li></ul>
Include your jQuery and swipe & snap scripts by the close of your document:

<script type="text/javascript" src="jquery-2.0.0.min.js"></script>

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

</body>

</html>

With ink and paper, comics are the most powerful medium always available to create in. US newsstands once supported over 600 comic titles, selling a billion issues a year. An artist could reach readers in the tens of millions.

Today, however, the comics released by US publishers enjoy a readership of less than a million, perhaps ¼% of the population. No market is more qualified to deliver what we need to hear than anyone willing to say it.

Just Add Images

Screen, Tablet & Mobile Swipe Display

Also for screen & tablet display: