構造修正

tatsumihiroki · Jun 6, 2013 · e3e1cbd · e3e1cbd
1 parent 9745d63
commit e3e1cbd
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 53 deletions.
diff --git a/app/assets/javascripts/image-modal.js b/app/assets/javascripts/image-modal.js
@@ -1,8 +1,7 @@
 $(function(){
-    $("body").append("<div id='glayLayer'></div><div id='overLayer'></div>")
+    $("body").append("<div id='glayLayer'></div>")
 
-    $("#glayLayer").click(function(){
-        $(this).hide()
-        $("#overLayer").hide()
+    $("#glayLayer").click(function() {
+        $(this).hide();
     })
 })
diff --git a/app/assets/javascripts/photos.js b/app/assets/javascripts/photos.js
@@ -70,7 +70,7 @@ function onLoadData(data) {
 	,	tmpl = '<% _.each(data, function(image) { %> '
 			+	'<li class="imageBox">'
 			+	'<figure class="imagemodal">'
-			+	'<img class="move" src="<%= image.avatar_file_name %>" width="200" data-pos="<%= image.id %>">'
+			+	'<img class="move" src="<%= image.avatar_file_name %>" width="200" data-pos="<%= image.id %>" data-text="<%= image.name %>" data-pref="<%= image.prefecture %>">'
 			+	'<figcaption><%= image.name %>'
 			+	'</figcaption>'
 			+	'</figure>'
@@ -114,32 +114,35 @@ $(document).ready(new function() {
 		$("#menu").toggleClass('togmenu');
 	});
 
-	$(document).bind('scroll', onScroll);
+	$(document).on('scroll', onScroll);
 
-		loadData();
+	loadData();
 
-		$(document).on("click",".picmenu",function(e) {
+	$(document).on("click",".picmenu",function(e) {
 
-			console.log($(this));
+		console.log($(this));
 
-			var likeparams=$(this).attr("data-pos");
+		var likeparams=$(this).attr("data-pos");
 
-			clicklike(likeparams,$(this).next(),$(this))
+		clicklike(likeparams,$(this).next(),$(this))
 
-			$(this).find('.likephoto').addClass('disabled');
+		$(this).find('.likephoto').addClass('disabled');
 
-		});
+	});
 
 	$(document).on("click",".move",function(e) {
 
-		var lookparams=$(this).attr("data-pos");
-
+		var $this = $(this)
+		,	lookparams = $this.attr("data-pos");
 		clicklook(lookparams)
 
-		console.log($(this).parent().parent().children('.prefecturemenu').text());
-
-		$("#glayLayer").show()
-		$("#overLayer").show().html("<img src='"+$(this).attr("src")+"' /><div id='modalright'><figcaption>"+$(this).next().text()+"<br>"+$(this).parent().parent().children('.prefecturemenu').text()+"</figcaption></div>")
+		$("#glayLayer")
+			.html('<div id="modalright">'
+				+ '<figure><img src="' + $this.attr('src') + '">'
+				+ '<figcaption>' + $this.data('text')
+				+ '<br>' + $this.data('pref')
+				+ '</figcaption></figure></div>')
+			.show();
 
 	});
 });
diff --git a/app/assets/stylesheets/photos.css.scss b/app/assets/stylesheets/photos.css.scss
@@ -8,6 +8,7 @@ $img_w: 196px;
 
 
 header {
+
 	h1 {
 	    margin: 10px 0 3px 0;
 	    text-align: center;
@@ -394,51 +395,51 @@ header {
 }
 
 .field{
-	margin:0 auto;
-	label{
-		text-align:center;
+	margin: 0 auto;
+	label {
+		text-align: center;
 	}
-	input{
-		width:100%;
+	input {
+		width: 100%;
 	}
-	textarea{
-		width:100%;
+	textarea {
+		width: 100%;
 	}
-	.actions input{
-		text-align:center;
+	.actions input {
+		text-align: center;
 	}
 }
 
 /* image-modal */
 
-#glayLayer{
-	display:none;
-	position:fixed;
-	top:0;
-	left:0;
-	height:100%;
-	width:100%;
-	background:black;
-	opacity: 0.60;
-	filter:alpha(opacity=60);
-}
-#overLayer{
-	display:none;
+#glayLayer {
+	display: none;
 	position: fixed;
-	top:50%;
-	left:50%;
-	margin-top:-230px;
-	margin-left:-225px;
-	width:500px;
-	background-color:#fff;
-	img{
-		width:500px;
-	}
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	background: rgba(0,0,0,0.6);
+	filter: alpha(opacity=60);
+
 	#modalright{
-		width:400px;
-		margin:0 auto;
-		height:100px;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		margin-top: -230px;
+		margin-left: -225px;
+
+		width: 500px;
 		background-color:#fff;
+
+		img {
+			width: 500px;
+		}
+		figcaption {
+			margin: 0 auto;
+			height: 100px;
+			width: 400px;
+		}
 	}
 }