uni-days/ittech
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

W4 done

Browse source
This commit is contained in:
Andrew 2022-02-22 11:27:57 +07:00
parent 27be80ff9d
commit 0e2c114a84
14 changed files with 32686 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

183
w4/index.html Normal file
View file

@ -0,0 +1,183 @@
<!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>