rocksdb/docs/_includes/plugins/slideshow.html

<div class="slideshowBlock pluginWrapper" id="slideshow"></div>
<script>
  var slideshowData = [
    {% for image in site.data.slideshow %}
    {
      id         : "{{ image.id }}",
      imagesrc   : "{{ image.src }}",
      tooltip    : "{{ image.tooltip }}",
      href       : "{{ image.link }}",
    },
    {% endfor %}
  ];
</script>
<script src="http://fb.me/react-with-addons-0.13.1.min.js"></script>
<script type="text/javascript">
  var Slideshow = React.createClass({displayName: "Slideshow",
    getInitialState: function() {
      return {
        currentSlide: 0,
      };
    },
    getDefaultProps: function() {
      return {
        data: slideshowData,
      };
    },
    handleSelect: function(id) {
      var index = this.props.data.map(function (el, elIndex) {
        return (
          elIndex
        );
      });
      var currentIndex = index.indexOf(id);
      this.setState({
        currentSlide: currentIndex,
      });
    },
    render: function() {
      return (
        React.createElement("div", {className: "slideshow"},
          React.createElement("div", {className: "slides"},
            this.props.data.map(this.renderSlide)
          ),
          React.createElement("div", {className: "pagination"},
            this.props.data.map(this.renderPager)
          )
        )
      );
    },
    renderSlide: function(child, index) {
      var classes = React.addons.classSet({
        'slide': true,
        'slideActive': this.state.currentSlide === index,
      });
      if (child.href) {
        return (
          React.createElement("div", {key: index, className: classes},
            React.createElement("a", {href: child.href, alt: child.tooltip, title: child.tooltip},
              React.createElement("img", {src: child.imagesrc, alt: child.tooltip, title: child.tooltip})
            )
          )
        );
      }
      return (
        React.createElement("div", {key: index, className: classes},
          React.createElement("img", {src: child.imagesrc, alt: child.tooltip})
        )
      );
    },
    renderPager: function(child, index) {
      var classes = React.addons.classSet({
        'pager': true,
        'pagerActive': this.state.currentSlide === index,
      });
      return (
        React.createElement("span", {key: index, className: classes, onClick: this.handleSelect.bind(this, index)})
      );
    },
  });

  function render(slideshowData) {
    React.render(
      React.createElement(Slideshow, {data: slideshowData}),
      document.getElementById('slideshow')
    );
  }
  render(slideshowData);
</script>