Javascript 使用CSS按钮打开可视灯箱

昨天，我问了一个关于Fancybox的问题，有人帮我看了我丢失的那篇文章。现在我明白了所有这些，我意识到…Fancybox不是我想要的。我决定使用VisualLightbox（v5.0），因为对于基本页面查看器来说，打开控件后如何处理控件更为明显

话虽如此，我还是用昨天学到的信息让一切都变得完美——多个图库、集成缩略图发布等等——一切都非常完美！我现在想做的是能够从CSS按钮启动每个缩略图独特的lightbox库。我读过几十个似乎有关联的问题，但我读过的技巧中没有一个对我有用

我们开始吧。按钮的CSS：

    <style type="text/css">
a.bigbutton {   
    style="border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    line-height: normal;
    box-shadow:inset 0px 1px 1px #3f3f3f;
    width:100%;
    height:32px;
    padding-top:6px;
    display:inline-block;
    text-align:center;
    font-size:16px;
    color:#fff !important;
    text-transform:uppercase;
    background:#2b2b2b;
    font-family: 'Oswald', sans-serif;
}

a、 大按钮{
style=“边界半径：3px；
显示：内联块；
光标：指针；
线高：正常；
盒影：插入0px 1px 1px#3f3f；
宽度：100%；
高度：32px；
填充顶部：6px；
显示：内联块；
文本对齐：居中；
字体大小：16px；
颜色：#fff！重要；
文本转换：大写；
背景#2b2b；
字体系列：“Oswald”，无衬线；
}

按钮当前的HTML格式：

    <a href="album-detail.html" class="bigbutton">VIEW PHOTOS</a>

VLB画廊保留其库存ID“vlightbox1”、“vlightbox2”等

显然，我无法重写“bigbutton”类，否则按钮将无法正确显示。类似地，我尝试将“bigbutton”类链接到lightbox触发器，但我显然写错了什么

---

一如既往，我们非常感谢您的帮助！

难道您不能抓住锚并将处理程序附加到单击事件吗

var btns = document.getElementsByClassName("bigbutton");
for(var i=0;i<btns.length;i++){
    btns[i].addEventListener("click", (function(e){

        // .. do trigger code here

    }), false); // this only handles W3C due to addEventListener
}

var btns=document.getElementsByClassName（“bigbutton”）；
对于（var i=0；iHey，很抱歉延迟回复-刚刚回到笔记本电脑上。因此，对于没有接受过正式主题培训的人来说，我通常非常擅长这一切。但我必须承认，你向我抛出了一个新的答案。在我研究这项技术时遇到的所有解决方案中，你编写的代码对我来说都是全新的。你能提供一点细节吗？同时，我将以我认为你想要的方式尝试它，让它工作，我会尽快更新结果…再次感谢！好的，所以添加第二个类本身没有任何作用。例如：不调用可视灯箱。有趣的是，它确实会在e按钮本身，但不是灯箱。那么我缺少什么呢？：（好的，对给出的代码进行一点解释：btns是一个包含所有元素的数组，带有一个“bigbutton”类"，然后我在该数组中循环，并将事件处理程序分别附加到数组中的每个元素。当有人单击该数组中包含的任何元素时，将运行函数，其中显示
/..do trigger code
。false表示事件不会冒泡。Mozilla开发者网络将e关于它的一些好信息。至于第二类的东西，你能提供一个链接到一个页面，它的行为方式与你描述的一样吗？我从来没有使用过你正在使用的库，但我怀疑它与我使用过的其他库有太大的不同。从网站上看，href应该是图像的路径。但是，它看起来像是你We’我们正在尝试链接到一个页面。抱歉，我在第一篇文章中对href不太清楚。因为我是用一个模板开始这个项目的，所以为了更好地适应最终的项目，我正在修改很多东西。所以原始模板代码中的href就是我在上面发布的，我想知道它应该如何与我正在编写的代码结合起来阅读应该在CSS按钮上使用。到目前为止，实际工作的缩略图带有的链接。我只想用我的CSS按钮执行此操作。啊。
<a href="album-detail.html" class="bigbutton mysecond_class">VIEW PHOTOS</a>

<div id='vlightbox1'>
    <a href='path/to/my/image1.jpg' class='vlightbox1 bigbutton' title='my title'>
      <img src='path/to/my/image1.jpg' />
    </a>
    <a href='path/to/my/image2.jpg' class='vlightbox1 bigbutton' title='my second title'>
      <img src='path/to/my/image2.jpg' />
    </a>
</div>