Stu Nicholls | CSSPLAY.COM | Mi Thumb jQuery slideshow plugin

Instructions

Download Mi_Thumb

Firstly download the two file required for Mi_Thumb, these are the jQuery file and the CSS stylesheet. These files are in the zip file mi_thumb_2.zip.

Include Mi_Thumb files in your html code

These two files should be added to your html code as shown below.


<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link rel="stylesheet" href="path/to/mi_thumb_2.css">
    <script src="path/to/jquery.js"></script>
    <script src="path/to/mi_thumb_min_2.js"></script>
  </head>
  <body>>
    ...
  </body>
</html>

Add Mi_Thumb HTML code

The HTML code has the following format. The only changes are the number of 'mi_pane' elements in each slideshow.


<div class="mi_thumb">
  <div class="mi_wrap">
    <div class="mi_cont">
      <div class="mi_pane"></div>
      <div class="mi_pane"></div>
      <div class="mi_pane"></div>
    </div>
  </div>
</div>

Mi_Thumb CSS basic styles

There are two styles you need to control the sizes of the slideshow.


/* main image display - to make responsive use percentage sizes */
.mi_thumb {width:95%; max-width:1200px; position:relative; -webkit-tap-highlight-color: rgba(0,0,0,0); -ms-user-select: none; margin:50px auto; background:#000;}
/* set up the aspect ratio of the main images - width:100% - height:0 - padding-bottom as percentage of width - in this example it is 2:1 */
.mi_thumb .mi_wrap {display:block; position:relative; left:0; top:0; width:100%; height:0; padding-bottom:50%; overflow:hidden;}

You will also need to style the background images for your slides. For example:


.mi_thumb .mi_cont .mi_pane:nth-of-type(1) {background-image:url(path/to/background-image-1.jpg);}
.mi_thumb .mi_cont .mi_pane:nth-of-type(2) {background-image:url(path/to/background-image-2.jpg);}
.mi_thumb .mi_cont .mi_pane:nth-of-type(3) {background-image:url(path/to/background-image-3.jpg);}
...

Initialize Mi_Thumb

Lastly you will need to set up the parameters of Mi_Thumb by adding the following jQuery script which should be placed at the end of your HTML code, just before the closing body tag.

For example the following code sets up the parameters of the FIRST slideshow on the page $('.mi_thumb').eq(0).miThumb. The second slideshow would begin $('.mi_thumb').eq(1).miThumb.

Remember to put the comma at the end of each parameter except the last one.


<script>
$(window).load(function() {
  $('.mi_thumb').eq(0).miThumb({
    swipe:true,
    transition: 750,
    gap:8,
    bullets:true,
    bulletsClick: true,
    autorun: true,
    autospeed: 10000,
    loop: true
  });
});
</script>

</body>

Table of available parameters

Parameter	Type	Default	Description
swipe	boolean	false	Enable to allow touch and mouse swipe action
transition	number	500	Transition between slides in ms
gap	number	0	Gap between large images in px
bullets	boolean	false	Enable to show bullets on slideshow. Bullet size and position can be controlled using the Mi_Thumb stylesheet.
bulletsClick	boolean	false	Enable to allow selection on image using click/tap on bullets.
imageArrows	boolean	false	Enable to show previous and next controls on large image. The size and positon can be controlled using the Mi_Thumb stylesheet.
autorun	boolean	false	Enable to allow the slideshow to autorun.
autospeed	number	0	Time delay between slides in ms
loop	boolean	false	Enable to allow the slideshow to 'loop' when at the last and first images.
keyboard	boolean	false	Enable to allow control of the slideshow using the left and right keyboard keys.
playpause	boolean	false	Enable to show a 'play/pause' control on the large image. The size and position can be controlled using the Mi_Thumb stylesheet.
thumbs	boolean	false	Enable to show thumbnail images. The size and position can be controlled using the Mi_Thumb stylesheet.
thumbArrows	boolean	false	Enable to show the previous and next arrows to control the thumbanil images. The size and position can be controlled using the Mi_Thumb stylesheet.
Thumbnail images
To set up the thumbnail images you will need to create an array of the images. `var imageThumbs0 = [ "mi_images/t_mi_image1.jpg", "mi_images/t_mi_image2.jpg", "mi_images/t_mi_image3.jpg", "mi_images/t_mi_image4.jpg", "mi_images/t_mi_image5.jpg", "mi_images/t_mi_image6.jpg", "mi_images/t_mi_image7.jpg", "mi_images/t_mi_image8.jpg", "mi_images/t_mi_image9.jpg" ]` And the parameter would be: `thumbImages: function (thumb, number) { for (i=0; i<= number-1; i++) { thumb.eq(i).css('background-image', 'url('+imageThumbs0[i]+')'); } },`
Callbacks
onSwipeStart : function(mi_cont)	function		Callback function, will be executed at the start of the 'swipe' action.
onSwipeEnd : function(mi_cont)	function		Callback function, will be executed at the end of the 'swipe' action.
onImageChange: function(mi_pane, current, total)	function		Callback function, will be executed when the slide has changed. Receives the slide, index number and number of slides
onImageClick: function(mi_pane, current, total)	function		Callback function, will be executed when the slide is clicked/tapped. Receives the slide, index number and number of slides