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

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

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

このページは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)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (1)