てきとうな説明でてきとうに作ろう

やりかた

まずは公式サイト開いてすぐのDOWNLOADボタンを押してfeatherlight-1.7.13.zipを手に入れ、解凍しましょう。

「release」フォルダ内の「featherlight.min.js」「featherlight.min.css」の2つを自サイトの場所へコピーします。

<head>～</head>内に以下のコードをコピペします。

<link rel="stylesheet" href="ファイルの場所/featherlight.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="ファイルの場所/featherlight.min.js"></script>

<head>
    <link rel="stylesheet" href="ファイルの場所/featherlight.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="./dist/featherlight.min.js"></script>
    <style type="text/css">
        .lightbox {display: none;}  //<div class="lightbox">を隠しています
        </style>
</head>
<body>
    <a href="#" data-featherlight="#sampletext">ここをクリック</a>
    <div class="lightbox" id="sampletext">
        <p>ここにテキストをいれます。</p>
    </div>
</body>

<a>の「data-featherlight」と<div>の「id」を同じ文字列にし、「data-featherlight」の先頭に#をつけます。
すると<div>の中身がFeatherlightで表示されるようになります。
ただし、それだけでは<div>の中身が丸見えのため、6行目で隠すようにしています。

次に画像のやり方ですが、「data-featherlight」をimageにするだけです。

<a href="画像の場所/画像.jpg" data-featherlight="image">ここをクリック</a>

最後にiFrameのやり方です。
iFrameは他のページを表示させます。Youtubeなどの動画もできます。
サンプルではjQuery MousewheelのサンプルをFeatherlightさせています。小説サイトでも使えるのかっこよくないですか？

<!-- iFrame -->
<a href="他のページ.htmlまたはURL" data-featherlight="iframe" data-featherlight-iframe-width="幅" data-featherlight-iframe-height="高さ">ここをクリック</a>

<!-- Youtube（普通のwidthとheightでのサイズ指定） -->
<a href="https://www.youtube.com/embed/動画ID?rel=0&amp;autoplay=1" data-featherlight="iframe" data-featherlight-iframe-width="幅" data-featherlight-iframe-height="高さ" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true">ここをクリック</a>

<!-- Youtube（画面の大きさの85％でのサイズ指定） -->
<a href="https://www.youtube.com/embed/動画ID?rel=0&amp;autoplay=1" data-featherlight="iframe" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-style="display:block;border:none;height:85vh;width:85vw;">ここをクリック</a>

widthとheightの他にも、通常iFrameに付与できる属性はFeatherlightにも付与できます。
同じように「data-featherlight-iframe-」とつけるだけです。
またstyleの設定は「data-featherlight-iframe-style="border:none;height:85vh;width:85vw;"」のように書きます。
上の例のように動画IDの後ろに「?rel=0&autoplay=1」とつけると、Featherlightが開くと自動で再生します。
クリック元に動画サムネイルを使いたい方は、YoutubeサムネイルURL取得さんが便利です。

Featherlight

サンプル

概要

やりかた