forked from rDrama/rDrama
desktop-expanded-image > expanded-image
parent
78d1d742d9
commit
19b8e18db2
|
@ -6901,13 +6901,13 @@ div.markdown {
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#desktop-expanded-image {
|
#expanded-image {
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
border: 5px white solid;
|
border: 5px white solid;
|
||||||
}
|
}
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
#desktop-expanded-image {
|
#expanded-image {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 65vh;
|
max-height: 65vh;
|
||||||
}
|
}
|
||||||
|
|
|
@ -80,7 +80,7 @@ blockquote {
|
||||||
color: var(--gray-400) !important
|
color: var(--gray-400) !important
|
||||||
}
|
}
|
||||||
|
|
||||||
#frontpage div#expandImageModal.modal.desktop-expanded-image-modal {
|
#frontpage div#expandImageModal.modal.expanded-image-modal {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -191,16 +191,16 @@ function expandImage(url) {
|
||||||
return;
|
return;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
document.getElementById("desktop-expanded-image").src = '';
|
document.getElementById("expanded-image").src = '';
|
||||||
document.getElementById("desktop-expanded-image-wrap-link").href = '';
|
document.getElementById("expanded-image-wrap-link").href = '';
|
||||||
|
|
||||||
if (!url)
|
if (!url)
|
||||||
{
|
{
|
||||||
url = e.target.dataset.src
|
url = e.target.dataset.src
|
||||||
if (!url) url = e.target.src
|
if (!url) url = e.target.src
|
||||||
}
|
}
|
||||||
document.getElementById("desktop-expanded-image").src = url.replace("200w.webp", "giphy.webp");
|
document.getElementById("expanded-image").src = url.replace("200w.webp", "giphy.webp");
|
||||||
document.getElementById("desktop-expanded-image-wrap-link").href = url.replace("200w.webp", "giphy.webp");
|
document.getElementById("expanded-image-wrap-link").href = url.replace("200w.webp", "giphy.webp");
|
||||||
|
|
||||||
location.hash = 'm-expandImage'
|
location.hash = 'm-expandImage'
|
||||||
};
|
};
|
||||||
|
|
|
@ -74,8 +74,8 @@
|
||||||
<div class="modal" id="m-expandImage" tabindex="-1">
|
<div class="modal" id="m-expandImage" tabindex="-1">
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<div class="modal-body text-center p-0">
|
<div class="modal-body text-center p-0">
|
||||||
<a rel="nofollow noopener" target="_blank" id="desktop-expanded-image-wrap-link">
|
<a rel="nofollow noopener" target="_blank" id="expanded-image-wrap-link">
|
||||||
<img loading="lazy" alt="expanded image" class="rounded" id="desktop-expanded-image">
|
<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -74,8 +74,8 @@
|
||||||
<div class="modal" id="m-expandImage" tabindex="-1">
|
<div class="modal" id="m-expandImage" tabindex="-1">
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<div class="modal-body text-center p-0">
|
<div class="modal-body text-center p-0">
|
||||||
<a rel="nofollow noopener" target="_blank" id="desktop-expanded-image-wrap-link">
|
<a rel="nofollow noopener" target="_blank" id="expanded-image-wrap-link">
|
||||||
<img loading="lazy" alt="expanded image" class="rounded" id="desktop-expanded-image">
|
<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -74,8 +74,8 @@
|
||||||
<div class="modal" id="m-expandImage" tabindex="-1">
|
<div class="modal" id="m-expandImage" tabindex="-1">
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<div class="modal-body text-center p-0">
|
<div class="modal-body text-center p-0">
|
||||||
<a rel="nofollow noopener" target="_blank" id="desktop-expanded-image-wrap-link">
|
<a rel="nofollow noopener" target="_blank" id="expanded-image-wrap-link">
|
||||||
<img loading="lazy" alt="expanded image" class="rounded" id="desktop-expanded-image">
|
<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -74,8 +74,8 @@
|
||||||
<div class="modal" id="m-expandImage" tabindex="-1">
|
<div class="modal" id="m-expandImage" tabindex="-1">
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<div class="modal-body text-center p-0">
|
<div class="modal-body text-center p-0">
|
||||||
<a rel="nofollow noopener" target="_blank" id="desktop-expanded-image-wrap-link">
|
<a rel="nofollow noopener" target="_blank" id="expanded-image-wrap-link">
|
||||||
<img loading="lazy" alt="expanded image" class="rounded" id="desktop-expanded-image">
|
<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<div class="modal-content" style="background-color: transparent !important; border: none !important;">
|
<div class="modal-content" style="background-color: transparent !important; border: none !important;">
|
||||||
<div class="modal-body text-center p-0">
|
<div class="modal-body text-center p-0">
|
||||||
<a rel="nofollow noopener" target="_blank" id="desktop-expanded-image-wrap-link">
|
<a rel="nofollow noopener" target="_blank" id="expanded-image-wrap-link">
|
||||||
<img loading="lazy" alt="expanded image" class="rounded" id="desktop-expanded-image">
|
<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue