clemens-tolboom/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>'slideshow'</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <style>
      #stage {
        position: relative;
        overflow: hidden;
        width: 800px;
        height: 800px;
      }
      #stage div.slide {
        display:inline;
        position:absolute;
        background-color: white;
      }
    </style>
    <script>
      d3.selection.prototype.moveToFront = function() {
        return this.each(function() {
          this.parentNode.appendChild(this);
        });
      };
      d3.selection.prototype.moveToBack = function() {
        return this.each(function() {
          var firstChild = this.parentNode.firstChild;
          if (firstChild) {
            this.parentNode.insertBefore(this, firstChild);
          }
        });
      };
    </script>
    <script>
      (function($) {

        $('document').ready(function() {
          var data = [
            {
              uri: "https://drupal.org/node/1960824"
            },
            {
              uri: "https://drupal.org/node/1762204"
            },
            {
              uri: "http://d3js.org/"
            }
          ];
          var width = 800;
          var width_20 = width / 5;
          var width_80 = width * 4 / 5;
          var height = 600;
          var height_20 = height / 5;

          var stage = d3.select('#stage')
                  ;
          var actors = stage
                  .selectAll('div.slide')
                  .data(data)
                  ;
          actors
                  .enter()
                  .append('div')
                  .classed('slide', true)
                  .append('iframe')
                  .attr('src', function(d) {
                    return d.uri;
                  })
                  .attr('width', '100%')
                  .attr('height', '100%')
                  ;
          var focus = 0;
          var update = function() {
            focus++;
            focus = focus % data.length;
            actors
                    .classed('focus', function(d, index) {
                      return index === focus;
                    })
                    .style('z-index', function(d, index) {
                      return ((index === focus) ? 100 : 0);
                    })
                    .transition()
                    .duration(1000)
                    .ease('linear')
                    .style('width', function(d, index) {
                      return ((index === focus) ? width_80 : width_20) + 'px';
                    })
                    .style('height', function(d, index) {
                      return ((index === focus) ? height : height_20) + 'px';
                    })
                    .style('top', function(d, index) {
                      return ((index === focus) ? 0 : index * height_20) + 'px';
                    })
                    .style('left', function(d, index) {
                      return ((index === focus) ? 0 : width_80) + 'px';
                    })
                    ;
            setTimeout(update, 2000);
          }
          update();
        });
      })(jQuery);
    </script>
  </head>
  <body>
    <div id="stage"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>'slideshow'</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<style>
	#stage {
	position: relative;
	overflow: hidden;
	width: 800px;
	height: 800px;
	}
	#stage div.slide {
	display:inline;
	position:absolute;
	background-color: white;
	}
	</style>
	<script>
	d3.selection.prototype.moveToFront = function() {
	return this.each(function() {
	this.parentNode.appendChild(this);
	});
	};
	d3.selection.prototype.moveToBack = function() {
	return this.each(function() {
	var firstChild = this.parentNode.firstChild;
	if (firstChild) {
	this.parentNode.insertBefore(this, firstChild);
	}
	});
	};
	</script>
	<script>
	(function($) {

	$('document').ready(function() {
	var data = [
	{
	uri: "https://drupal.org/node/1960824"
	},
	{
	uri: "https://drupal.org/node/1762204"
	},
	{
	uri: "http://d3js.org/"
	}
	];
	var width = 800;
	var width_20 = width / 5;
	var width_80 = width * 4 / 5;
	var height = 600;
	var height_20 = height / 5;

	var stage = d3.select('#stage')
	;
	var actors = stage
	.selectAll('div.slide')
	.data(data)
	;
	actors
	.enter()
	.append('div')
	.classed('slide', true)
	.append('iframe')
	.attr('src', function(d) {
	return d.uri;
	})
	.attr('width', '100%')
	.attr('height', '100%')
	;
	var focus = 0;
	var update = function() {
	focus++;
	focus = focus % data.length;
	actors
	.classed('focus', function(d, index) {
	return index === focus;
	})
	.style('z-index', function(d, index) {
	return ((index === focus) ? 100 : 0);
	})
	.transition()
	.duration(1000)
	.ease('linear')
	.style('width', function(d, index) {
	return ((index === focus) ? width_80 : width_20) + 'px';
	})
	.style('height', function(d, index) {
	return ((index === focus) ? height : height_20) + 'px';
	})
	.style('top', function(d, index) {
	return ((index === focus) ? 0 : index * height_20) + 'px';
	})
	.style('left', function(d, index) {
	return ((index === focus) ? 0 : width_80) + 'px';
	})
	;
	setTimeout(update, 2000);
	}
	update();
	});
	})(jQuery);
	</script>
	</head>
	<body>
	<div id="stage"></div>
	</body>
	</html>