JavaScript

intense.jsを活用した画像拡大・スクロール表示の実践ガイド

  /

intense.jsは、クリックした画像をビューアとして拡大表示するための非常にシンプルで効果的なJavaScriptライブラリです。
この記事では、intense.jsを使用して画像を拡大表示し、拡大画像を上下左右にスクロール表示する方法を解説します。

Contents

前提となるCSSの設定

まずは、拡大表示する画像のサムネイルエリアを定義するためのCSSを設定します。このサムネイルエリアは .demo クラスとして定義されます。

このエリアは、マウスカーソルを上に乗せると拡大マークが表示され、クリックすることで画像が拡大されるようになっています。

<style>
* {
  padding: 0;
  margin: 0;
}
body {
  font-size: 14px;
  text-align: center;
}
.ttl{
  text-align: center;
  font-size: 20px;
  padding: 20px 0 40px 0;
  line-height: 1.8em;
}
.demo {
  cursor: url("plus_cursor.png") 25 25, pointer;
  display: inline-block;
  width: 300px;
  height: 200px;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("yakei.jpg");
}
</style>

HTMLでのマークアップの指定

拡大表示をするためのサムネイルエリアをHTML上でマークアップします。ここでの重要なポイントは、data-image, data-title, data-captionの3つのデータ属性を正確に設定することです。

これにより、画像をクリックした際の拡大表示やタイトル、キャプションの表示が制御されます。

<h1 class="ttl">intense.jsを使って画像を拡大表示し、拡大画像を上下左右にスクロール表示します。<br>以下の画像をクリックしてみて下さい。</h1>

<div class="demo" data-image="yakei.jpg" data-title="画像タイトル" data-caption="画像説明"></div>

intense.jsを使ったJavaScriptによる動作の制御

intense.jsを読み込んだ後、JavaScriptを使用して、サムネイルエリアにクリックイベントをバインドします。
これにより、サムネイルをクリックすると画像が拡大表示されるようになります。

<script src="intense.js"></script>
<script>
  var elements = document.querySelectorAll( '.demo' );
  Intense( elements );
</script>

intense.jsを使って画像を拡大表示し、拡大画像を上下左右にスクロール表示するデモページ

実際の動作を確認したい方は、以下のデモページをご覧ください。

intense.jsを使って画像を拡大表示し、拡大画像を上下左右にスクロール表示するデモページ

ソース元：Intense Images

intense.jsは、多くのウェブサイトやプロジェクトで利用されている実績のあるライブラリです。
詳細やその他の情報は、以下の公式サイトをご参照ください。
Intense Images

まとめ

intense.jsは、シンプルながらも効果的な画像拡大表示ライブラリです。設定も簡単で、多くのウェブサイトで活用されています。今回の記事でその基本的な使い方を学んだので、あなたのウェブサイトやプロジェクトでの利用をぜひ検討してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

ズーム intense.js 画像拡大
関連記事