152 lines
2.9 KiB
HTML
152 lines
2.9 KiB
HTML
<html>
|
|
<style>
|
|
.image-block img {
|
|
width: 300px;
|
|
height: auto;
|
|
}
|
|
.image-block {
|
|
position: relative;
|
|
width: 1000px; /* 100px фоточки по три в ряд */
|
|
}
|
|
|
|
.image-block .image input {
|
|
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.viewed img {
|
|
position: fixed;
|
|
top: 150px;
|
|
left: 300px;
|
|
width: 400px;
|
|
height: auto;
|
|
z-index:1;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
|
|
var setupGallery = function(gallery){
|
|
|
|
// handle clicks....
|
|
//
|
|
// NOTE: a good way to separate selection and viewing is to use
|
|
// evt.shiftKey, i.e:
|
|
// - normal click sets view mode
|
|
// - shift+click selects image
|
|
// and it would be good to implement the expected selection API:
|
|
// ctrl+a - select all
|
|
// ctrl+d - deselect all
|
|
// arrows - navigation
|
|
// shift+arrows - navigation selection
|
|
// ...
|
|
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 onload="setup()">
|
|
<div class="wishes">
|
|
<div>
|
|
<h2>for functionality</h2>
|
|
<ul>
|
|
<li>Add drag n drop
|
|
<br>(full page is a drop space)</li>
|
|
<li>Add add tags</li>
|
|
<li>Add "search" (tag/tags)</li>
|
|
<li>Add pick up a photo</li>
|
|
<li>...</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h2>for style</h2>
|
|
<ul>
|
|
<li>Gallery w 5-6 photos (flex w size) in a row,
|
|
<br>wich is nice to scroll down</li>
|
|
<li>Arrows to see next/prev photo</li>
|
|
<li>Fantom next/prev photos on the background</li>
|
|
<li>...</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<input type="file" id="input" multiple>
|
|
|
|
<div class="image-block">
|
|
|
|
|
|
<label class="image">
|
|
<input type="checkbox">
|
|
<img src="images/1.JPG">
|
|
</label>
|
|
|
|
<label class="image">
|
|
<input type="checkbox">
|
|
<img src="images/2.JPG">
|
|
</label>
|
|
|
|
<label class="image">
|
|
<input type="checkbox">
|
|
<img src="images/3.JPG">
|
|
</label>
|
|
|
|
<label class="image">
|
|
<input type="checkbox">
|
|
<img src="images/4.JPG">
|
|
</label>
|
|
|
|
<label class="image">
|
|
<input type="checkbox">
|
|
<img src="images/5.JPG">
|
|
</label>
|
|
|
|
<label class="image">
|
|
<input type="checkbox">
|
|
<img src="images/6.JPG">
|
|
</label>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 : -->
|