Changed sldie padding when on full size print. Made exit button clickable.
This commit is contained in:
parent
d279f2eb03
commit
3204fa2656
@ -33,7 +33,7 @@
|
||||
|
||||
<!-- Slides used for slideshow -->
|
||||
<div id="slide-container">
|
||||
<div id="close-modal" onclick="closeModal()">X</div>
|
||||
<div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
|
||||
<div id="slides" class="modal">
|
||||
<img class="slide" id="img-1" alt="" src="/images/Construction/Construction-1.jpg">
|
||||
<img class="slide" id="img-2" alt="" src="/images/Construction/Construction-2.jpg">
|
||||
|
@ -47,7 +47,7 @@ He can hear neighbors laughing out loud, as they always had in peaceful sunny sp
|
||||
|
||||
<!-- Slides used for slideshow -->
|
||||
<div id="slide-container">
|
||||
<div id="close-modal" onclick="closeModal()">X</div>
|
||||
<div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
|
||||
<div id="slides" class="modal">
|
||||
<img class="slide" id="img-1" alt="" src="/images/Courtyard/Courtyard-1.jpg">
|
||||
<img class="slide" id="img-2" alt="" src="/images/Courtyard/Courtyard-2.jpg">
|
||||
|
@ -33,7 +33,7 @@
|
||||
|
||||
<!-- Slides used for slideshow -->
|
||||
<div id="slide-container">
|
||||
<div id="close-modal" onclick="closeModal()">X</div>
|
||||
<div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
|
||||
<div id="slides" class="modal">
|
||||
<img class="slide" id="img-1" alt="" src="/images/Sunday/Sunday-1.jpg">
|
||||
<img class="slide" id="img-2" alt="" src="/images/Sunday/Sunday-2.jpg">
|
||||
|
@ -207,7 +207,7 @@ p a {
|
||||
#slide-container {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 300%;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -215,6 +215,7 @@ p a {
|
||||
background-color: #000000;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
@ -226,7 +227,7 @@ p a {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
height: auto;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
@ -234,12 +235,15 @@ p a {
|
||||
position: fixed;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
width: 20px;
|
||||
height:20px;
|
||||
margin-left: 95%;
|
||||
}
|
||||
|
||||
#close-modal a{
|
||||
color: white;
|
||||
}
|
||||
|
||||
#close-modal:hover {
|
||||
font-size: larger;
|
||||
}
|
@ -16,13 +16,19 @@ function closeModal() {
|
||||
elems[i].style.display = "none"
|
||||
}
|
||||
document.getElementsByTagName("header")[0].style.opacity = 1
|
||||
document.getElementById("about").style.opacity = 1
|
||||
document.getElementById("download").style.opacity = 1
|
||||
}
|
||||
|
||||
function showSlide(id){
|
||||
closeModal()
|
||||
isOpen = true
|
||||
document.getElementById('slide-container').style.display = "block"
|
||||
document.getElementById(id).style.display = "block"
|
||||
// change persistent elements' opacity
|
||||
document.getElementsByTagName("header")[0].style.opacity = 0.2
|
||||
document.getElementById("about").style.opacity = 0.2
|
||||
document.getElementById("download").style.opacity = 0.2
|
||||
goToTop()
|
||||
}
|
||||
|
||||
|
@ -207,7 +207,7 @@ p a {
|
||||
#slide-container {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 300%;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -215,6 +215,7 @@ p a {
|
||||
background-color: #000000;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
@ -226,7 +227,7 @@ p a {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
height: auto;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
@ -234,12 +235,15 @@ p a {
|
||||
position: fixed;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
width: 20px;
|
||||
height:20px;
|
||||
margin-left: 95%;
|
||||
}
|
||||
|
||||
#close-modal a{
|
||||
color: white;
|
||||
}
|
||||
|
||||
#close-modal:hover {
|
||||
font-size: larger;
|
||||
}
|
@ -16,13 +16,19 @@ function closeModal() {
|
||||
elems[i].style.display = "none"
|
||||
}
|
||||
document.getElementsByTagName("header")[0].style.opacity = 1
|
||||
document.getElementById("about").style.opacity = 1
|
||||
document.getElementById("download").style.opacity = 1
|
||||
}
|
||||
|
||||
function showSlide(id){
|
||||
closeModal()
|
||||
isOpen = true
|
||||
document.getElementById('slide-container').style.display = "block"
|
||||
document.getElementById(id).style.display = "block"
|
||||
// change persistent elements' opacity
|
||||
document.getElementsByTagName("header")[0].style.opacity = 0.2
|
||||
document.getElementById("about").style.opacity = 0.2
|
||||
document.getElementById("download").style.opacity = 0.2
|
||||
goToTop()
|
||||
}
|
||||
|
||||
|
@ -30,7 +30,7 @@
|
||||
|
||||
<!-- Slides used for slideshow -->
|
||||
<div id="slide-container">
|
||||
<div id="close-modal" onclick="closeModal()">X</div>
|
||||
<div id="close-modal" onclick="closeModal()"><a href="#">X</a></div>
|
||||
<div id="slides" class="modal">
|
||||
{% for i in [1, 2, 3, 4, 5] %}
|
||||
<img class="slide" id="img-{{ i }}" alt="" src="{{ SITE_URL }}/images/{{article.title}}/{{ article.title }}-{{ i }}.jpg">
|
||||
|
Loading…
Reference in New Issue
Block a user