Minimalist Image Slideshow

Example 1. MIS with big images and descriptions

Introduction
This is a brief introduction to MIS. Remember that the images shown here are just examples, you can change them, of course!
Customizable
MIS makes full use of CSS. It's fully customizable, and you only have to edit some lines of CSS code.
Easy to adapt
You can place MIS at almost any place without having to modify your web design. It's only made by some <divs>.
HTML descriptions
Did you know that you can use HTML on image descriptions?
Of course! I'm not lying! ;-)
CSS Opacity
Thanks to the magic of CSS, this slideshow can make alpha transitions between images. Old browsers won't show these effects, but the slideshow still works.
Thanks for watching!
What are you waiting for? Download & install MIS on your website for free!

Example 2. MIS with small images

1 of 5
2 of 5
3 of 5
4 of 5
5 of 5

What MIS is?

MIS is Minimalist Image Slideshow made in Javascript.
I wanted to use one slideshow to show the featured news on my website, but I couldn't find one that could fit it according to my needs. There are a lot of similar slideshows on the net. But my MIS has a very clean and small code, and it's very easy to install :)
It just uses Javascript along with CSS in order to get a high level of customization. It's compatible with:

Internet Explorer 9
Mozilla Firefox 3
Opera 9
Google Chrome

It also works with older browsers, but dynamic effects may be ignored.

How to install

Download marc_mis.js (includes JS functions) and index.html (the file you are reading).
The code is very minimalist and pretty self-explanatory, you'll be able to adapt to your own page easily.
Be sure to...

Include marc_mis.js into your webpage by adding the Javascript header.
```
<script type="text/javascript" src="marc_mis.js"></script>
```
Add MIS wherever you want. Example:
```
<div id="MISanimals">...</div>
```
Edit the MIS-slide0 block, where all slideshow elements reside. You can:
- Add or remove <li>...</li> elements
- Remove descriptions if you are just going to show images.
- Remove links if you don't want to link images.
- Remove the next/previous buttons if you are not going to use them.
(NEW ON v4) Add as many MIS-slideX blocks (where X is a number that starts counting from 0), so you can have different slideshows on the same page!
You will be able to modify the time pause between images in the .js file by editing the WAIT variable.
Remember that you can customize the whole MIS interface using CSS.
If you are a coder, you can easily make an small script to update MIS automatically from your CMS.

Contact

Feel free to post a comment about MIS on my blog.

Minimalist Image Slideshow

Example 1. MIS with big images and descriptions

Introduction

Customizable

Easy to adapt

HTML descriptions

CSS Opacity

Thanks for watching!

Example 2. MIS with small images

What MIS is?

How to install

Contact

© 2010-2011 Marc Robledo