183 lines
No EOL
5.2 KiB
HTML
183 lines
No EOL
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link href="./css/jquery-ui.css" rel="stylesheet">
|
|
<link href="./css/main.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="tabs">
|
|
<ul>
|
|
<li><a href="#main-gallery">Main gallery</a></li>
|
|
<li><a href="#slider-gallery">Slider gallery</a></li>
|
|
</ul>
|
|
<div id="main-gallery">
|
|
<div id="main">
|
|
<div id="menu">
|
|
<h3>About</h3>
|
|
<div>
|
|
<p>
|
|
This is a little gallery crafted by Nuark
|
|
</p>
|
|
</div>
|
|
<h3>Images origin</h3>
|
|
<div>
|
|
<p>
|
|
IDK, from joyreactor/eben_aest
|
|
</p>
|
|
</div>
|
|
<h3>Calendar</h3>
|
|
<div>
|
|
<button id="datepicker-opener">Open date picker</button>
|
|
</div>
|
|
<h3>Toggle classes</h3>
|
|
<div>
|
|
<button id="img-classes-toggler">Toggle!</button>
|
|
</div>
|
|
</div>
|
|
<div id="gallery">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="slider-gallery">
|
|
<div id="gallery-slided">
|
|
|
|
</div>
|
|
<div id="gallery-changer-slider"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dialog-imageview" title="">
|
|
<img class="di-img" src="" alt="">
|
|
<div id="imageProgress"></div>
|
|
</div>
|
|
|
|
<div id="dialog-datepicker" title="Date picker">
|
|
<div id="datepicker"></div>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="./js/jquery-3.6.0.js"></script>
|
|
<script src="./js/jquery-ui.js"></script>
|
|
<script>
|
|
const galleryDataLoaded = function(json) {
|
|
const galleryElement = $("#gallery");
|
|
const scrollableGalleryElement = $("#gallery-slided");
|
|
json.images.forEach(imgData => {
|
|
const imgElement = $("<img>", {"class": "gallery-image", "src": imgData.file, "alt": imgData.name});
|
|
galleryElement.append(imgElement.clone());
|
|
scrollableGalleryElement.append(imgElement.clone());
|
|
});
|
|
}
|
|
|
|
const setDialogAndOpen = function(callee) {
|
|
const title = `Image ${callee.attr("alt")}`;
|
|
const src = callee.attr("src");
|
|
|
|
const dialog = $("#dialog-imageview");
|
|
dialog.attr("title", title);
|
|
$(dialog).parent().find(".ui-dialog-title").text(title);
|
|
$(".di-img", dialog).attr("src", src);
|
|
|
|
$("#imageProgress").progressbar({ value: false });
|
|
$("#imageProgress").show();
|
|
$(".di-img", dialog).hide();
|
|
|
|
var tmpImg = new Image() ;
|
|
tmpImg.src = $(".di-img", dialog).attr('src') ;
|
|
tmpImg.onload = function() {
|
|
$("#imageProgress").hide();
|
|
$(".di-img", dialog).show();
|
|
};
|
|
|
|
const buttons = {};
|
|
if (callee.prev().length === 1) {
|
|
buttons["Previous image"] = function() {
|
|
setDialogAndOpen(callee.prev());
|
|
}
|
|
}
|
|
if (callee.next().length === 1) {
|
|
buttons["Next image"] = function() {
|
|
setDialogAndOpen(callee.next());
|
|
}
|
|
}
|
|
buttons["Close"] = function() {
|
|
$(this).dialog("close");
|
|
}
|
|
|
|
dialog.dialog({
|
|
resizable: false,
|
|
modal: true,
|
|
draggable: false,
|
|
dialogClass: "dialog-imageview-host",
|
|
buttons: buttons,
|
|
show: {
|
|
effect: "clip",
|
|
duration: 1000
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(() => {
|
|
$("#dialog-datepicker").dialog({
|
|
autoOpen: false,
|
|
resizable: false,
|
|
modal: true,
|
|
draggable: false,
|
|
buttons: {
|
|
"Pick": function() {
|
|
alert(`You picked ${$("#datepicker").val()}`);
|
|
$(this).dialog("close");
|
|
},
|
|
"Cancel": function() {
|
|
$(this).dialog("close");
|
|
}
|
|
},
|
|
show: {
|
|
effect: "clip",
|
|
duration: 1000
|
|
},
|
|
hide: {
|
|
effect: "clip",
|
|
duration: 1000
|
|
}
|
|
});
|
|
$("#tabs").tabs();
|
|
$("#menu").accordion();
|
|
$("#datepicker").datepicker();
|
|
$("#datepicker-opener").on("click", () => {
|
|
$("#dialog-datepicker").dialog("open");
|
|
});
|
|
$("#img-classes-toggler").on("click", function() {
|
|
$(".gallery-image").toggleClass("fitting-image");
|
|
});
|
|
$("#gallery").on("click", "*", function () {
|
|
setDialogAndOpen($(this));
|
|
});
|
|
$("#gallery-slided").on("click", "*", function () {
|
|
setDialogAndOpen($(this));
|
|
});
|
|
$("#gallery-changer-slider").slider({
|
|
min: 0,
|
|
max: 10000,
|
|
slide: function(event, ui) {
|
|
const scrlgal = $("#gallery-slided");
|
|
const rpad = scrlgal[0].scrollWidth - scrlgal[0].clientWidth;
|
|
scrlgal[0].scroll(rpad * (ui.value / 10000), 0);
|
|
$( "#amount" ).val( ui.value );
|
|
}
|
|
});
|
|
});
|
|
|
|
$.ajax({
|
|
dataType: "json",
|
|
url: "./gallery.json",
|
|
success: galleryDataLoaded
|
|
});
|
|
</script>
|
|
</html> |