ThrillBent's Valentine - episode 01

copyrighted art displayed for fair use only

Tablet & Mobile Swipe Display

Easy Image Plug & Play

If you can:

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

you can give the control of Flash on desktop to readers on tablet & mobile.

  1. Open your web document with your swipe & snap stylesheet:
    <!doctype html>
    <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">
  2. Set your swipe to vertical or horizontal, and enable or disable fade-ins:
    <div class="horizontal swipe_snap">
    <div class="enable">
  3. Open an HTML list with your Previous-link arrow:
    <ul><li><strong>&lsaquo;</strong><span>&nbsp;</span> <!-- previous-link arrow -->
  4. Set the empty links in your list to your image files:
    </li><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>
    1. To swipe-in, add a class to the slate to swipe:
      </li><li class="swipe_out">
      <a href="path/folder/your-image03.jpg"></a>
      <a href="path/folder/your-image04.jpg"></a>
    2. To fade-in, repeat the previous image paired with the new panel faded into (IE support for fade-ins begins v10):
      <a href="path/folder/your-image03.jpg"></a>
      <a href="path/folder/your-image03.jpg"></a> <a href="path/folder/your-image04.jpg"></a>
    3. Add a second overlay to fade-in captions:
      <a href="path/folder/your-image03.jpg"></a>
      <a href="path/folder/your-image03.jpg"></a>
      <a href="path/folder/your-image04.jpg"></a>
      <a href="path/folder/your-image05.jpg"></a> <!-- your-image04.jpg w/ captions added -->
    4. Practiced CSS-coders can customize blank slates to dress-up text to display:
      </li><li><span><a href="#">[ your text ]</a></span>
      </li><li><span><a href="#">[ your text ]</a></span>
      </li><li><span><a href="#">[ your text ]</a></span>
  5. Close the tags open to move on:
    </li><li><strong>&rsaquo;</strong><span>&nbsp;</span> <!-- next-link arrow -->
  6. 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>
  7. 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>

Comics are the most powerful medium always available to create in. US news stands once supported over 600 comic titles, selling a billion issues a year. One artist could reach readers in the tens of millions.

Today, however, the whole of comics released by US publishers enjoys 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.

Also for tablet & screen: