Permalink
Browse files

構造修正

  • Loading branch information...
1 parent 9745d63 commit e3e1cbd98e6230c82e3d122b964c0011ac1d8c3c @wacky wacky committed Jun 6, 2013
Showing with 56 additions and 53 deletions.
  1. +3 −4 app/assets/javascripts/image-modal.js
  2. +18 −15 app/assets/javascripts/photos.js
  3. +35 −34 app/assets/stylesheets/photos.css.scss
@@ -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();
})
})
@@ -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();
});
});
@@ -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;
+ }
}
}

0 comments on commit e3e1cbd

Please sign in to comment.