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 ギャラリーは、「vlightbox1」、「vlightbox2」などのストック ID を保持します。

明らかに、「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も変更する必要があるようです。最終的に、コードは次のようになります。

<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 に答える