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