<meta name="description" content="Handmade picture gallery: #slideshow http://www.feelouttheform.net/handmade-slideshow/" />

<!--

  Here you have the paragraph containing the thumbnails.

  Each thumbnail is composed by a link ('a' tag) inside which you have a picture ('img' tag) and a caption ('span' tag). In its thumbnail shape, this content you only have the picture displayed, the caption is hidden (see the CSS style further). But be careful because it will be the exact same content copied to the gallery description.

-->

<p id="gallery_thumbnails">

  <a onclick="javascript:image_selected(this);" >

        <!--

      For example, the content of this 'a' tag will be copied in the container named 'gallery description' that you can see below.

        -->

        <img src="http://www.feelouttheform.net/wp-content/uploads/2014/08/gloup_paypal.jpg" />

        <span>A screenshot from my portfolio</span>

    </a>

    <a onclick="javascript:image_selected(this);" >

        <img src="http://www.feelouttheform.net/wp-content/uploads/2014/09/avatar_blog.jpg" />

        <span>My awesome logo designed by Carla Sofia</span>

    </a>

    <a onclick="javascript:image_selected(this);" >

        <img src="http://www.feelouttheform.net/wp-content/uploads/2014/08/photonicocarreblanche.png" />

        <span>This is... me!</span>

    </a>

</p>

​

<!--

  After that we just need to declare an empty container in which will be displayed the selected bundle picture+caption.

 -->

<p id="gallery_description"></p>

​

​