Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 11:36:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Load image source on scroll

Browse source 
Set time tags to local time
This commit is contained in:
Michał Gdula 2023-01-26 16:55:42 +00:00
parent 792cbd1884
commit 651fd8aa49
6 changed files with 51 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

8
gallery/templates/image.html
View file

@ -38,7 +38,7 @@
</svg>
<span class="tool-tip">Share</span>
</button>
<a class="pill-item" href="/api/uploads/{{ image['file_name'] }}/0" download>
<a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}/0" download>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor">
<path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
</svg>
@ -111,7 +111,7 @@
<p>Filename: {{ image['file_name'] }}</p>
<p>Image ID: {{ image['id'] }}</p>
<p>Author: {{ image['author_id'] }}</p>
<p>Upload date: {{ image['created_at'] }}</p>
<p>Upload date: <span class="time">{{ image['created_at'] }}</span></p>
<p>Dimensions: {{ file['width'] }}x{{ file['height'] }}</p>
<p>File size: {{ size }}</p>
</div>
@ -155,8 +155,8 @@
addNotification("Failed to copy link! Are you on HTTP?", 2);
}
});
$('#img-info').click(function() {
$('#img-download').click(function() {
addNotification("Download started!", 4);
});
{% if g.user['id'] == image['author_id'] %}

29
gallery/templates/index.html
View file

@ -9,14 +9,13 @@
<a id="image-{{ image['id'] }}" class="gallery__item" href="/image/{{ image['id'] }}">
<span class="gallery__item-info">
<p>{{ image['id'] }}</p>
<h2>{{ image['created_at'] }}</h2>
<h2><span class="time">{{ image['created_at'] }}</span></h2>
</span>
<img
class="gallery__item-image"
src="/api/uploads/{{ image['file_name'] }}/400"
data-src="{{ image['file_name'] }}"
onload="imgFade(this)"
style="opacity:0;"
loading="lazy"
/>
</a>
{% endfor %}
@ -25,6 +24,30 @@
{% block script %}
<script>
var images = document.querySelectorAll('.gallery__item-image');
window.onload = function() {
for (var i = 0; i < images.length; i++) {
var image = images[i];
if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
if (!image.src) {
image.src = `/api/uploads/${image.getAttribute('data-src')}/400`
}
}
}
};
window.onscroll = function() {
for (var i = 0; i < images.length; i++) {
var image = images[i];
if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
if (!image.src) {
image.src = `/api/uploads/${image.getAttribute('data-src')}/400`
}
}
}
};
const urlParams = new URLSearchParams(window.location.search);
const src = urlParams.get('src');