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

165
index.html
View File

@ -1,107 +1,106 @@
<html> <html>
<style> <style>
.image-block img {
width: 300px;
height: auto;
}
.image-block {
width: 1000px; /*100px фоточки по три в ряд*/
}
.image-block img { .image-block .image input {
width: 300px; display: none;
height: auto; }
}
.image-block {
width: 1000px; /*100px фоточки по три в ряд*/
}
.image-block .image input { .image-block:has(.image input:checked)
display: none; .image:has(input:not(:checked)) {
} opacity: 0.5;
}
.image-block:has(.image input:checked)
.image:has(input:not(:checked)) {
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>
<li>Add drag n drop <li>Add drag n drop
<br>(full page is a drop space)</li> <br>(full page is a drop space)</li>
<li>Add add tags</li> <li>Add add tags</li>
<li>Add "search" (tag/tags)</li> <li>Add "search" (tag/tags)</li>
<li>Add pick up a photo</li> <li>Add pick up a photo</li>
<li>...</li> <li>...</li>
</ul> </ul>
</div> </div>
<div> <div>
<h2>for style</h2> <h2>for style</h2>
<ul> <ul>
<li>Gallery w 5-6 photos (flex w size) in a row, <li>Gallery w 5-6 photos (flex w size) in a row,
<br>wich is nice to scroll down</li> <br>wich is nice to scroll down</li>
<li>Arrows to see next/prev photo</li> <li>Arrows to see next/prev photo</li>
<li>Fantom next/prev photos on the background</li> <li>Fantom next/prev photos on the background</li>
<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">
<input type="checkbox"> <input type="checkbox">
<img src="images/1.JPG"> <img src="images/1.JPG">
</label> </label>
<label class="image"> <label class="image">
<input type="checkbox"> <input type="checkbox">
<img src="images/2.JPG"> <img src="images/2.JPG">
</label> </label>
<label class="image"> <label class="image">
<input type="checkbox"> <input type="checkbox">
<img src="images/3.JPG"> <img src="images/3.JPG">
</label> </label>
<label class="image"> <label class="image">
<input type="checkbox"> <input type="checkbox">
<img src="images/4.JPG"> <img src="images/4.JPG">
</label> </label>
<label class="image"> <label class="image">
<input type="checkbox"> <input type="checkbox">
<img src="images/5.JPG"> <img src="images/5.JPG">
</label> </label>
<label class="image"> <label class="image">
<input type="checkbox"> <input type="checkbox">
<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>