0

昨天，我问了一个与 Fancybox 相关的问题，有人非常乐于助人地向我展示了我丢失的作品。不过，现在我弄清楚了所有这些，我意识到……Fancybox 并不是我想要的。相反，我决定使用 Visual Lightbox (v5.0)，因为对于基本的页面查看器来说，一旦打开控件，如何处理这些控件就更明显了。

话虽如此，我已经使用我昨天学到的信息让一切工作完美 - 多个画廊，集成缩略图启动等 - 一切都很完美！我现在想做的是能够从 CSS 按钮启动每个缩略图的独特灯箱画廊。我已经阅读了几十个似乎相关的问题，但我阅读的所有技巧都不适用于我的。

所以我们开始吧。按钮的 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;
}

现在按钮的 HTML：

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

VLB 画廊保留其股票 ID “vlightbox1”、“vlightbox2”等。

显然，我不能覆盖“bigbutton”类，否则按钮将无法正确显示。同样，我尝试将“bigbutton”类链接到灯箱触发器，但我显然写错了。

一如既往，非常感谢任何帮助！

4

1 回答 1

0

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

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
}

另外，我不太确定“覆盖 'bitbutton' 类”是什么意思，但元素上可以有多个类。

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

================== 编辑=======================

查看该站点的代码，您似乎需要更改链接的 href 以及 textnode。最后，代码应如下所示：

<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>
于 2012-12-14T17:21:29.907 回答