jenshedqvist/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Slideshow and more

A tweet-sized slideshow and DOM show/hide iteration utility.
Features


Shows/Hides a collection of DOM-elements with a certain interval
Interval delay can be set in ms
Index where the slideshow should start can be set

See examples below in test.html. The example uses JS 1.6 filter function, so don't expect it to run in IE<9.
IMPORTANT NOTICE: you shouldn't actually use this god-awful (wonderfully geeky rainbow) piece of crap code. Always prefer JSlinted, well formed and secure code over unstable, hard-to-read error-prone ninja code.

  
## annotated.js
function(
	e, // a collection of DOM elements
	s, // speed of the slideshow in ms
	c, // where to start the show (optional)
	m, // define variable m ("max value")
	i  // define variable i ("iteration")
){
	m = e.length - 1, 	// store the number of slides based on provided elements (@e)
	c = c || 0; 		// an index of the currently visible item, will start from item one (0) in collection if not provided by @c
	function f() { 		// a callback function to be called with interval
		for(i = m; ~i; i--) // loop through the elements provided with @e backwards with a tilde "guard" that i "is not -1"
			e[i].style.display = i == c ? '' : 'none'; // hide items that isn't current, show the one that is
		c = ++c%(m+1); // add one (1) to current item index, if c becomes m+1 it set to 0 (no remainder)
	}
	f(); // call function right away to prevent FOUC when waiting for interval (@s) to kick in
	setInterval(f, s); // start the show with the defined interval (@s)
}

## index.js
function(e,s,m,c,p){m=e.length-1,c=c||0;function f(){for(i=m;~i;i--)e[i].style.display=i==c?"":"none";c=++c%(m+1);}f();setInterval(f,s);}

## package.json
{
  "name": "SlideshowAndMore",

  "description": "A slideshow with interval for image carousels and more!",

  "keywords": [
    "slideshow",
    "timer",
    "images",
    "spinner"
  ]
}

## test.html
<!DOCTYPE html>
<title>Carousel</title>
<h2>Image Slideshow</h2>
<ul id="slideshow" style="list-style:none;">
	<li><img src="http://www.placekitten.com/160/100" height="100" width="160"></li>
	<li><img src="http://www.placekitten.com/g/160/100" height="100" width="160"></li>
	<li><img src="http://www.placekitten.com/170/100" height="100" width="160"></li>
</ul>
<h2>Qoute Carousel <small>(start at 2:nd qoute)</small></h2>
<div id="steven_seagal_qoutes">
	<blockqoute>"I am hoping that I can be known as a great writer and actor some day, rather than a sex symbol."</blockqoute>
	<blockqoute>"Trust your doubt. Always fight for your beliefs. That is the path beyond thought."</blockqoute>
	<blockqoute>"I was born with a serious spiritual consciousness and for many years studied different paths."</blockqoute>
	- Steven Seagal
</div>
<h2>Spinner</h2>
<abbr title="Loading, please wait..." id="spinner" style="font-size: 25px; font-weight: bold; border: 0;">
	<span>|</span>
	<span>/</span>
	<span>-</span>
	<span>\</span>
	<span>|</span>
	<span>/</span>
	<span>-</span>
	<span>\</span>
</abbr>
<script>
  var myFunction = function(e,s,c,m,i){m=e.length-1,c=c||0;function f(){for(i=m;~i;i--)e[i].style.display=i==c?"":"none";c=++c%(m+1);}f();setInterval(f,s);}

  var SlideShow = myFunction;
  var slides = getChildrenOf('slideshow');
  SlideShow(slides, 1500);

  var Carousel = myFunction;
  var qoutes = getChildrenOf('steven_seagal_qoutes');
  Carousel(qoutes, 3200, 1);

  var Spinner = myFunction;
  var chars = getChildrenOf('spinner');
  Spinner(chars, 150);

  function getChildrenOf(id) { return [].filter.call(document.getElementById(id).childNodes, function(y){return (y.nodeType === 1)}); };
</script>
	function(
	e, // a collection of DOM elements
	s, // speed of the slideshow in ms
	c, // where to start the show (optional)
	m, // define variable m ("max value")
	i // define variable i ("iteration")
	){
	m = e.length - 1, // store the number of slides based on provided elements (@e)
	c = c \|\| 0; // an index of the currently visible item, will start from item one (0) in collection if not provided by @c
	function f() { // a callback function to be called with interval
	for(i = m; ~i; i--) // loop through the elements provided with @e backwards with a tilde "guard" that i "is not -1"
	e[i].style.display = i == c ? '' : 'none'; // hide items that isn't current, show the one that is
	c = ++c%(m+1); // add one (1) to current item index, if c becomes m+1 it set to 0 (no remainder)
	}
	f(); // call function right away to prevent FOUC when waiting for interval (@s) to kick in
	setInterval(f, s); // start the show with the defined interval (@s)
	}
	{
	"name": "SlideshowAndMore",

	"description": "A slideshow with interval for image carousels and more!",

	"keywords": [
	"slideshow",
	"timer",
	"images",
	"spinner"
	]
	}
	<!DOCTYPE html>
	<title>Carousel</title>
	<h2>Image Slideshow</h2>
	<ul id="slideshow" style="list-style:none;">
	<li><img src="http://www.placekitten.com/160/100" height="100" width="160"></li>
	<li><img src="http://www.placekitten.com/g/160/100" height="100" width="160"></li>
	<li><img src="http://www.placekitten.com/170/100" height="100" width="160"></li>
	</ul>
	<h2>Qoute Carousel <small>(start at 2:nd qoute)</small></h2>
	<div id="steven_seagal_qoutes">
	<blockqoute>"I am hoping that I can be known as a great writer and actor some day, rather than a sex symbol."</blockqoute>
	<blockqoute>"Trust your doubt. Always fight for your beliefs. That is the path beyond thought."</blockqoute>
	<blockqoute>"I was born with a serious spiritual consciousness and for many years studied different paths."</blockqoute>
	- Steven Seagal
	</div>
	<h2>Spinner</h2>
	<abbr title="Loading, please wait..." id="spinner" style="font-size: 25px; font-weight: bold; border: 0;">
	<span>\|</span>
	<span>/</span>
	<span>-</span>
	<span>\</span>
	<span>\|</span>
	<span>/</span>
	<span>-</span>
	<span>\</span>
	</abbr>
	<script>
	var myFunction = function(e,s,c,m,i){m=e.length-1,c=c\|\|0;function f(){for(i=m;~i;i--)e[i].style.display=i==c?"":"none";c=++c%(m+1);}f();setInterval(f,s);}

	var SlideShow = myFunction;
	var slides = getChildrenOf('slideshow');
	SlideShow(slides, 1500);

	var Carousel = myFunction;
	var qoutes = getChildrenOf('steven_seagal_qoutes');
	Carousel(qoutes, 3200, 1);

	var Spinner = myFunction;
	var chars = getChildrenOf('spinner');
	Spinner(chars, 150);

	function getChildrenOf(id) { return [].filter.call(document.getElementById(id).childNodes, function(y){return (y.nodeType === 1)}); };
	</script>