W4 done
This commit is contained in:
parent
27be80ff9d
commit
0e2c114a84
14 changed files with 32686 additions and 0 deletions
3
w4/.vscode/settings.json
vendored
Normal file
3
w4/.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"liveServer.settings.port": 5525
|
||||||
|
}
|
||||||
BIN
w4/css/images/ui-icons_444444_256x240.png
Normal file
BIN
w4/css/images/ui-icons_444444_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
w4/css/images/ui-icons_555555_256x240.png
Normal file
BIN
w4/css/images/ui-icons_555555_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
w4/css/images/ui-icons_777620_256x240.png
Normal file
BIN
w4/css/images/ui-icons_777620_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
w4/css/images/ui-icons_777777_256x240.png
Normal file
BIN
w4/css/images/ui-icons_777777_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
w4/css/images/ui-icons_cc0000_256x240.png
Normal file
BIN
w4/css/images/ui-icons_cc0000_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
w4/css/images/ui-icons_ffffff_256x240.png
Normal file
BIN
w4/css/images/ui-icons_ffffff_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
1315
w4/css/jquery-ui.css
vendored
Normal file
1315
w4/css/jquery-ui.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
94
w4/css/main.css
Normal file
94
w4/css/main.css
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu {
|
||||||
|
height: 100%;
|
||||||
|
flex-basis: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
align-content: flex-start;
|
||||||
|
height: 600px;
|
||||||
|
width: 100vw;
|
||||||
|
overflow: auto;
|
||||||
|
flex-direction: row;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-image {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 5px;
|
||||||
|
object-fit: cover;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fitting-image {
|
||||||
|
border-radius: 1rem;
|
||||||
|
flex-basis: fit-content;
|
||||||
|
transition: all 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-imageview-host {
|
||||||
|
width: calc(100% - 10px) !important;
|
||||||
|
height: calc(100% - 10px) !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dialog-imageview {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.di-img {
|
||||||
|
height: -webkit-fill-available;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slider-gallery {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3rem;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery-slided {
|
||||||
|
flex-basis: 600px;
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
align-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery-slided > .gallery-image {
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
0
w4/data/.gitkeep
Normal file
0
w4/data/.gitkeep
Normal file
1153
w4/gallery.json
Normal file
1153
w4/gallery.json
Normal file
File diff suppressed because it is too large
Load diff
183
w4/index.html
Normal file
183
w4/index.html
Normal 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>
|
||||||
10881
w4/js/jquery-3.6.0.js
vendored
Normal file
10881
w4/js/jquery-3.6.0.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
19057
w4/js/jquery-ui.js
vendored
Normal file
19057
w4/js/jquery-ui.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue