Initial commit

themes/reveal-hugo/exampleSite/static/plugin/gallery/gallery.css

@@ -0,0 +1,67 @@
+.reveal ul.gallery {
+	position: relative;
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	width: 960px;
+	height: 700px;
+}
+
+.reveal ul.gallery[data-mode=full-screen] {
+	width: 100%;
+	height: 100%;
+}
+
+.gallery li {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 960px;
+	height: 700px;
+	opacity: 0;
+	-webkit-transition: opacity 0.3s ease-in-out;
+	-moz-transition: opacity 0.3s ease-in-out;
+	transition: opacity 0.3s ease-in-out;
+}
+
+.gallery[data-mode=full-screen] li {
+	width: 100%;
+	height: 100%;
+	background-size: 100% 100%;
+	background-attachment:fixed;
+    background-position: center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+
+
+.gallery .active {
+	opacity: 1;
+}
+
+.gallery .inactive {
+	opacity: 0;
+}
+
+.gallery img {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	border: none !important;
+}
+
+.gallery label {
+	display: block;
+	position: absolute;
+	bottom: 20px;
+	min-width: 150px;
+	left: 0;
+	padding: 10px;
+	background-color: rgba(0, 0, 0, 0.6);
+	color: #fff;
+	font-size: 24px;
+}

themes/reveal-hugo/exampleSite/static/plugin/gallery/gallery.plugin.js

@@ -0,0 +1,119 @@
+(function(Gallery) {
+	var galleryTimer, galleryMode;
+
+	Gallery.step = function (items, iterations) {
+		var length = items.length,
+			ptr = 0,
+			loops = 0;
+
+		return function () {
+			if (iterations > 0 && loops === iterations) {
+				return;
+			}
+			items[ptr].className = "inactive";
+			if (ptr === length - 1) {
+				loops++;
+				if (iterations === 0 || loops < iterations) {
+					ptr = 0;
+				}
+			} else {
+				ptr++;
+			}
+			items[ptr].className = "active";
+		};
+	};
+
+	Gallery.start = function (galleryNode, contextNode) {
+		contextNode = contextNode || document.body.firstChild;
+		galleryMode = galleryNode.dataset.mode || 'normal';
+
+		if (galleryMode === 'full-screen') {
+			// FIXME remove depenency on Reveal, have a callback? function
+			// that will get a root node to move full screen slides to (ie. slidesNode)
+
+			// for full screen mode we need to: 
+			// - take the gallery out of the flow and insert it before "slides"
+			// - hide slides
+			// - make it full screen
+
+			var placeholder = document.createElement("div");
+			placeholder.id = "gallery-placeholder";
+			galleryNode.parentNode.replaceChild(placeholder, galleryNode);
+
+			if (contextNode.parentNode) {
+				contextNode.parentNode.insertBefore(galleryNode, contextNode);
+			}
+		}
+
+		var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
+		items.forEach(function (item, index) {
+			if (index === 0) {
+				item.className = "active";
+			} else {
+				item.className = "inactive";
+			}
+			var label = item.querySelector("label");
+			var img = item.querySelector("img");
+
+			if (galleryMode === 'full-screen') {
+				img.style.display = "none";
+				item.style.backgroundImage = "url(" + img.src + ")";
+			} else {
+				img.style.display = "";
+			}
+
+			if (!label && img.attributes.alt) {
+				label = document.createElement("label");
+				label.innerHTML = img.attributes.alt.value;
+				item.appendChild(label);
+			}
+		});
+
+		var iterations = galleryNode.dataset.iterations ? +galleryNode.dataset.iterations : 1;
+		var interval = (galleryNode.dataset.interval || 1) * 1000;
+		galleryTimer = setInterval(Gallery.step(items, iterations), interval);
+	};
+
+	// FIXME Gallery.stop should take elem and root nodes as well
+	Gallery.stop = function (galleryNode, contextNode) {
+		clearInterval(galleryTimer);
+
+		if (galleryMode === "full-screen") {
+			// - put the gallery back where it was
+			var placeholder = document.getElementById("gallery-placeholder");
+			placeholder.parentNode.replaceChild(galleryNode, placeholder);
+
+			var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
+			items.forEach(function (item, index) {
+				var img = item.querySelector("img");
+				item.style.backgroundImage = "";
+				img.style.display = "";
+			});
+		}
+	};
+})(window.Gallery = window.Gallery || {});(function() {
+	if( typeof window.addEventListener === 'function' ) {
+		var slidesNode = document.querySelector(".slides");
+		Reveal.addEventListener("slidechanged", function (event) {
+	    console.log(event)
+			var galleryNode = event.previousSlide.querySelector('.gallery') || document.querySelector('.reveal > .gallery');
+			if (galleryNode) {
+				Gallery.stop(galleryNode, slidesNode);
+			}
+
+			galleryNode = event.currentSlide.querySelector('.gallery');
+			if (galleryNode) {				
+				Gallery.start(galleryNode, slidesNode);
+			}
+
+		});
+
+		// during initial load
+		if (Reveal.getCurrentSlide()) {
+			var galleryNode = Reveal.getCurrentSlide().querySelector('.gallery');
+			if (galleryNode) {
+				Gallery.start(galleryNode, slidesNode);
+			}
+		}
+	}
+})();