forked from rDrama/rDrama
add image navigation button
parent
744bc35afb
commit
c0ae4d8fb6
|
@ -7688,3 +7688,18 @@ thead {
|
||||||
#formatting-table tbody td:nth-child(3) {
|
#formatting-table tbody td:nth-child(3) {
|
||||||
min-width: 300px
|
min-width: 300px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#image-navigation {
|
||||||
|
border: 4px solid transparent;
|
||||||
|
color: black;
|
||||||
|
font-size: 35px;
|
||||||
|
background-color: white !important;
|
||||||
|
opacity: 0.4;
|
||||||
|
margin-left: -5px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image-navigation:hover {
|
||||||
|
border: 4px solid var(--primary);
|
||||||
|
}
|
||||||
|
|
|
@ -170,6 +170,10 @@ bs_trigger(document);
|
||||||
|
|
||||||
const negative_awards = document.querySelectorAll("[data-positive=False]")
|
const negative_awards = document.querySelectorAll("[data-positive=False]")
|
||||||
|
|
||||||
|
let all_images
|
||||||
|
let position
|
||||||
|
let num_of_images
|
||||||
|
|
||||||
document.addEventListener("click", function (e) {
|
document.addEventListener("click", function (e) {
|
||||||
let element = e.target
|
let element = e.target
|
||||||
if (element.tagName == "I")
|
if (element.tagName == "I")
|
||||||
|
@ -177,8 +181,25 @@ document.addEventListener("click", function (e) {
|
||||||
|
|
||||||
if (!element) return
|
if (!element) return
|
||||||
|
|
||||||
if (element instanceof HTMLImageElement && (element.alt.startsWith('![](') || element.classList.contains('img'))) {
|
if (element.id == 'image-navigation') {
|
||||||
expandImage()
|
expandImage(element.href)
|
||||||
|
position += 1
|
||||||
|
if (position < num_of_images) {
|
||||||
|
element.classList.remove('d-none')
|
||||||
|
element.href = all_images[position].src
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (element instanceof HTMLImageElement && (element.alt.startsWith('![](') || element.classList.contains('img'))) {
|
||||||
|
all_images = element.parentElement.parentElement.parentElement.getElementsByClassName('img')
|
||||||
|
if (all_images.length > 1) {
|
||||||
|
expandImage()
|
||||||
|
num_of_images = all_images.length
|
||||||
|
const imagenav_btn = document.getElementById('image-navigation')
|
||||||
|
imagenav_btn.classList.remove('d-none')
|
||||||
|
position = [].indexOf.call(all_images, element);
|
||||||
|
position += 1
|
||||||
|
imagenav_btn.href = all_images[position].src
|
||||||
|
}
|
||||||
}
|
}
|
||||||
else if (element.classList.contains('showmore')) {
|
else if (element.classList.contains('showmore')) {
|
||||||
showmore(element)
|
showmore(element)
|
||||||
|
|
|
@ -189,6 +189,8 @@ function formkey() {
|
||||||
const expandImageModal = document.getElementById('expandImageModal')
|
const expandImageModal = document.getElementById('expandImageModal')
|
||||||
|
|
||||||
function expandImage(url) {
|
function expandImage(url) {
|
||||||
|
document.getElementById('image-navigation').classList.add('d-none')
|
||||||
|
|
||||||
const e = this.event
|
const e = this.event
|
||||||
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
|
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
<a rel="noopener" target="_blank" id="expanded-image-wrap-link">
|
<a rel="noopener" target="_blank" id="expanded-image-wrap-link">
|
||||||
<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
|
<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
|
||||||
</a>
|
</a>
|
||||||
|
<a id="image-navigation" class="fas fa-arrow-right px-5 py-4 px-md-4 py-md-5 d-none"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue