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. collapsible

    JavaScriptでスムーズなコンテンツ切り替えプラグイン デモ【c…

  2. handy-collapse

    アコーディオンメニュー内にアコーディオン【handy-collapse…

  3. accordion_jsjavascript & CSS 超シンプル スライディング アコーディオン

    javascript & CSS 超シンプル スライディング…

  4. jQueryプラグイン Image Photo

    jQueryプラグイン サンプル集

  5. lightbox2

    あらゆるブラウザに対応!画像ポップアップスクリプト【Lightbox2…

  6. tilescolumns-unite-gallery

    スマホ時にスワイプにも対応👆グリッドギャラリー【Til…

制作実績一覧

  1. bacchus
  2. ふじぜんリニューアル後
  3. legend-planning
  4. ポスティングこころざし様
  5. インテリアコーディネーター小島真子

最近の記事

  1. tech-kids-school
  2. セールスライティング
  3. キーワードの選び方
  4. YouTube 集客
  5. 幼児のプログラミング教育
  6. E-A-T(専門性・権威性・信頼性)
  7. ホームページ集客
  8. instagram
  9. ameba-seo
  10. 開業
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主