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

Add Notification js system

Browse source 
Load full image on first click of full resolution button
Change background image
Change way images load into the view
Add Lazy Loading
This commit is contained in:
Michał Gdula 2023-01-14 01:46:11 +00:00
parent a10a5a8793
commit 7605e5ab40
13 changed files with 214 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

37
gallery/templates/image.html
View file

@ -1,15 +1,15 @@
{% extends 'layout.html' %}
{% block header %}
<img src="/api/uploads/{{ image['file_name'] }}/1000" alt="leaves" onload="imgFade(this)" style="display: none;"/>
<img src="/api/uploads/{{ image['file_name'] }}/1000" alt="leaves" onload="imgFade(this)" style="opacity:0;"/>
{% endblock %}
{% block content %}
<div class="image__fullscreen">
<img
src="/api/uploads/{{ image['file_name'] }}/0"
onload="imgFade(this)" style="display:none;"
onerror="this.style.display='none'"
src=""
onload="imgFade(this)"
style="opacity:0;"
/>
</div>
@ -18,7 +18,7 @@
<img
class="image__item"
src="/api/uploads/{{ image['file_name'] }}/1000"
onload="imgFade(this)" style="display:none;"
onload="imgFade(this)" style="opacity:0;"
onerror="this.src='/static/images/error.png'"
/>
</div>
@ -122,16 +122,29 @@
{% endif %}
</div>
<script>
/*
const url = new URL(window.location);
if (url.searchParams.get('i') == 'full') {
$('.image__fullscreen').addClass('image__fullscreen--active');
$('.image__fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}/0');
} else {
$('.image__fullscreen').removeClass('image__fullscreen--active');
}
*/
$('.image__fullscreen').click(function() {
$('.image__fullscreen').removeClass('image__fullscreen--active');
//window.history.replaceState({}, '', `${url}`);
});
$('#img-fullscreen').click(function() {
$('.image__fullscreen').addClass('image__fullscreen--active');
$('.image__fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}/0');
//window.history.replaceState({}, '', url+'?i=full');
});
$('#img-share').click(function() {
//navigator.clipboard.writeText(window.location.href);
console.log('Non https debug: Copied to clipboard');
addNotification("Copied link!", 4);
});
$('#img-info').click(function() {
@ -145,11 +158,15 @@
data: {
action: 'delete'
},
success: function(response) {
window.location.href = '/';
success: function (response) {
addNotification("Image was all in le head", 1);
setTimeout(function() {
window.location.href = '/';
}, 1000);
},
error: function(response) {
alert(response);
error: function (response) {
addNotification(`Image *clings*: ${response}`, 2);
}
});
});