mallowlabs/0-slideshow.html

## 0-slideshow.html
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>0-slideshow</title>
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <meta name="viewport" content="width=320" />
  <style type="text/css"><!--
body { margin:0; }
img {
  margin:0;
  width:100%;
  position:absolute;
}
--> </style>
</head>
<body>
  <p id="tmp" style="display:none">Now loading...</p>
  <img src="" id="front" style="opacity:1.0;z-index:1">
  <img src="" id="back"  style="opacity:0.0;z-index:0">
</body>
<script type="text/javascript">
(function(document) {
  var $ = function(id) { return document.getElementById(id); }
  var index = 0;
  var images = [];

  // click event
  var onclick = function(img) {
    if (index % 2 == 0) {
      var front = $("front");
      var back = $("back");
    } else {
      var front = $("back");
      var back = $("front");
    }
    if (index >= img.length) { index = 0; }
    back.style.opacity = 1.0;

    var frontstyle = front.style;
    var timer = setInterval(function() {
      frontstyle.opacity -= 0.1;
      if(frontstyle.opacity <= 0.0) {
        clearInterval(timer);
        frontstyle.opacity = 0;
        front.src = images[index++];
        back.style.zIndex = parseInt(frontstyle.zIndex) + 1;
      }
    }, 100);
    setTimeout(scrollTo, 500, 0, 1);
  }

  // register click event
  $("front").addEventListener("click", function(img) {
    onclick(img);
  }, false);
  $("back").addEventListener("click", function(img) {
    onclick(img);
  }, false);

  // load image list
  var urlAjax = '/cgi?action=getFileList';
  var req = new XMLHttpRequest();
  req.onerror = function() { alert("error"); };
  req.onreadystatechange = function() {
    if (req.readyState == 4) {
      var tmp = $("tmp");
      tmp.innerHTML += req.responseText;
      var result = document.evaluate("//a[./img/@src='/images/icons/image.gif']", tmp, null, 7, null);
      var length = result.snapshotLength;
      for (var i = 0; i < length; i ++) {
        images.push(result.snapshotItem(i).textContent);
      };
      $("front").src = images[index++];
      $("back").src = images[index++];
      setTimeout(scrollTo, 500, 0, 1);
    }
  };
  var spurl = location.href.split('/');
  var share = spurl[4];
  var path = spurl.slice(5, spurl.length - 1).join('/');
  req.open("GET", urlAjax + '&currentShare=' + share+ '&currentDir=' + path , true);
  req.send(null);
})(document);
</script>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>0-slideshow</title>
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<meta name="viewport" content="width=320" />
	<style type="text/css"><!--
	body { margin:0; }
	img {
	margin:0;
	width:100%;
	position:absolute;
	}
	--> </style>
	</head>
	<body>
	<p id="tmp" style="display:none">Now loading...</p>
	<img src="" id="front" style="opacity:1.0;z-index:1">
	<img src="" id="back" style="opacity:0.0;z-index:0">
	</body>
	<script type="text/javascript">
	(function(document) {
	var $ = function(id) { return document.getElementById(id); }
	var index = 0;
	var images = [];

	// click event
	var onclick = function(img) {
	if (index % 2 == 0) {
	var front = $("front");
	var back = $("back");
	} else {
	var front = $("back");
	var back = $("front");
	}
	if (index >= img.length) { index = 0; }
	back.style.opacity = 1.0;

	var frontstyle = front.style;
	var timer = setInterval(function() {
	frontstyle.opacity -= 0.1;
	if(frontstyle.opacity <= 0.0) {
	clearInterval(timer);
	frontstyle.opacity = 0;
	front.src = images[index++];
	back.style.zIndex = parseInt(frontstyle.zIndex) + 1;
	}
	}, 100);
	setTimeout(scrollTo, 500, 0, 1);
	}

	// register click event
	$("front").addEventListener("click", function(img) {
	onclick(img);
	}, false);
	$("back").addEventListener("click", function(img) {
	onclick(img);
	}, false);

	// load image list
	var urlAjax = '/cgi?action=getFileList';
	var req = new XMLHttpRequest();
	req.onerror = function() { alert("error"); };
	req.onreadystatechange = function() {
	if (req.readyState == 4) {
	var tmp = $("tmp");
	tmp.innerHTML += req.responseText;
	var result = document.evaluate("//a[./img/@src='/images/icons/image.gif']", tmp, null, 7, null);
	var length = result.snapshotLength;
	for (var i = 0; i < length; i ++) {
	images.push(result.snapshotItem(i).textContent);
	};
	$("front").src = images[index++];
	$("back").src = images[index++];
	setTimeout(scrollTo, 500, 0, 1);
	}
	};
	var spurl = location.href.split('/');
	var share = spurl[4];
	var path = spurl.slice(5, spurl.length - 1).join('/');
	req.open("GET", urlAjax + '&currentShare=' + share+ '&currentDir=' + path , true);
	req.send(null);
	})(document);
	</script>
	</html>