привязать именнованную функцию с параметрами
Object.prototype.fancy=function(options){
if(this instanceof Node){
makeFancy(this)
}
else if(this instanceof NodeList){
this.forEach(el=>makeFancy(el))
}
let galleryContainer="#galleryContainer"
function f(item,index,items,e){
e.preventDefault()
e.stopPropagation()
document.body.classList.add("noscroll")
if(get(galleryContainer)==null){
//создание окна
document.body.insertAdjacentHTML("beforeend",`<div id='galleryContainer'>
<div id='overlay'></div>
<div id='title'>
<div id='close'></div>
</div>
<div id='view'>
<div id='img'><img src=''></div>
<div id='controls'>
<div id='arrows'>
<div id='left'></div>
<div id='right'></div>
</div>
</div>
</div>
<div id='thumbs'><div id='thumbs_container'></div></div>
</div>`)
}
//очистка превью
get(galleryContainer+" #thumbs #thumbs_container").empty()
//создание новых превью
items.forEach((it,ind)=>{
let src=it.tagName=="A"?it.href:(it.tagName=="IMG"?it.src:it.src)
get(galleryContainer+" #thumbs #thumbs_container").insertAdjacentHTML("beforeend","<div class='thumb' data-idx='"+ind+"'><img src='"+src+"' data-src='"+it.dataset.src+"'/></div>")
})
//событие клика на превью, показ изображения
getAll(galleryContainer+" #thumbs .thumb").forEach(thumb=>thumb.addEventListener("click",function(){
showImage(items,thumb.dataset.idx)
}))
//кнопки в окне
get(galleryContainer+" #left").addEventListener("click",function(){
prevImage(items)
})
get(galleryContainer+" #right").addEventListener("click",function(){
nextImage(items)
})
//прокрутка колесом
get(galleryContainer).addEventListener("wheel",function(ev){
if(ev.deltaY>0)//вниз
nextImage(items)
else if(ev.deltaY<0)//вверх
prevImage(items)
})
//клавиши
document.body.addEventListener("keydown",keysEvents)
get(galleryContainer+" #close").addEventListener("click",closeImage)
showImage(items,index)
}
function makeFancy(el){
el.getAll("[data-src]").forEach((item,index,items)=>{
item.addEventListener("click",(e)=>{
e.preventDefault()
e.stopPropagation()
//window.items=items
document.body.classList.add("noscroll")
if(get(galleryContainer)==null){
//создание окна
document.body.insertAdjacentHTML("beforeend",`<div id='galleryContainer'>
<div id='overlay'></div>
<div id='title'>
<div id='close'></div>
</div>
<div id='view'>
<div id='img'><img src=''></div>
<div id='controls'>
<div id='arrows'>
<div id='left'></div>
<div id='right'></div>
</div>
</div>
</div>
<div id='thumbs'><div id='thumbs_container'></div></div>
</div>`)
}
//очистка превью
get(galleryContainer+" #thumbs #thumbs_container").empty()
//создание новых превью
items.forEach((it,ind)=>{
let src=it.tagName=="A"?it.href:(it.tagName=="IMG"?it.src:it.src)
get(galleryContainer+" #thumbs #thumbs_container").insertAdjacentHTML("beforeend","<div class='thumb' data-idx='"+ind+"'><img src='"+src+"' data-src='"+it.dataset.src+"'/></div>")
})
//событие клика на превью, показ изображения
getAll(galleryContainer+" #thumbs .thumb").forEach(thumb=>thumb.addEventListener("click",function(){
showImage(items,thumb.dataset.idx)
}))
//кнопки в окне
get(galleryContainer+" #left").addEventListener("click",function(){
prevImage(items)
})
get(galleryContainer+" #right").addEventListener("click",function(){
nextImage(items)
})
//прокрутка колесом
get(galleryContainer).addEventListener("wheel",function(ev){
if(ev.deltaY>0)//вниз
nextImage(items)
else if(ev.deltaY<0)//вверх
prevImage(items)
})
//клавиши
document.body.addEventListener("keydown",keysEvents)
get(galleryContainer+" #close").addEventListener("click",closeImage)
showImage(items,index)
})
})
}
function keysEvents(e){
var k=e.keyCode
if(k==37) prevImage(get(galleryContainer).getAll("[data-src]"))
else if(k==39) nextImage(get(galleryContainer).getAll("[data-src]"))
else if(k==27) closeImage()
}
function showImage(items,idx){
console.log(idx)
get(galleryContainer+" #view img").setAttribute("src",items[idx].dataset.src)
get(galleryContainer+" #thumbs .thumb.selected")?.classList.remove("selected")
getAll(galleryContainer+" #thumbs .thumb")[idx].classList.add("selected")
thumbW=getAll(galleryContainer+" #thumbs_container .thumb")[0].offsetWidth
thumbWCmp=getComputedStyle(getAll("#thumbs_container .thumb")[0])
let marginLeft = parseInt(thumbWCmp.marginLeft);
let marginRight = parseInt(thumbWCmp.marginRight);
ind=0
getAll(galleryContainer+" #thumbs_container .thumb").forEach((el,idx)=>{if(el.classList.contains("selected")) ind=idx})
sumThumbW=thumbW+marginLeft+marginRight
get(galleryContainer+" #thumbs_container").style.left=window.innerWidth/2-sumThumbW*ind-sumThumbW/2+"px"
}
function prevImage(items){
//установка индексов всем превью
getAll(galleryContainer+" #thumbs #thumbs_container .thumb").forEach((el,idx)=>el.dataset.idx=idx)
//индекс выделенного превью
let idx=+get(galleryContainer+" #thumbs #thumbs_container .thumb.selected").dataset.idx
if(idx>0) idx--
else idx=items.length-1
showImage(items,idx)
}
function nextImage(items){
getAll(galleryContainer+" #thumbs #thumbs_container .thumb").forEach((el,idx)=>el.dataset.idx=idx)
let idx=+get(galleryContainer+" #thumbs #thumbs_container .thumb.selected").dataset.idx
if(idx<items.length-1) idx++
else idx=0
showImage(items,idx)
}
function closeImage(){
get(galleryContainer)?.remove()
document.body.classList.remove("noscroll")
document.body.removeEventListener("keydown",keysEvents)
}
}
Скрипт lightbox а-ля fancybox без jquery. Привел полный код.
Как выделить эту функцию item.addEventListener("click",()=>{})
,в отдельную? Как передать в нее параметры item,index,items?
Проблема в том что если добавлять/удалять картинки из набора то нужно опять вызывать .elem.fancy(), а для этого нужно удалить ранее добавленный обработчик click.
item.removeEventListener("click",funcName)
item.addEventListener("click",funcName)