使用CSS按鈕打開視覺燈箱

Question

昨天，我問了一個與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畫廊保留 「vlightbox1」， 「vlightbox2」 他們的股票的ID等

顯然，我不能重寫「bigbutton」類或按鈕將無法正確顯示。同樣，我試圖將「bigbutton」類連接到lightbox觸發器，但我顯然寫錯了。

任何幫助一如既往，非常感謝！

Answer 1

難道你不能只抓住錨點，並附加一個處理程序的點擊事件？

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>