images in a stack

3 files changed, 31 insertions, 8 deletions

diff --git a/public/assets/javascripts/ui/site/ProjectList.js b/public/assets/javascripts/ui/site/ProjectList.js
index 993d805..149cd41 100644
--- a/public/assets/javascripts/ui/site/ProjectList.js
+++ b/public/assets/javascripts/ui/site/ProjectList.js
@@ -4,13 +4,28 @@ var ProjectList = View.extend({
 	el: ".projectList",
 
 	events: {
-		"mouseenter .room": 'spinOn',
-		"mouseleave .room": 'spinOff',
+		"mouseenter .room": 'enter',
+		"mouseleave .room": 'leave',
 	},
 	
 	initialize: function(){
 	},
 	
+	timeout: null,
+	enter: function(){
+    clearTimeout(this.timeout)
+    this.advance()
+	},
+	
+	leave: function(){
+    clearTimeout(this.timeout)
+	},
+	
+	advance: function(){
+    this.timeout = setTimeout(this.advance.bind(this), 500)
+	}
+	
+/*
 	spinOn: function(e){
 		var iframe = $(e.currentTarget).find("iframe").get('0')
 		if (! iframe) return
@@ -22,5 +37,6 @@ var ProjectList = View.extend({
 		if (! iframe) return
 		iframe.contentWindow.postMessage("spin-off", window.location.origin)
 	}
+*/
 
 })
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 1328006..35ed951 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -360,17 +360,23 @@ iframe.embed {
 .room .images {
   position: absolute;
   top: 0; left: 0;
-  z-index: 2;
+  z-index: -1;
   width: 100%;
   height: 100%;
   text-align: center;
   overflow: hidden;
 }
-.room .images img {
-  width: 30%;
+.room .images div {
   position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center center;
 }
 
+/*
 .room .images[data-mediacount='1'] img:nth-child(1) { left: 20%; top: 20%; }
 
 .room .images[data-mediacount='2'] img:nth-child(1) { left: 51%; bottom: 0%; width: auto; height: 40%; }
@@ -384,6 +390,7 @@ iframe.embed {
 .room .images[data-mediacount='4'] img:nth-child(2) { left: 51%; bottom: 61%; }
 .room .images[data-mediacount='4'] img:nth-child(3) { right: 51%; top: 61%; }
 .room .images[data-mediacount='4'] img:nth-child(4) { left: 51%; top: 41%; }
+*/
 
 .page .btn {
 	clear: both;
diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs
index 45b73e2..c47dee0 100644
--- a/views/projects/list-projects.ejs
+++ b/views/projects/list-projects.ejs
@@ -13,12 +13,12 @@
 			<span class="room" style="background-color: rgb([[- project.color ]]);">
         <span class="mask" style="background-image: url([[- project.photo ]]);">
         </span>
-        <span class="images" data-mediaCount="[[- Math.min(project.media.length, 3) ]]">
+        <span class="images" data-mediaCount="[[- Math.min(project.media.length, 4) ]]">
           [[ mediaCount = 0 ]]
           [[ project.media.some(function(media){ ]]
             [[ if (media.media.type != "image") { return false } ]]
-            [[ if (++mediaCount > 3) { return true } ]]
-            <img src="[[- media.media.url ]]">
+            [[ if (++mediaCount > 4) { return true } ]]
+            <div style="background-image:url([[- media.media.url ]])"></div>
           [[ }) ]]
 			  </span>
 			</span>