olyakonstantin/gallery
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

now image viewable...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-07-08 16:38:14 +03:00
parent 25e1aa6a24
commit 3f2c505798
1 changed files with 46 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.html
View File

@ -5,6 +5,7 @@
height: auto;
}
.image-block {
position: relative;
width: 1000px; /*100px фоточки по три в ряд*/
}
@ -12,14 +13,22 @@
display: none;
}
/*
.image-block:has(.image input:checked)
.image:has(input:not(:checked)) {
opacity: 0.5;
}
.image-block:has(.image input:checked)
.image:has(input:not(:checked))
img {
opacity: 0.5;
}
*/
.image-block .image:has(img.viewed) img {
position: absolute;
.image-block .image.viewed img {
position: fixed;
top: 150px;
left: 300px;
width: 400px;
@ -27,22 +36,44 @@
z-index:1;
}
/* other image */
.image-block:has(.image input:checked)
.image:has(input:not(:checked))
img {
opacity: 0.5;
}
</style>
<script>
const images = document.querySelectorAll("div.image-block img");
images.addEventListener();
images.addEventListener('click', function(){img.classList.toggle('view')};);
var setupGallery = function(gallery){
gallery.addEventListener('click', function(evt){
var target = evt.target
console.log('--- EVENT:', evt)
if(target.tagName.toLowerCase() == 'img'){
var clicked = target
// get the "image" element...
while(!clicked.classList.contains('image')){
clicked = clicked.parentElement
}
// keep only one image "viewed"...
for(var img of gallery.querySelectorAll('.viewed')){
// skip clicked image...
if(img === clicked){
continue
}
img.classList.remove('viewed')
}
// toggle state...
clicked.classList.toggle('viewed')
}
})
}
var setup = function(){
var galleries = document.body.querySelectorAll('.image-block')
for(var gallery of galleries){
setupGallery(gallery)
}
}
</script>
<body>
<body onload="setup()">
<div class="wishes">
<div>
<h2>for functionality</h2>
@ -104,3 +135,4 @@ images.addEventListener('click', function(){img.classList.toggle('view')};);
</div>
</body>
</html>
<!-- vim:set ts=4 sw=4 : -->