Javascript 为同一页面上的两个独立库使用lightbox库代码？

我有一些lightbox gallery代码，非常有用。我一次只需要在一个页面上使用1，但客户希望在同一页面上包含两个不同的库。我尝试了几种方法：

我尝试的第一件事就是使用不同的图片将相同的HTML复制/粘贴到不同的

div

。那对我不起作用

我做的第二件事是，我试着浏览CSS，将每个gallery类重命名为gallery 2，然后调整javascript中可以找到的每个类，使其与CSS对应。结果是，当我单击第二个图库时，出现的是原始图片集/图库，而不是我单击的新图库的照片

以下是lightbox gallery的原始代码：

类库{
构造函数（设置）{
此参数。设置={
图片：“.gallery\uuuuu图片”，
循环：对，
下一步：未定义，
上一页：未定义，
点：未定义，
关闭：未定义，
加载器：未定义，
计数器：未定义，
计数器分隔符：“/”，
键盘导航：正确，
隐藏元素：[]
};
Object.assign（this.settings，settings）；
this.gallery=null；
该指数=0；
this.items=[…document.querySelectorAll（this.settings.images）]；
this.addedItems={}；
此.touch={
endX:0，
startX:0
};
this.init（）；
}
获取加载（）{
return！this.settings.hiddenElements.includes（“加载器”）；
}
获取dotsVisible（）{
return！this.settings.hiddenElements.includes（“点”）；
}
init（）{
这个.clearUncomplete（）；
这是createElements（）；
这是bindEvents（）；
}
clearUncomplete（）{
this.items=this.items.filter（item=>{
返回item.dataset.large；
});
}
createElements（）{
this.gallery=document.createElement（“DIV”）；
this.gallery.classList.add（“asyncGallery”）；
这个.createSingleElement({
元素：“prev”，
键入：“按钮”，
事件：“点击”，
func:this.getPrevious
});
这个.createSingleElement({
元素：“下一步”，
键入：“按钮”，
事件：“点击”，
func:this.getNext
});
这个.createSingleElement({
元素：“关闭”，
键入：“按钮”，
事件：“点击”，
func:这是closeGallery
});
这个.createSingleElement({
元素：“加载器”，
键入：“SPAN”，
文本：“正在加载…”
});
这个.createSingleElement({
元素：“计数器”，
键入：“SPAN”，
文本：“0/0”
});
这个.createSingleElement({
元素：“点”，
类型：“UL”，
案文：“”
});
如果（！this.settings.hiddenElements.includes（“点”））{
this.items.forEach（（item，i）=>{
设点=document.createElement（“LI”）；
dot.dataset.index=i；
let button=document.createElement（“按钮”）；
button.innerHTML=i；
按钮。addEventListener（“单击”，（）=>{
该指数=i；
本条第（i）项；
});
添加点（按钮）；
this.dots.append（dot）；
});
}
window.document.body.append（this.gallery）；
}
createSingleElement（{element，type，event=“click”，func，text}）{
如果（！this.settings.hiddenElements.includes（element））{
如果（！this.settings[元素]）{
此[元素]=document.createElement（类型）；
此[element].classList.add(
`asyncGallery{this.capitalizeFirstLetter（元素）}`
);
此[element]。innerHTML=text！==未定义？text:element；
this.gallery.append（此[元素]）；
}否则{
this[element]=document.querySelector（this.settings[element]）；
this.gallery.append（此[元素]）；
}
if（func）{
此[element].addEventListener（事件，函数绑定（this））；
}
}
}
getItem（i，content=null）{
让contentObj=内容；
if（contentObj==null）{
contentObj={}；
contentObj.src=this.items[i].dataset.large；
contentObj.description=this.items[i].dataset.description；
}
如果（！this.settings.hiddenElements.includes（“计数器”））{
this.counter.innerHTML=`
${this.index+1}${
此.settings.counterDivider
}${this.items.length}
`;
}
如果（！this.addedItems.hasOwnProperty（i））{
让image=document.createElement（“IMG”）；
让galleryItem=document.createElement（“DIV”）；
galleryItem.classList.add（“asyncGallery_uu项”）；
如果（本次加载）{
this.loader.classList.add（“可见”）；
}
这个.clearVisible（）；
如果（this.dotsVisible）{
这是画廊
.querySelector（`.asyncGallery_uudots li[data index=“${i}]”数据索引）
.classList.add（“处于活动状态”）；
}
image.src=contentObj.src；
image.alt=contentObj.description？contentObj.description:“”；
galleryItem.innerHTML=`
${image.outerHTML}
`;
if（内容对象描述）{
galleryItem.innerHTML+=`
${contentObj.description}

`;
this.settings = {
    myGallery: "gallery_1", // add this
    images: ".gallery__Image",
    loop: true,
    next: undefined,
    prev: undefined,
    dots: undefined,
    close: undefined,
    loader: undefined,
    counter: undefined,
    counterDivider: "/",
    keyboardNavigation: true,
    hiddenElements: []
};

this.gallery = document.getElementById(this.settings.myGallery);
this.items = [...this.gallery.querySelectorAll(this.settings.images)];

var allTags = document.getElementById('project-ec').getElementsByClassName("gallery");

for (var i = 0, len = allTags.length; i < len; i++) {
  new AsyncGallery({
    myGallery: String(allTags[i].id)
  }); 
}

new AsyncGallery();

new AsyncGallery({
  myGallery:"gallery_2"
});