Simple gallery

<div class="wrapper" id="galleryfic_gallery">
  <div id="gallery" class="content">
    <div class="slideshow-container">
      <div id="loading" class="loader"></div>
      <div id="slideshow" class="slideshow"></div>
  <div id="thumbs" class="navigation">
    <ul class="thumbs noscript">
      <li><a class="thumb" href="images/big_pic1.jpg"><img src="images/thumb1.jpg" alt="" /></a></li>
      <li><a class="thumb" href="images/big_pic2.jpg"><img src="images/thumb2.jpg" alt="" /></a></li>
      <li class="last"><a class="thumb" href="images/big_pic6.jpg"><img src="images/thumb6.jpg" alt="" /></a></li>
In order to create a gallery you will need:
  1. First we need to create HTML markup for the gallery. The elements represented here are optional. Each <div> element defines the following gallery parts:
    <div id="loading"></div>
    <div id="slideshow"></div>
    <div id="caption"></div>
    <div id="thumbs">
    #controls – adds gallery navigation block;
    #loading – adds a block that displays a spinner image till gallery images are being loaded;
    #slideshow – adds big image block;
    #caption – adds image description block;
    #thumbs – thumbnail images block.
  2. Then we build HTML markup for the #thumbs block:
    <div id="thumbs">
      <ul class="thumbs noscript">
          <a class="thumb" name="name" href="path/to/slide" title="title">
            <img src="path/to/thumbnail" alt="your image title" />
        ... (repeat for every image in the gallery)
  3. The link with .thumb class contains the path to the large image. Additionally you can add title and alt parameters.
  4. In order to add a gallery item you need to duplicated an existing <li> element (like what you see above).

Login form