Skip to content
Browse files

Initial commit

  • Loading branch information...
0 parents commit db46e4269427f367bfdabccd58eb3e68f748dea6 @oyvindkinsey committed
64 JsSlideshow.js
@@ -0,0 +1,64 @@
+/*
+ * JsSlideshow
+ * http://github.com/oyvindkinsey/JsSlideshow
+ * Copyright(c) 2010, Øyvind Sean Kinsey, http://kinsey.no/ oyvind@kinsey.no.
+ *
+ * MIT Licensed
+ *
+ */
+function JsSlideshow(config){
+ var images = [], target, time, transition, timer, image, steps, i, len, first;
+
+ function _fade(opacity){
+ opacity = opacity - (1 / steps);
+ if (opacity > 0) {
+ image.style.opacity = opacity;
+ image.style.filter = "alpha(opacity=" + (opacity * 100) + ")";
+ timer = window.setTimeout(function(){
+ _fade(opacity);
+ }, (transition / steps));
+ }
+ else {
+ target.insertBefore(image, target.firstChild);
+ image.style.opacity = 1;
+ image.style.filter = "alpha(opacity=100)";
+ images = target.getElementsByTagName("img");
+ image = images[images.length - 1];
+ timer = window.setTimeout(function(){
+ _fade(1);
+ }, time);
+ }
+ }
+
+ target = typeof config.target === "string" ? document.getElementById(config.target) : config.target;
+ images = config.images;
+ time = config.time;
+ transition = config.transition;
+ steps = config.steps || 50;
+
+ if (config.url) {
+ target.onclick = function(){
+ window.location = config.url;
+ };
+ target.style.cursor = "pointer";
+ }
+
+ for (i = 0, len = images.length; i < len; i++) {
+ image = document.createElement("img");
+ image.style.position = "absolute";
+ image.style.top = "0px";
+ image.style.left = "0px";
+ image.src = images[i];
+ if (first) {
+ target.insertBefore(image, target.firstChild);
+ }
+ else {
+ first = image;
+ target.appendChild(image);
+ }
+ }
+ image = first;
+ timer = window.setTimeout(function(){
+ _fade(1);
+ }, time);
+}
BIN images/4504470765_90aa261be6.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/4510204607_42bbb55d9c.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/4510826808_f6edfc906a.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/4513712885_0c008e3638.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 index.html
@@ -0,0 +1,44 @@
+<!<!doctype html>
+<html>
+ <head>
+ <title>JsSlideshow</title>
+ <script type="text/javascript" src="JsSlideshow.js">
+ </script>
+ <style type="text/css">
+ #slideshow {
+ height: 332px;
+ width: 332px;
+ overflow: hidden;
+ position: relative;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="slideshow">
+ </div>
+ The code needed:
+ <br/>
+ <pre>
+var sl = new JsSlideshow({
+ target: "slideshow",
+ images: ["4504470765_90aa261be6.jpg", "images/4510204607_42bbb55d9c.jpg", "images/4510826808_f6edfc906a.jpg", "images/4513712885_0c008e3638.jpg"],
+ transition: 3000,
+ time: 2000,
+ url: "http://www.flickr.com/photos/bobowen"
+});
+ </pre>
+ The images come from <a href="http://www.flickr.com/photos/bobowen">http://www.flickr.com/photos/bobowen</a>
+ and is shared a under Creative Commons Attribution.
+ <script type="text/javascript">
+ (function(){
+ var sl = new JsSlideshow({
+ target: "slideshow",
+ images: ["images/4504470765_90aa261be6.jpg", "images/4510204607_42bbb55d9c.jpg", "images/4510826808_f6edfc906a.jpg", "images/4513712885_0c008e3638.jpg"],
+ transition: 3000,
+ time: 2000,
+ url: "http://www.flickr.com/photos/bobowen"
+ });
+ })();
+ </script>
+ </body>
+</html>

0 comments on commit db46e42

Please sign in to comment.
Something went wrong with that request. Please try again.