Features:
- the ability to create slide transition effects;
- thumbnail pagination;
- transition effects for HTML slider titles/captions;
- start/stop buttons;
- "current/total" images counter (e.g. the 2nd of 3);
- progressbar;
Description
Files needed to work with the gallery:
- jquery-1.7.min.js – jQuery library (the gallery will work with this version of library only);
- jquery.easing.1.3.js – easing effects needed for creating an animation;
- tms-0.4.1.js – the gallery’s functionality;
- uCarousel.js – the thumbnail pagination functionality;
- demo.css – the set of CSS styles for the gallery stylization;
- demo.js – gallery initialization;
To start with please include the following files in the <head> section of HTML file:
<link rel="stylesheet" href="css/demo.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/uCarousel.js"></script>
<script type="text/javascript" src="js/tms-0.4.1.js"></script>
<script type="text/javascript" src="js/demo.js"></script>The HTML Gallery Structure:
<div class="gallery">
<ul class="items">
<li><img src="images/slide-3.png" alt="" /></li>
<li><img src="images/slide-4.png" alt="" /></li>
<li><img src="images/slide-1.png" alt="" /></li>
<li><img src="images/slide-2.png" alt="" /></li>
<li><img src="images/slide-5.png" alt="" /></li>
<li><img src="images/slide-6.png" alt="" /></li>
<li><img src="images/slide-7.png" alt="" /></li>
</ul>
</div>
<div class="pag">
<div class="img-pags">
<ul>
<li><a href="#"><img src="images/slide-3-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-4-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-1-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-2-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-5-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-6-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-7-thumb.jpg" alt="" /></a></li>
</ul>
</div>
<a href="#" class="button button1" data-type="prevPage"><</a>
<a href="#" class="button button2" data-type="nextPage">></a>
</div>If there are any HTML titles and navigation buttons in the gallery, the HTML code will be the following:
<div class="gallery">
<ul class="items">
<li><img src="images/slide-3.png" alt="" /><span class="banner">banner content</span></li>
<li><img src="images/slide-4.png" alt="" /><span class="banner">banner content</span></li>
<li><img src="images/slide-1.png" alt="" /><span class="banner">banner content</span></li>
<li><img src="images/slide-2.png" alt="" /><span class="banner">banner content</span></li>
<li><img src="images/slide-5.png" alt="" /><span class="banner">banner content</span></li>
<li><img src="images/slide-6.png" alt="" /><span class="banner">banner content</span></li>
<li><img src="images/slide-7.png" alt="" /><span class="banner">banner content</span></li>
</ul>
</div>
<a href="#" class="prev">prev</a> <a href="#" class="play">play</a> <a href="#" class="next">next</a>
<div class="pag">
<div class="img-pags">
<ul>
<li><a href="#"><img src="images/slide-3-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-4-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-1-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-2-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-5-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-6-thumb.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/slide-7-thumb.jpg" alt="" /></a></li>
</ul>
</div>
<a href="#" class="button button1" data-type="prevPage"><</a>
<a href="#" class="button button2" data-type="nextPage">></a>
</div>
The core styles are located in demo.css file. The most important requirement for the gallery stylization is the following CSS rule - .items {display:none;} - do not change it. All other attributes are editable.
Initialization
gallery initialization is set in demo.js file:
$(document).ready(function(){
$('.gallery')._TMS({
show:0,
pauseOnHover:true,
prevBu:'.prev',
nextBu:'.next',
playBu:'.play',
duration:10000,
preset:'zoomer',
pagination:$('.img-pags').uCarousel({show:4,shift:2}),
pagNums:false,
slideshow:7000,
numStatus:true,
banners:'fromRight',// fromLeft, fromRight, fromTop, fromBottom
waitBannerAnimation:false,
progressBar:''
})
}) The initialization occurs on the event $(document).ready(). Parameters:
- preset – the preset that will be used;
- duration – the animation time in milliseconds;
- pagination – the tumbnail pagination:
- axis – gallery rotation axis;
- rows – number or rows/columns;
- show – number of visible items(depends on the rows value);
- shift – active element left indent;
- step – number of elements to scroll on clicking prev\next;
- curr – initial active element;
- clickable – make item active on click;
- retFalse – если clickable, то делать ли retFalse или нет;
- activeClass – carousel active class;
- buttonClass – carousel controls buttons class;
- blockAtEnd – start of the beginning when carousel reached end;
- duration – animation speed;
- easing – easing animation effect;
- All buttons has specific class (.button by default) and data-type, that defines button behavior. At the moment you have 4 control button: prev, next(navigate through active images), prevPage, nextPage(thumbnails navigation)
- pagNums – possible values - true/false - sets images numbers in order;
- numStatus – possible values - true/false - creates the counter in the slider;
- playBu, nextBu, prevBu – set the css class for the buttons which turn the slideshow on/off, switch the last/next image;
- slideshow – the number of milliseconds in which one image change another, false by default;
- progressBar – progressbar, that is displayed in the slideshow and changes its length as the pictures change one another f.e. '<div class="progbar"></div>', corresponding CSS styles should be created for this class;
- banners – possible values:
- true/false - turn banners on/off;
- fade, fromLeft, fromRight, fromTop, fromBottom - the ready-made presets to display the banners;
- pauseOnHover – possible values - true/false - as soon the cursor is put over the slider area the animation stops;
- waitBannerAnimation – possible values - true/false - the feature is used for simultaneous (false) or gradual (true) animation of the banner and the image;
- show – indicates the number of the slide to start the animation from, the count starts from 0.