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

fixed tabbing...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-07-08 15:53:20 +03:00
parent 5b17bb0a01
commit 25e1aa6a24
1 changed files with 82 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
index.html
View File

@ -1,44 +1,49 @@
<html> <html>
<style> <style>
.image-block img {
.image-block img {
width: 300px; width: 300px;
height: auto; height: auto;
} }
.image-block { .image-block {
width: 1000px; /*100px фоточки по три в ряд*/ width: 1000px; /*100px фоточки по три в ряд*/
} }
.image-block .image input { .image-block .image input {
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 .image:has(img.viewed) img { .image-block .image:has(img.viewed) img {
position: absolute; position: absolute;
top: 150px; top: 150px;
left: 300px; left: 300px;
width: 400px; width: 400px;
height: auto; height: auto;
z-index:1; z-index:1;
} }
/* other image */ /* other image */
.image-block:has(.image input:checked) .image-block:has(.image input:checked)
.image:has(input:not(:checked)) .image:has(input:not(:checked))
img { img {
opacity: 0.5; opacity: 0.5;
} }
</style> </style>
<body> <script>
<div class="wishes"> const images = document.querySelectorAll("div.image-block img");
images.addEventListener();
images.addEventListener('click', function(){img.classList.toggle('view')};);
</script>
<body>
<div class="wishes">
<div> <div>
<h2>for functionality</h2> <h2>for functionality</h2>
<ul> <ul>
@ -60,10 +65,10 @@
<li>...</li> <li>...</li>
</ul> </ul>
</div> </div>
</div> </div>
<input type="file" id="input" multiple> <input type="file" id="input" multiple>
<div class="image-block"> <div class="image-block">
<label class="image"> <label class="image">
@ -96,12 +101,6 @@
<img src="images/6.JPG"> <img src="images/6.JPG">
</label> </label>
</div> </div>
<script> </body>
const images = document.querySelectorAll("div.image-block img");
images.addEventListener();
images.addEventListener('click', function(){img.classList.toggle('view')};);
</script>
</body>
</html> </html>