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; height: auto;
} }
.image-block { .image-block {
position: relative;
width: 1000px; /*100px фоточки по три в ряд*/ width: 1000px; /*100px фоточки по три в ряд*/
} }
@ -12,14 +13,22 @@
display: none; display: none;
} }
/*
.image-block:has(.image input:checked) .image-block:has(.image input:checked)
.image:has(input:not(:checked)) { .image:has(input:not(:checked)) {
opacity: 0.5; 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; top: 150px;
left: 300px; left: 300px;
width: 400px; width: 400px;
@ -27,22 +36,44 @@
z-index:1; z-index:1;
} }
/* other image */
.image-block:has(.image input:checked)
.image:has(input:not(:checked))
img {
opacity: 0.5;
}
</style> </style>
<script> <script>
const images = document.querySelectorAll("div.image-block img");
images.addEventListener(); var setupGallery = function(gallery){
images.addEventListener('click', function(){img.classList.toggle('view')};); 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> </script>
<body> <body onload="setup()">
<div class="wishes"> <div class="wishes">
<div> <div>
<h2>for functionality</h2> <h2>for functionality</h2>
@ -104,3 +135,4 @@ images.addEventListener('click', function(){img.classList.toggle('view')};);
</div> </div>
</body> </body>
</html> </html>
<!-- vim:set ts=4 sw=4 : -->