Skip to content

Commit

Permalink
Merge pull request #191 from Modernism-in-Architecture/179-first-imag…
Browse files Browse the repository at this point in the history 
…e-not-loaded-on-first-click-on-gallery

#179: First image not loaded on first click on gallery
  • Loading branch information
@normade
normade committed Apr 30, 2024
2 parents 1bcbfbe + 9b9886b commit e6adf96
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 49 deletions.
38 changes: 20 additions & 18 deletions mia_buildings/templates/mia_buildings/building_details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ <h2 class="is-size-4">{{building.subtitle}}</h2>
<div class="content">{{building.description | safe}}</div>
</div>
</div>
<p class="is-hidden-touch""><strong>Description</strong></p>
<p class="is-hidden-touch"><strong>Description</strong></p>
<div class="is-hidden-touch">
{{building.description | safe}}
</div>
Expand Down Expand Up @@ -281,18 +281,20 @@ <h2 class="is-size-4">{{building.subtitle}}</h2>
<div class="columns">
<div class="column">
<div class="content">
{% if building.gallery_images %}<h2 class="impressions mb-3 mt-3 is-size-4">Impressions</h2>{% endif %}
{% for gallery_image in building.gallery_images %}
<img
src="{{ gallery_image.image|thumbnail_url:'preview' }}"
class="preview-image"
large-url="{{ gallery_image.image|thumbnail_url:'large' }}"
index="{{ forloop.counter0 }}"
photographer="{% if gallery_image.photographer %}{{ gallery_image.photographer }}{% endif %}"
description="{% if gallery_image.description %}{{ gallery_image.description }}{% endif %}"
alt="Gallery image of {{building.name}}"
/>
{% endfor %}
{% if building.gallery_images %}
<h2 class="impressions mb-3 mt-3 is-size-4">Impressions</h2>
{% endif %}
{% for gallery_image in building.gallery_images %}
<img
src="{{ gallery_image.image|thumbnail_url:'preview' }}"
class="preview-image"
large-url="{{ gallery_image.image|thumbnail_url:'large' }}"
index="{{ forloop.counter0 }}"
photographer="{% if gallery_image.photographer %}{{ gallery_image.photographer }}{% endif %}"
description="{% if gallery_image.description %}{{ gallery_image.description }}{% endif %}"
alt="Gallery image of {{building.name}}"
/>
{% endfor %}
</div>
</div>
</div>
Expand All @@ -301,13 +303,13 @@ <h2 class="is-size-4">{{building.subtitle}}</h2>
<div class="modal-background"></div>
<div class="modal-content has-text-centered">
<button id="close-button" class="modal-close is-large" aria-label="close">CLOSE</button>
<figure><img id="modal-image" src="" /></figure>
<div id="modal-image-container">
<button id="btn-prev" class="button prev" onclick="setModalImage('prev')">&#10094;</button>
<img id="modal-image" src="" />
<button id="btn-next" class="button next" onclick="setModalImage('next')">&#10095;</button>
</div>
<p id="image-description"></p>
<p id="image-photographer"></p>
<div class="image-nav-btn">
<button id="btn-prev" class="button prev" onclick="setModalImage('prev')">&#10094;</button>
<button id="btn-next" class="button next" onclick="setModalImage('next')">&#10095;</button>
</div>
</div>
</div>

Expand Down
81 changes: 65 additions & 16 deletions modernism/static/_sass/modernism.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -359,26 +359,75 @@ body {
}
.modal-content {
width: 100%;
.modal-close, figure {
margin-top: 2.5rem;
}
.image-nav-btn {
margin-top: 2rem;
}
button {
border-radius: 10px;
}
#image-description, #image-photographer {
color: $white;
}
#image-photographer {
font-size: small;
font-style: italic;
}
}
.modal-close,
figure {
margin-top: 2.5rem;
}
.image-nav-btn {
margin-top: 2rem;
}
button {
border-radius: 10px;
}
#image-description,
#image-photographer {
color: $white;
}
#image-photographer {
font-size: small;
font-style: italic;
}
.preview-image {
cursor: pointer;
}
#image-modal {
display: none;
}
#image-modal.is-active {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9999;
}
.modal-content figure {
position: relative;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: white;
font-size: 36px;
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
#modal-image {
max-width: 100%;
max-height: 100%;
}
@media screen and (max-width: 768px) {
.prev {
left: -5vw;
}
.next {
right: -5vw;
}
}
.tags:not(:last-child) {
margin-bottom: 0;
}
Expand Down
74 changes: 63 additions & 11 deletions modernism/static/css/modernism.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8131,21 +8131,73 @@ body {

.building .modal-content {
width: 100%; }
.building .modal-content .modal-close, .building .modal-content figure {
margin-top: 2.5rem; }
.building .modal-content .image-nav-btn {
margin-top: 2rem; }
.building .modal-content button {
border-radius: 10px; }
.building .modal-content #image-description, .building .modal-content #image-photographer {
color: white; }
.building .modal-content #image-photographer {
font-size: small;
font-style: italic; }

.building .modal-close,
.building figure {
margin-top: 2.5rem; }

.building .image-nav-btn {
margin-top: 2rem; }

.building button {
border-radius: 10px; }

.building #image-description,
.building #image-photographer {
color: white; }

.building #image-photographer {
font-size: small;
font-style: italic; }

.building .preview-image {
cursor: pointer; }

.building #image-modal {
display: none; }

.building #image-modal.is-active {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9999; }

.building .modal-content figure {
position: relative; }

.building .prev,
.building .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: white;
font-size: 36px;
cursor: pointer; }

.building .prev {
left: 10px; }

.building .next {
right: 10px; }

.building #modal-image {
max-width: 100%;
max-height: 100%; }

@media screen and (max-width: 768px) {
.building .prev {
left: -5vw; }
.building .next {
right: -5vw; } }

.building .tags:not(:last-child) {
margin-bottom: 0; }

Expand Down
10 changes: 6 additions & 4 deletions modernism/static/lib/miaBuilding.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,27 @@ const addClickEventListenerToBuildingImages = () => {
const previewImageBuildings = document.querySelectorAll('.preview-image');

previewImageBuildings.forEach(image => {

galleryImages[image.getAttribute("index")] =
{
largeUrl: image.getAttribute("large-url"),
description: image.getAttribute("description"),
photographer: image.getAttribute("photographer"),
}
image.addEventListener('click', (event) => {
event.preventDefault();
// event.preventDefault();
let imageModal = document.getElementById("image-modal");
let large_image = document.getElementById("modal-image");
let description = document.getElementById("image-description");
let photographer = document.getElementById("image-photographer");
imageModal.classList.toggle("is-active");

if (!imageModal.classList.contains("is-active")) {
large_image.src = image.getAttribute("large-url");
modalImageIndex = image.getAttribute("index");
description.innerText = image.getAttribute("description");
photographer.innerText = image.getAttribute("photographer");
}
imageModal.classList.toggle("is-active");
});
});
}
Expand Down Expand Up @@ -85,8 +87,8 @@ const setModalImage = (direction) => {
imgData = galleryImages[modalImageIndex];
if (imgData) {
largeImage.src = imgData["largeUrl"];
description.innerText = imgData["description"]
photographer.innerText = imgData["photographer"] ? "Photo by " + imgData["photographer"] : ""
description.innerText = imgData["description"];
photographer.innerText = imgData["photographer"] ? "Photo by " + imgData["photographer"] : "";
}
}

Expand Down

0 comments on commit e6adf96

Please sign in to comment.