Lightboxに画像をグループ化する軽量なJavaScriptプラグイン【ImageBox】

【ImageBox】は、Lightboxに単一の画像またはグループ化された画像を表示するための、軽量で標準的なJavaScriptプラグインです。CSS Script サイトよりダウンロードが可能な無料配布素材です。

【ImageBox】プレビュー

パソコン版プレビュー

image-box

著者tobiasroeder
公式ページwebsite
最後の更新2019年4月29日
ライセンスMIT

LICENSE:MIT
MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があります。ソースコード上(css、html)内に、著作権およびライセンス表示をすれば、サイト上で公開し表示する義務はありません。参照:MITライセンス(日本語翻訳)

ImageBox ダウンロード

download

ImageBox Download

ImageBox デモ

image-box

ImageBox デモ

ImageBoxのJavaScriptファイルとCSSファイルをドキュメントにインポート


<link href="css/imagebox.css" rel="stylesheet">
<script src="imagebox.js"></script>

単一画像のlightboxを作成するには、imgタグに【data-imagebox】属性を追加して完了です。


<img src="images/1.jpg" data-imagebox>

lightboxに複数の画像を表示するには、画像に【data-imagebox=”gallery” 】属性を追加します。


<img src="images/1.jpg" data-imagebox data-imagebox="gallery">
<img src="images/2.jpg" data-imagebox data-imagebox="gallery">
<img src="images/3.jpg" data-imagebox data-imagebox="gallery">

lightboxに小さな画像から大きな画像を表示する必要がある場合。


<img src="images/small-1.jpg" data-imagebox data-imagebox-src="images/large-1.jpg">

【data-imagebox-description】属性で画像の説明を定義することもできます。


<img src="images/small-1.jpg" data-imagebox data-imagebox-description="Image Description">

ImageBox デモ【完全形】

画像をクリックするとグループ化されたLightboxが表示されます。



ImageBox コード設置例

ImageBox デモ


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>【image box】</title>
 
<link rel="stylesheet" type="text/css" href="css/imagebox.css">
 
</head>
<body>
 
<h1>image box デモ</h1>
 
<!--imagebox▼-->
<h2>単一画像のlightboxを作成するには、imgタグに【data-imagebox】属性を追加して完了です。</h2>
 
<img src="images/1.jpg" data-imagebox>
 
<h2>lightboxに複数の画像を表示するには、画像に【data-imagebox="gallery" 】属性を追加します。</h2>
 
<img src="images/2.jpg" data-imagebox data-imagebox="gallery">
<img src="images/3.jpg" data-imagebox data-imagebox="gallery">
 
<h2>lightboxに小さな画像から大きな画像を表示する必要がある場合。</h2>
 
<img src="images/small-1.jpg" data-imagebox data-imagebox-src="images/large-1.jpg">
 
<h2>【data-imagebox-description】属性で画像の説明を定義することもできます。</h2>
 
<img src="images/small-1.jpg" data-imagebox data-imagebox-description="Image Description">
 
<h2>完全形の例。</h2>
 
<img src="images/small-1.jpg" data-imagebox="gallery" data-imagebox-src="images/large-1.jpg" data-imagebox-description="ベンツ">
<img src="images/small-2.jpg" data-imagebox="gallery" data-imagebox-src="images/large-2.jpg" data-imagebox-description="ベンツ内装">
<img src="images/small-3.jpg" data-imagebox="gallery" data-imagebox-src="images/large-3.jpg" data-imagebox-description="ランボルギーニ">
 
<script src="js/imagebox.js"></script>
 
</body>
</html>

ImageBox Download

フォトギャラリー

「集客」無料相談承ります!

お問い合わせはこちら

関連記事

  1. tiles_grid_video

    YouTube 動画のスライドショー📽をホームページへ…

  2. フォトギャラリー

    写真アルバム・フォトギャラリー作成・サンプル集 JavaScript・…

  3. 「FAQ」「Q&A」「SIDE MENU」に最適なアコーディオンメニュー

    「FAQ」「Q&A」に最適なアコーディオンメニュー(無料素材…

  4. レスポンシブ ポラロイドギャラリー【Vintalight】

    レスポンシブ ポラロイドギャラリー【Vintalight】

  5. CSS + HTML だけのアコーディオン

    CSS + HTML だけのアコーディオン(Accordion)メニュ…

  6. grid-gallery-master

    Lightboxと軽量フォト グリッドギャラリー 【Grid Gall…

制作実績一覧

  1. 行田市 三島造園有限会社
  2. 行田市リサイクルイズミ
  3. スパイシーベジーカレー
  4. bacchus
  5. ふじぜんリニューアル後
  6. legend-planning
  7. ポスティングこころざし様
  8. インテリアコーディネーター小島真子

最近の記事

  1. SEO対策の平均費用
  2. セルフSEO対策
  3. STORES 予約
  4. 無料で予約サイトが作れる【MOSH】
  5. 第三者の影響力 ウィンザー効果
  6. 『お客様の声』アンケート
  7. コアウェブバイタル(Core Web Vitals)
  8. FAQリッチリザルト
  9. WordPress
  10. Ameba Ownd(アメーバオウンド)