JavaScript

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

intense.jsを使って画像を拡大表示し、拡大画像を上下左右にスクロール表示する方法をご紹介します。

intense.jsを使って画像を拡大表示し、拡大画像を上下左右にスクロール表示するCSS記述

※拡大表示するサムネイルエリア(.demo)のCSS記述です。必要に応じて変更して下さい。

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

intense.jsを使って画像を拡大表示し、拡大画像を上下左右にスクロール表示するHTML記述

※拡大表示するサムネイルエリア(class=”demo”)を用意し、data-image=”拡大表示する画像” data-title=”画像タイトル” data-caption=”画像説明”を設定します。

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

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

intense.jsを使って画像を拡大表示し、拡大画像を上下左右にスクロール表示するJavaScriptの記述

※intense.jsファイルを読み込みます。document.querySelectorAll( ‘拡大表示するサムネイルエリア’ )を記述します。

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

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

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

ソース元:Intense Images

Intense Images

 

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