Idealex

search

Gallery

Description

To make the gallery work tms-0.4.x.js and uCarausel.js files are used

The HTML Structure of Gallery

  1. <div id="simple_gallery">                  
  2.     <div class="gallery_bg">
  3.         <div class="simple_gallery">
  4.             <ul class="items">
  5.                 <li>
  6.                     <img src="YourImage.jpg" alt="" />
  7.                     <div class="banner">banner content</div>
  8.                 </li>
  9.                 ...
  10.             </ul>
  11.         </div>
  12.     </div>
  13.     <div class="pag">
  14.         <div class="img-pags">
  15.             <ul>
  16.                 <li><a href="#"><span><img src="YourThumbs.jpg" alt="" /></span></a></li>
  17.                 ...
  18.             </ul>
  19.         </div>
  20.         <a href="#" class="btn prev button3" data-type="prevPage"><span></span></a>
  21.         <a href="#" class="btn next button4" data-type="nextPage"><span></span></a>
  22.     </div>
  23. </div>

To add new images to the gallery you should have 2 images: 1 for the slider and 1 thumbnail. You need to add these images to different places. The images and thumbnails are connected by the order number. So the first thumbnail in the block <div class="img-pags"> will display on click the first image in the list <ul class="items">.

Slider image should be added to the list <ul class="items"> using the code:

  1. <li>
  2.     <img src="YourImage.jpg" alt="" />
  3.     <div class="banner">banner content</div>
  4. </li>

Thumbnail image should be added to the block <div class="img-pags"> using the code:

  1. <li><a href="#"><span><img src="YourThumbs.jpg" alt="" /></span></a></li>

You'll get more info on working with Gallery in the template manual after purchase. Manual is located in the "documentation" folder of the template package.