ど素人から毛を生やす。<延>

ページを開くと自動的にライトボックスを起動させたい(しかもリンク先がHTML)

Web > javascript 2015年5月29日(最終更新:8年前)

2015年5月29日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。

ページを開くと自動的にライトボックスを起動させて欲しいとのことでした。
しかも、画像のライトボックスではなく、他ページのHTMLをライトボックスで表示させたいというご要望。

フリーで出回っているライトボックス系プラグインは、HTMLのライトボックスに対応していないものが多いです。
商用サイトは有償、のjQueryであれば結構あるのですが…

 

画像ライトボックスの場合、jQueryを読み込んだ上で、


$(document).ready(function(){
$("a#firstlink").eq(0).click();
});

と記載することで、ページ読み込み完了時にa#firstlinkが自動的に「クリックされる」ことになります。
ので、ライトボックスの指定をしたaタグに対して上記の指定を行います。

 

で、HTMLのライトボックスが可能な商用もフリーのjQueryプラグインなのですが、
venoboxというかなり優秀なものがありました。

SNSで宣伝をすればダウンロード可能です。
詳しい話は配布元のサイト様を見ていただくとして、HTMLを自動的に開くには下記の記述をhead内で行います。


$(document).ready(function(){
    /* custom settings */
    $('.venobox_custom').venobox({
        framewidth: '横幅px',        // default: ''
        frameheight: '縦幅px',       // default: ''
        border: '10px',             // default: '0'
        bgcolor: '#fff',         // default: '#fff'
        titleattr: 'data-title',    // default: 'title'
        numeratio: true,            // default: false
        infinigall: true            // default: false
    });

    /* auto-open #firstlink on page load */
    $("#firstlink").venobox().trigger('click');
});

で、


<a href="リンク先" id="firstlink" class="venobox_custom" data-type="iframe"></a>

を、どこかに記述します。
先のも今回のも、あくまでHTML上に存在するライトボックスを起動するタグを自動的にクリックするものなので、リンクの記述は忘れないようにします。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (`・ω・´) 役に立った (1)
  • (・∀・) 参考になった (2)