tileSlideshow
Simple jQuery-based random slideshow plugin
How to Use
1. Setup
Add this tags to the <head> of your document (or before the </body> tag).
This will link jQuery, Tile Slideshow CSS\JS into your web-page.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="tileSlideshow.js"></script> <link rel="stylesheet" type="text/css" href="tileSlideshow.css"/>
2. Markup
Start with a single containing element, in this example is <div class="tile-container">.
After, create a list of items (blocks) with the same class (In this example there are <div
class="tile-item">).
Inside each item insert inner element that will be switched (slided) in given interval (in our example there are
just <img> tags. Buy you can use any html tag you need).
<div class="tile-container">
<div class="tile-item">
<img src="#" alt=""/>
<img src="#" alt=""/>
<img src="#" alt=""/>
</div>
...
<div class="tile-item">
<img src="#" alt=""/>
<img src="#" alt=""/>
<img src="#" alt=""/>
</div>
</div>
3. Start the slideshow
In last step, add the following lines of JavaScript into the <head> of your document (or
before the </body> tag).
The $(window).load() function is required to ensure the content of the page is loaded before the
plugin initializes
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.tile-container').tileSlideshow();
});
</script>
4. Change CSS to your needs
After all, take tileSlideshow.css and modify it to your needs, because this plugn was build as more
independent from CSS as it can be. You can change anything according to your future website design,
except overflow, opacity and z-index parameters.
Options
Listed below are all of the options available to customize tileSlideshow to suite your needs.
animation: 'fade' // Animation type. Supported values: 'fade', 'moveUp', 'moveDown', 'moveLeft', 'moveRight' animationSpeed: 500, // Speed of switch for slided elements selector: '.tile-item', // Selector for items that contain sliding images/items innerSelector: 'img', // Selector for inner items that will be slided in given interval itemsPerInterval: 1, // Number of random container that will be slided in given interval interval: 1000, // Interval of time
Also, slideshow is accessible from any point of code vie jQuery .data() method. For example:
$('#container-helpers').data('tileSlideshow').stop();
All this functions are listed below:
- switchItems
- play
- stop
- destroy
Helper strings have been added too for performing quick actions on slideshow. All this helper strings are listed below:
$('.tile-container').tileSlideshow('switchItems');
$('.tile-container').tileSlideshow('play');
$('.tile-container').tileSlideshow('stop');
$('.tile-container').tileSlideshow('destroy');
Examples
1. Basic example
Fun with options. Change animation type, change how much items will be slided in one time frame, change animation time frame and fade speed
$(window).load(function(){
$('#container-animate').tileSlideshow({
animation: 'randomMove',
animationSpeed: 1000,
itemsPerInterval: 2,
interval: 1000
});
});
Some title
Some content placed here...
2. Container with static blocks
There is no problems with creating slideshows with "stamped" blocks. See example
No specific JavaScript or plugin initializations is needed. Anything is created only with CSS and HTML
3. Perform actions outside slideshow
This example illustrates how to use helper stings on slideshow. Click on buttons under this text.
Also, is available another option called 'destroy'. If you need totally revert all changes made by tileSlideshow and destroy fully slider - call this action like other 3 actions, illustrated in this example. Anyway - see code:
$('#container-helpers').tileSlideshow({
itemsPerInterval: 8,
interval: 10000
});
// Call switch items function on click
$('#btn-switch').on('click', function(){
$('#container-helpers').tileSlideshow('switchItems');
});
// Start slideshow
$('#btn-play').on('click', function(){
$('#container-helpers').tileSlideshow('play');
});
// Stop slideshow function
$('#btn-stop').on('click', function(){
$('#container-helpers').tileSlideshow('stop');
});
4. Custom content inside slideshow
Use whatever tags you want for slideshow. Simply change option innerSelector and write any class or tag you want.
Don't forget to add CSS about your new selector because all items must be placed one under another (use position: absolute in your CSS)
$('#container-custom').tileSlideshow({
innerSelector: '.custom-container'
});
Browser support
All modern versions of Firefox, Chrome, Safari, iOS, Android, and Internet Explorer have been tested and are supported.
It works fine in IE8 and IE7 too. But if you support these old browsers your soul will burn in hell :)