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 readers on tablet & mobile the kind of control Flash gives on desktop.

  1. Refer to the swipe & snap stylesheet from the <head> of your HTML4/5 document:
    <!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" media="screen">
  2. Choose to swipe vertical or horizontal, and to 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. Insert your images as the destinations of the empty links populating your list:
    </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 enable swipes, add a class to the departing slate:
      </li><li class="swipe_out">
      <a href="path/folder/your-image03.jpg"></a>
      <a href="path/folder/your-image04.jpg"></a>
    2. To enable fade-ins, pair a repeat the previous image with an overlay to fade in (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="#"><!-- blank slate --></a></span>
      </li><li><span><a href="#"><!-- blank slate --></a></span>
      </li><li><span><a href="#"><!-- blank slate --></a></span>
  5. Then close the remaining open tags of your swipe & snap display:
    </li><li><strong>&rsaquo;</strong><span>&nbsp;</span> <!-- next-link arrow -->
  6. To ease reader-progress tracking, you can include, a. the tags to display page count:
    <p class="page_number"></p>
    or, b. if you know enough to style them, the tags to insert the dynamic menu:
    <ul class="toc"><li></li></ul>
  7. Refer to your jQuery and swipe & snap scripts before you close your document <body>:
    <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 newstands 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: