Changed sldie padding when on full size print. Made exit button clickable.

This commit is contained in:
theo1 2020-05-17 15:31:20 +02:00
parent d279f2eb03
commit 3204fa2656
8 changed files with 30 additions and 10 deletions

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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;
}

View File

@ -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()
}

View File

@ -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;
}

View File

@ -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()
}

View File

@ -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">