ThrillBent's Valentine - episode 01

copyrighted art displayed for fair use only

Tablet & Mobile Swipe Display

Easy Image Plug & Play

If you can copy & paste to a text-editor, edit HTML lists & links, and post art & pages to the web, you can display on tablet & mobile the kind of reader-friendy control Flash gives on desktop:

  1. Refer to the swipe & snap stylesheet from the <head> of your HTML4/5 document:
    <!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" media="screen">
    </head>
  2. Choose to display vertical or horizontal, and to enable or disable fade-ins:
    <body>
    <div class="horizontal swipe_snap">
    <div class="enable">
  3. Open an HTML list and display your Previous-link arrow from your first list item:
    <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>
      </li><li>
           <a href="path/folder/your_image04.jpg"></a>
    2. To enable fade-ins, repeat the previous image, then pair it in the list with an overlay (IE support for fade-ins begins v10):
      </li><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>
    3. Defer an additional fade-in of captions with a second overlay:
      </li><li class="swipe_out">
           <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 -->
      </li><li>
           <a href="path/folder/your_image06.jpg"></a> <a href="path/folder/your_image07.jpg"></a>
    4. Practiced CSS-coders can customize blank slates to dress-up text displayed:
      </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 -->
    </li></ul>
     
    </div>
    </div>
  6. To ease reader-progress tracking, you can include:
    1. the tags to display page count:
      <p class="page_number"></p>
    2. or, if you know enough to style them yourself, the tags to insert the dynamic table of contents:
      <ul class="toc"><li></li></ul>
  7. Refer to your jQuery and swipe & snap scripts before the close of your document <body> to complete your display:
    <script type="text/javascript" src="jquery-2.0.0.min.js"></script>
    <script type="text/javascript" src="swipe_snap.js"></script>
    </body>
    </html>

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.

More from Mike: