new
This commit is contained in:
Nicolas Bally
parent
dfe98283b5
commit
7656116642
270
app/assets/javascripts/popover.coffee
Normal file
270
app/assets/javascripts/popover.coffee
Normal file
@ -0,0 +1,270 @@
|
||||
bottom = 0
|
||||
prev_link = ""
|
||||
|
||||
$("document").ready ->
|
||||
|
||||
position_img_now = ->
|
||||
|
||||
|
||||
|
||||
# alert $("#large .large-img").outerHeight(false)
|
||||
|
||||
imgheight = $("#large .large-img").outerHeight(false) + $("#large h3").outerHeight(false)
|
||||
|
||||
|
||||
margintop = (( $(window).height() - imgheight) / 2 )
|
||||
|
||||
$("#large .large-img").css
|
||||
"margin-top" :(margintop+"px")
|
||||
#"width" : "100px"
|
||||
|
||||
|
||||
|
||||
position_img = ->
|
||||
$("#large .large-img").one "load", ->
|
||||
|
||||
position_img_now()
|
||||
|
||||
|
||||
|
||||
$("#video").click ->
|
||||
maxwidth = 1000
|
||||
maxheight = 900
|
||||
|
||||
|
||||
|
||||
|
||||
prev_link = $(this)
|
||||
$("body").append "<div id='large'></div>"
|
||||
title = false
|
||||
|
||||
|
||||
|
||||
$("#large").append "<div class='img_container first' style='width:90%;margin:auto;'></div>"
|
||||
$("#large").append "<img src='/close.png' class='close_link' />"
|
||||
$(".img_container.first").append '<iframe width="1000" height="563" src="//www.youtube.com/embed/ED4b38n4d-U?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>'
|
||||
|
||||
|
||||
$(".img_container.first").append "<h3>Vidéo de présentation</h3>"
|
||||
|
||||
|
||||
$("#large").fadeIn(500)
|
||||
position_img();
|
||||
if $(window).height() > (maxheight+100)
|
||||
$("#large .large-img").css
|
||||
"max-height" : maxheight
|
||||
else
|
||||
$("#large .large-img").css
|
||||
"max-height" : "85%"
|
||||
|
||||
if $(window).width() > (maxwidth+100)
|
||||
$("#large .large-img").css
|
||||
"max-width" : maxwidth
|
||||
else
|
||||
$("#large .large-img").css
|
||||
"max-width" : "85%"
|
||||
resize();
|
||||
|
||||
$("#large .img_container.first").css
|
||||
"padding-top": (($(window).height()- $("#large .img_container.first iframe").height()-50)/ 2)+"px"
|
||||
#position_img();
|
||||
|
||||
|
||||
false
|
||||
|
||||
|
||||
$(".expandable_image").click ->
|
||||
maxwidth = 1000
|
||||
maxheight = 900
|
||||
|
||||
|
||||
|
||||
|
||||
prev_link = $(this)
|
||||
$("body").append "<div id='large'></div>"
|
||||
title = false
|
||||
|
||||
|
||||
|
||||
$("#large").append "<div class='img_container first'></div>"
|
||||
$("#large").append "<img src='/close.png' class='close_link' />"
|
||||
$(".img_container.first").append "<img src="+$(this).attr("href")+" class='large-img' />"
|
||||
|
||||
if $(this).attr "title"
|
||||
title = $(this).attr "title"
|
||||
$(".img_container.first").append "<h3>"+title+"</h3>"
|
||||
|
||||
$("#large .large-img").one "load", ->
|
||||
$("#large").fadeIn(500)
|
||||
position_img();
|
||||
if $(window).height() > (maxheight+100)
|
||||
$("#large .large-img").css
|
||||
"max-height" : maxheight
|
||||
else
|
||||
$("#large .large-img").css
|
||||
"max-height" : "85%"
|
||||
|
||||
if $(window).width() > (maxwidth+100)
|
||||
$("#large .large-img").css
|
||||
"max-width" : maxwidth
|
||||
else
|
||||
$("#large .large-img").css
|
||||
"max-width" : "85%"
|
||||
|
||||
position_img();
|
||||
|
||||
|
||||
false
|
||||
|
||||
|
||||
$(".rea-gal a").click ->
|
||||
maxwidth = 1000
|
||||
maxheight = 900
|
||||
|
||||
|
||||
prev_link = $(this)
|
||||
$("body").append "<div id='large'></div>"
|
||||
title = false
|
||||
|
||||
|
||||
$("#large").append "<img src='/arrow-next.png' class='next' />"
|
||||
$("#large").append "<img src='/arrow-prev.png' class='prev' />"
|
||||
$("#large").append "<img src='/close.png' class='close_link' />"
|
||||
|
||||
$("#large").append "<div class='img_container first'></div>"
|
||||
$(".img_container.first").append "<img src="+$(this).attr("href")+" class='large-img' />"
|
||||
|
||||
if $(this).attr "title"
|
||||
title = $(this).attr "title"
|
||||
$(".img_container.first").append "<h3>"+title+"</h3>"
|
||||
|
||||
$("#large .large-img").one "load", ->
|
||||
$("#large").fadeIn(500)
|
||||
position_img();
|
||||
if $(window).height() > (maxheight+100)
|
||||
$("#large .large-img").css
|
||||
"max-height" : maxheight
|
||||
else
|
||||
$("#large .large-img").css
|
||||
"max-height" : "85%"
|
||||
|
||||
if $(window).width() > (maxwidth+100)
|
||||
$("#large .large-img").css
|
||||
"max-width" : maxwidth
|
||||
else
|
||||
$("#large .large-img").css
|
||||
"max-width" : "85%"
|
||||
|
||||
position_img();
|
||||
|
||||
|
||||
false
|
||||
|
||||
|
||||
|
||||
$("body").on "click", "#large", ->
|
||||
$(this).fadeOut 300, ->
|
||||
$(this).remove()
|
||||
|
||||
|
||||
$("body").on "click" ,"#large .prev",->
|
||||
|
||||
if prev_link.prev("a").length > 0
|
||||
link = prev_link.closest("a").prev("a")
|
||||
|
||||
|
||||
|
||||
else
|
||||
link = prev_link.closest("div").children("a:last")
|
||||
|
||||
|
||||
#titre = photo.find("h3")
|
||||
$(".img_container.first").fadeOut 300, ->
|
||||
$("#large h3").remove()
|
||||
if link.attr "title"
|
||||
title = link.attr "title"
|
||||
$(".img_container.first").append "<h3>"+title+"</h3>"
|
||||
|
||||
|
||||
$('#large .large-img').attr("src", link.attr("href"))
|
||||
$("#large .large-img").one "load", ->
|
||||
$(".img_container.first").fadeIn()
|
||||
position_img();
|
||||
prev_link = link
|
||||
|
||||
false
|
||||
|
||||
|
||||
$("body").on "click" ,"#large .next",->
|
||||
|
||||
if prev_link.next("a").length > 0
|
||||
link = prev_link.closest("a").next("a")
|
||||
|
||||
|
||||
|
||||
else
|
||||
link = prev_link.closest("div").children("a:first")
|
||||
|
||||
|
||||
#titre = photo.find("h3")
|
||||
|
||||
$(".img_container.first").fadeOut 300, ->
|
||||
$("#large h3").remove()
|
||||
if link.attr "title"
|
||||
title = link.attr "title"
|
||||
$(".img_container.first").append "<h3>"+title+"</h3>"
|
||||
|
||||
$('#large .large-img').attr("src", link.attr("href"))
|
||||
$("#large .large-img").one "load", ->
|
||||
$(".img_container.first").fadeIn()
|
||||
position_img();
|
||||
prev_link = link
|
||||
|
||||
false
|
||||
|
||||
|
||||
|
||||
left =0
|
||||
|
||||
top = 0
|
||||
offset= 0
|
||||
|
||||
resize = ->
|
||||
|
||||
pos = $(".center:first-child").offset().left
|
||||
$(".menu").css
|
||||
"padding-right" : pos+"px"
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$(".rea-gal").each ->
|
||||
|
||||
$(this).find("img").css "width", Math.floor(((100) )/ 5)+"%"
|
||||
|
||||
|
||||
$("#large").css "min-height", ($(window).height()-30)+"px"
|
||||
|
||||
$(".slider").each ->
|
||||
$(this).css({"width": $(window).width()+"px"})
|
||||
|
||||
height = ($(window).height())
|
||||
optimal_height = Math.round($(this).width()/ 1.66)
|
||||
if optimal_height < height
|
||||
height = optimal_height
|
||||
|
||||
$(this).css({"height": height+"px"})
|
||||
|
||||
|
||||
position_img_now();
|
||||
|
||||
|
||||
|
||||
|
||||
resize()
|
||||
|
||||
$(window).on "resize", ->
|
||||
resize()
|
||||
|
||||
|
||||
76
app/assets/stylesheets/popover.scss
Normal file
76
app/assets/stylesheets/popover.scss
Normal file
@ -0,0 +1,76 @@
|
||||
#large{
|
||||
display:none;
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:rgba(0,0,0,0.8);
|
||||
z-index:10;
|
||||
|
||||
h3{
|
||||
color:white;
|
||||
text-align:center;
|
||||
margin-top:5px;
|
||||
margin-bottom:0;
|
||||
font-weight:300;
|
||||
font-size:0.95em;
|
||||
|
||||
}
|
||||
.next, .prev{
|
||||
width:20px;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
cursor:pointer;
|
||||
|
||||
}
|
||||
.prev{
|
||||
left:15px;
|
||||
}
|
||||
.next{
|
||||
right:15px;
|
||||
}
|
||||
|
||||
.close_link{
|
||||
position:absolute;
|
||||
top:10px;
|
||||
left:10px;
|
||||
width:40px;
|
||||
|
||||
}
|
||||
|
||||
.img_container{
|
||||
height:100%;
|
||||
width:100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.large-img{
|
||||
cursor:pointer;
|
||||
padding:10px;
|
||||
background:rgba(250, 250, 250, 0.9);
|
||||
display:block;
|
||||
margin:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.rea-gal{
|
||||
padding-left:0px;
|
||||
|
||||
margin-right:-5px;
|
||||
margin-bottom:-5px;
|
||||
img{
|
||||
padding-right:5px;
|
||||
padding-bottom:5px;
|
||||
width:200px;
|
||||
float:left;
|
||||
box-sizing: border-box;
|
||||
&:hover{
|
||||
opacity:0.8;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
73
app/assets/stylesheets/qi_grids.scss
Normal file
73
app/assets/stylesheets/qi_grids.scss
Normal file
@ -0,0 +1,73 @@
|
||||
.columns{
|
||||
|
||||
|
||||
display:block;
|
||||
|
||||
box-sizing: border-box;
|
||||
float:left;
|
||||
display:inline-block;
|
||||
padding:0 5px;
|
||||
|
||||
&:first-child{
|
||||
padding-left:0px;
|
||||
|
||||
}
|
||||
&:last-child{
|
||||
padding-right:0px;
|
||||
|
||||
}
|
||||
|
||||
&.span_12{
|
||||
width:100%;
|
||||
|
||||
}
|
||||
|
||||
&.span_11{
|
||||
width:100/12*11;
|
||||
|
||||
}
|
||||
&.span_10{
|
||||
width:percentage(1/12*10);
|
||||
|
||||
}
|
||||
&.span_9{
|
||||
width:percentage(1/12*9);
|
||||
|
||||
}
|
||||
&.span_8{
|
||||
width:percentage(1/12*8);
|
||||
|
||||
}
|
||||
&.span_7{
|
||||
width:percentage(1/12*7);
|
||||
|
||||
}
|
||||
|
||||
&.span_6{
|
||||
width:percentage(1/12*6);
|
||||
|
||||
}
|
||||
&.span_5{
|
||||
width:percentage(1/12*5);
|
||||
|
||||
}
|
||||
&.span_4{
|
||||
width:percentage(1/12*4);
|
||||
|
||||
}
|
||||
&.span_3{
|
||||
width:percentage(1/12*3);
|
||||
|
||||
}
|
||||
&.span_2{
|
||||
width:percentage(1/12*2);
|
||||
|
||||
}
|
||||
|
||||
&.span_1{
|
||||
width:percentage(1/12*1);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user