exterior Gallery

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

    The HTML Structure of Gallery

    <div id="pro_simple_gallery">			  	
    	<div class="pro_gallery_bg">
    		<div class="pro_simple_gallery">
    			<ul class="pro_items">
    				<li>
    					<img src="YourImage.jpg" alt="" />
    					<div class="pro_banner">banner content</div>
    				</li>
    				...
    			</ul>
    		</div>
    	</div>
    	<div class="pro_pag">
    		<div class="pro_img-pags">
    			<ul>
    				<li><a href="#"><span><img src="YourThumbs.jpg" alt="" /></span></a></li>
    				...
    			</ul>
    		</div>
    		<a href="#" class="pro_btn pro_prev pro_button3" data-type="prevPage"><span></span></a>
    		<a href="#" class="pro_btn pro_next pro_button4" data-type="nextPage"><span></span></a>
    	</div>
    </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="pro_img-pags"> will display on click the first image in the list <ul class="pro_items">.

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

    <li>
    	<img src="YourImage.jpg" alt="" />
    	<div class="pro_banner">banner content</div>
    </li>

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

    <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.