今回は【jQuery】フルスクリーンで拡大表示を実装、Intense Imagesの使い方!! の解説になります!
こんな方に読んでほしい
jQueryを学び始めた方へ プラグインのIntense Imagesを使って「フルスクリーンで拡大表示」をしたい方向け 今回はIntense Images について解説しております。今回は、「Intense Images」 についての解説になります。 「Intense Images 」になりますが、今でも簡単で使いやすいプラグインになっております。
イメージ図は上記のようになります。 サムネイル画像をクリック後、フルスクリーンで拡大表示されます。 また、縦長、横長の画像の場合は、マウス移動で横、縦スクロールしてくれます。
Intense Imagesについて Intense Images とは、「フルスクリーンで拡大表示」 のことを示します。
また、縦長、横長の画像の場合は、マウス移動で横、縦スクロールしてくれます。 jQueryが苦手な方でも問題ありません。 まずは下記のサイトから「Intense Images 」をダウンロードしましょう。
必要なファイルについて ダウンロード後に必要なファイルについて解説していきます。 まずは、ファイル名の「intense-images-master 」をご確認ください。
● cssファイル1 「demo」 > 「css」 > 「style.css 」● jsファイル2 「intense-images-master」 > 「intense.js 」● jsファイル3 「demo」 > 「img」 > 「close_cursor.png / plus_cursor.png 」の4点を使用します。<!--css-->
<link rel="stylesheet" href="css/style.css">
<!--js-->
<script src="js/intense.js" type="text/javascript"></script>
また、「intense.js」を使用する際には、intenseを使用する宣言をしなければなりません。 以下のコードを合わせて指定しましょう。
<!--js-->
<script src="js/intense.js" type="text/javascript"></script>
<script>
var elements = document.querySelectorAll( '.demo-image' );
Intense( elements );
</script>
「intense.js」と繋げて記述するのが良いでしょう。 また、ファイルの階層は、ご自身のフォルダに合わせてください。
記述場所について 基本的にはbody
内に指定するようにしましょう。 基本構造の書き方は以下のようになります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 【jQuery】フルスクリーンで拡大表示を実装...</title>
<!--css-->
<script src="js/intense.js" type="text/javascript"></script>
</head>
<body>
コンテンツが入ります。
<!--js-->
<script src="js/intense.js" type="text/javascript"></script>
<script>
var elements = document.querySelectorAll( '.demo-image' );
Intense( elements );
</script>
</body>
</html>
フルスクリーンで拡大表示の設定について 次に、フルスクリーンで拡大表示の設定についてについて解説します。
フルスクリーンで拡大表示の設定についてについて デモサイト はコチラから。 基本構造の書き方は以下のようになります。
フルスクリーンで拡大表示の設定
<div class="demo-image first" data-image="images/page/top/sample01.jpg" data-title="タイトル" data-caption="文章"></div>
<div class="demo-image second" data-image="images/page/top/sample02.jpg" data-title="タイトル" data-caption="文章"></div>
/*--CSSは自由に変更可
「style.css」を一部変更して載せております。
--*/
/*--主に画像のサイズを指定--*/
.demo-image {
cursor: url("../img/plus_cursor.png") 25 25, pointer;
display: inline-block;
width: 320px;
height: 320px;
background-size: cover;
background-position: 50% 50%;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 16px;
}
/*--1枚目の背景を指定--*/
.demo-image.first {
background-image: url("../images/page/top/thumbnail-001.jpg");
}
/*--2枚目の背景を指定--*/
.demo-image.second {
background-position: 50% 10%;
background-image: url("../images/page/top/thumbnail-002.jpg");
}
var elements = document.querySelectorAll( '.demo-image' );
Intense( elements );
今回は、背景に画像を指定します。 クラス名にfirst / second
で個別に指定しています。 拡大画像をdata-image
に指定し、タイトルをdata-image
、キャチコピーをdata-caption
に指定します。
まとめ 今回はこれで以上です。
スポンサーリンク
SHU 1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。 趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑 つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事 関連記事