【プログラム配布】サムネイルをクリックすると画像がフワッと出てくる「fuwaimg」

Lightboxのような、リンクをクリックすると画像がふわっと出てくるモーダルウインドウ表示プログラムです。

日本製（日本語マニュアル・サポート完備）
レスポンシブ対応
設置はCSS・JSを読み込むだけでカンタン
スマホでのスワイプ、ロングタップに対応

制作経緯

既存のフリー配布プログラムでも同様の機能を付けることができるのですが、以下の理由から自作してみることにしました。

既存で有名なものは海外製なので、公式サイトがすべて英語で書かれており、日本人にはとっつきづらい。特に趣味でサイトを作る人には敷居が高く感じてしまう
既存プログラムはデザインが少し昔っぽい。今時のWebデザインにもなじむものが欲しい
できればjQueryを使わないものが望ましい

あとは自分がjavascriptを勉強するためというのもありました。

仕様について

動作環境

前述の通りjQuery不使用。使用プログラムはjavascriptのみなので、すべてのサーバーで動作するはずです。

動作確認はロリポップ！サーバー、windows10/Google chrome/FirefoxおよびiOS/Safari/Google Chrome。

設置方法

fuwaimg.zipをダウンロードし解凍すると、cssフォルダに「fuwaimg.css」、jsフォルダに「fuwaimg.js」の２つのファイルが入っています。使用するのはこれだけです。

まずはこの２つのファイルを、プログラムを使いたいページで読み込ませます。

fuwaimg.cssの読み込み

<head>～</head>のどこかで読み込みます。</head>直前が無難です。

<head>
...中略...
<link rel="stylesheet" href="css/fuwaimg.css">
...中略...
</head>

CSSのパスは必要に応じて書き換えてください。

fuwaimg.jsの読み込み

</body>閉じタグの直前で読み込みます。

<script src="js/fuwaimg.js"></script>
</body>

こちらも、パスは必要に応じて書き換えてください。

リンクの設定

aタグのリンク先に表示したい画像のパスを記述し、class=”fuwaimg”を付けるだけです。

<a href="表示したい画像のパス" class="fuwaimg">リンク文字列</a>

キャプションを表示する

aリンクにdata-fcaption="ここにキャプション"を加えます。

<a href="表示したい画像のパス" data-fcaption="ここにキャプション" class="fuwaimg">リンク文字列</a>

キャプションは改行、タグは使えません。また、長すぎるとデザイン崩れの原因になるため、１行程度に収めるようにしてください。

画像をグループごとにページ送りする

aリンクにdata-fimg="グループ名"を加えます。グループ名は半角英数字が望ましいです。

<a href="sweets01.jpg" data-fimg="sweets" data-fcaption="グループまとめの例" class="fuwaimg">…</a>
<a href="sweets02.jpg" data-fimg="sweets" data-fcaption="スイーツ（２枚目）" class="fuwaimg">…</a>
<a href="sweets03.jpg" data-fimg="sweets" data-fcaption="スイーツ（３枚目）" class="fuwaimg">…</a>
<a href="sweets04.jpg" data-fimg="sweets" data-fcaption="スイーツ（４枚目）" class="fuwaimg">…</a>

<a href="fruits01.jpg" data-fimg="fruits" data-fcaption="フルーツです。" class="fuwaimg">…</a>
<a href="fruits02.jpg" data-fimg="fruits" data-fcaption="フルーツ（２枚目）" class="fuwaimg">…</a>
<a href="fruits03.jpg" data-fimg="fruits" data-fcaption="フルーツ（３枚目）" class="fuwaimg">…</a>

上の例では、data-fimg="sweets"が付与されたグループと、data-fimg="fruits"が付与されたグループとで別々にページ送りが行われます。（動作デモページ参照）

動作確認

コードが書けたらローカル環境でテストしてみてください。javascriptだけなのでローカルでも動きます。

うまく表示できたら作業は完了です。お疲れ様でした。

トラブルシューティング

縦長の画像を表示すると、左右に黒いスペースができる。

画像の縦の長さが、端末の画面の縦幅よりも大きい場合に起こる現象です。仕様であり、不具合ではありません。どうしても気になる場合は、表示する画像を縦に縮小してみて下さい。

PCから表示した場合、余白が大きいため画像が小さくなってしまう。

各ブラウザへ対応するための仕様です。ご理解の上でご利用いただければ幸いです。

サムネイルを一枚だけ表示させて、矢印をクリックすると、ページをめくるように別の画像を表示するようにしたい。

そのような仕様には対応していません。あらかじめご了承ください。

ライセンス

このプログラムは、どなたでも無償でお使いいただけます。
商用サイトでも、アダルトコンテンツを含むサイトにも、無償でお使いいただけます。
利用に際して報告やクレジットリンクは必要ありません。
改変、再配布、販売なども自由。改変したものを配布したり販売したりすることにも制限はありません。
CSS等を書き換えてデザインを変えることもOKです。また、デザインを変更するためのコードなどを自分のサイトで公開・配布してもOK。良い改造例はどんどんシェアして下さい。
ただし、プログラム内に書かれている著作権表示は削除しないでください。また、当然ながらあたかもプログラムのすべてを自作したかのように誤解させる発言・表記もおやめください。

使用上の確認事項

開発者は、このプログラムのすべての環境での動作を保証するものではありません。
開発者は、このプログラムを利用したことに起因する一切の不利益に対する責任を負いません。
プログラムの設置・設定に関する質問の全てにはお答えできません。特に、設置マニュアルを読めば解決されると思われる内容のものには返信いたしません。
カスタマイズは自由ですが、個別のカスタマイズの相談（例えば、見た目を変えるにはどうすればよいか等）には応じられません。
CMSがインストールされたサイトでの正常な動作は保証しかねます。自己責任のもと取り組んでください。
もし、サーバー要件を満たしていて、設置手順に問題が見られないのに、どうしてもプログラムが動かない等のトラブルが発生した場合は、「サーバー名」「設置を試みたページのURL」を必ずお書き添えの上、こちらからご連絡下さい。

このプログラムを使ってみていいなと思ったら、ご支援いただけましたら幸いです。

ご支援について

「do」では、個人の創作・同人サイトを盛り上げたいという目的のもと、htmlテンプレートを無料で配布しています。その他役立つ情報なども、多くの方に喜んでいただくためできる限り無償で提供していく方針です。ですが、もしも「 […]

変更履歴

2021.07.20: スマホのロングタップで、モーダルに表示された画像を保存できるように修正。

2021.03.06: PCから閲覧したときに、より原寸大に近いサイズで表示できるよう調整。

2020.11.22: Firefoxでのデザイン崩れ修正。
画像の読み込みが遅いとモーダルが表示されなくなる問題を修正。
スマホでのスワイプに対応。

2020.11.20: 配布開始