Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

公開日: : CSS, javascript

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。
分かりやすいように、ボールを投げる感じをやっていきます。

CSSで円を作る

CSSで円を作るには、角丸 border-radius を使います。
幅と高さの半分サイズを角丸に指定すると円になります。

.maru {
  width: 100px;height: 100px;
  border-radius: 50px;  
}

半分なので 50% と指定しても大丈夫です。

.maru {border-radius: 50%;}

マウスダウン、マウスアップ、マウスムーブ

ドラッグに使うマウス操作は以下の3つになります。

  • mousedown:マウスボタンが押されたとき
  • mouseup:マウスボタンが離されたとき
  • mousemove:マウスポインタが要素上を移動したとき

マウスの座標は event.clientX と event.clientY で取得出来ます。

<html>
<head>
<meta charset="utf-8">
<title>マウスドラッグのテスト1</title>
<style>
.mmobj{
position:absolute;
border-radius: 50%;
background:#333;
}
</style>
<script>
window.onload = function(){
	var mm_flg = false;
	var mm_start_x = 0;
	var mm_start_y = 0;

	// オブジェクトの値指定
	var mmobj_x = 100;var mmobj_y = 100;//座標
	var mmobj_w = 200;var mmobj_h = 200;//幅と高さ
	document.getElementsByClassName('mmobj')[0].style.left = mmobj_x + 'px';
	document.getElementsByClassName('mmobj')[0].style.top = mmobj_y + 'px';
	document.getElementsByClassName('mmobj')[0].style.width = mmobj_w + 'px';
	document.getElementsByClassName('mmobj')[0].style.height = mmobj_h + 'px';

	// マウスダウン
	window.onmousedown = function(e) {
	  mm_flg = true;
	  mm_start_x = e.clientX - mmobj_x;
	  mm_start_y = e.clientY - mmobj_y;
	}
	// マウスアップ
	window.onmouseup = function(e) {
	  mm_flg = false;
	}
	// マウスムーブ
	window.onmousemove = function(e) {
	  if(mm_flg) {
		mmobj_x = e.clientX - mm_start_x;
		mmobj_y = e.clientY - mm_start_y;
	    document.getElementsByClassName('mmobj')[0].style.left = mmobj_x + 'px';
	    document.getElementsByClassName('mmobj')[0].style.top = mmobj_y + 'px';    
	  }
	}
};
</script>
</head>
<body>
<h1>マウスドラッグのテスト1</h1>
<div class="mmobj"></div>
</body>
</html>

このような感じになりました。
DEMO を見る

イベントターゲットを指定してボールを掴む

現在 window 全体にイベントがかかってしまっているので、ボールだけにするのに、マウスダウンのところを以下のように変更します。

// マウスダウンイベントを設定
document.getElementsByClassName('mmobj')[0].addEventListener( 'mousedown', function(e) {
	// 要素のイベントをリセットしておく
	e.preventDefault();
	document.getElementsByClassName('mmobj')[0].style.background = '#999';
	mm_flg = true;
	mm_start_x = e.clientX - mmobj_x;
	mm_start_y = e.clientY - mmobj_y;	
} );

EventTarget.addEventListener

addEventListener を使ってイベントターゲットそ指定します。
これで、ドラッグがボールをマウスダウンした時だけになります。

document.getElementsByClassName

以前は、getElementById をよく使っていましたが、ページ上で一つしか使えないので後々困ることが多いので、getElementsByClassName にしておきました。

クラスは配列で取得するので、要素位置の数を指定しないとエラーになります。

preventDefault()

マウスアップでドラッグのフラグをfalseしていますが、ダブルクリックなどでドラッグが続いてしまう場合があります。

preventDefault() を入れると、その要素のイベントをキャンセル出来ます。

マウスダウンイベントの中で、e.preventDefault() を入れることによってこの挙動が起きなくなりました。

DEMO を見る

スマホ用の切り分け判定

スマホ用に touch イベントを付けます。

以前「スマホだったら」と書くのに、マウスイベント内でこんな感じで、

if(event.touches) { //スマホだったら
.......
}

と、簡単に書いてしまっていました。

これだとタッチが出来るパソコンの場合にマウス操作が動かなくなってしまいますので、以下のようにちゃんとユーザーエージェントで振り分けしないとダメでした。

//スマホの振り分け
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0){
ua = 'iphone';
}else if(ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
ua = 'sp';
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
ua = 'tab';
}else{
ua = 'other';
}
//イベントの振り分け
var EVENT = {};
if(ua!='other'){//スマホだったら
  EVENT.TOUCH_START = 'touchstart';
  EVENT.TOUCH_MOVE = 'touchmove';
  EVENT.TOUCH_END = 'touchend';
} else {
  EVENT.TOUCH_START = 'mousedown';
  EVENT.TOUCH_MOVE = 'mousemove';
  EVENT.TOUCH_END = 'mouseup';
}

スマホだったらというところをこういう風にします。

if(ua!='other'){//スマホだったら
........			
}

DEMO を見る

javascript タイマー関数を使ってボールを左右にスライドさせる

javascript タイマー関数は2種類あります。

setInterval(関数名, 時間, 引数1, 引数2,…)

一定時間ごとに特定の処理を繰り返す

setTimeout(関数名, 時間, 引数1, 引数2,…)

一定時間後に特定の処理を1度だけおこなう

ボールはだんだんゆっくりとなっていきたいので、setTimeout を再帰して繰り返そうと思います。

setTimeout 効かない

setTimeout の再帰呼び出しは以下のように書いてループさせます。

function Fnkloop(){
setTimeout(Fnkloop,1000);//1秒ごとに処理を繰り返す
}
Fnkloop();

はじめ間違えて以下のように書いてました。

function Fnkloop(){
setTimeout(Fnkloop(),1000);// ← 間違っています!!
}
Fnkloop();

これだと動かないので気を付けてください。
DEMO を見る
setTimeout で左右にタイマーを使って、投げれるようになりました。

ボールを投げる 左右上下と勢い

最後に上下を付けてマウスドラッグが多いほど早くスライドするようにしました。
DEMO を見る

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応サンプル

このマウスドラッグのスクリプトを利用して、まとめに写真ギャラリーのサンプルを作ってみました。
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
写真ギャラリーサンプルのダウンロードはこちら
DEMO を見る

関連記事

Web フォント とは?

WEBフォントとは? 意図するフォントを表示する技術 Webブラウザは端末にインストールされ

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

CSS三角を利用したメニューを作る(レスポンシブ)

CSS 三角 を利用したメニューを作る(レスポンシブ)

前回の吹き出しを利用して、段階を見せるような三角メニューを作っておきます。 なるべくレスポンシブ対

記事を読む

JavaScript 規制標識 タイピングゲーム(自分用・激ムズ)

HTML5 audio タグ を使って音声を出す

HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生

記事を読む

繰り返し背景を全面表示してアニメーションする

繰り返し背景を全面表示してアニメーションする

前回の「背景を SVG で全面表示し、パターン化をアニメーションさせる」がSVGの要素を全て対応して

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ(add_filter版)

前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById

記事を読む

CSS セレクタ

【CSS セレクタ】その2:擬似クラスセレクタやラジオボタンチェックでフォームの有効無効や枠の色変えたいとか

<今回のピックアップ項目> :link :visited :hover :active :t

記事を読む

CSS セレクタ

【CSS セレクタ】その1:アスタリスクや属性セレクタとか

CSS3も浸透してきて、細かい所が危うくなってきたので、セレクタを中心に少しおさらいしようかと思いま

記事を読む

CSS 吹き出し

CSS 三角で吹き出しを作る

吹き出しとか三角とかよく使うのに、いちいち調べてどれ使おうかといつもやっていたので、まとめて作ってお

記事を読む

CSS javascript

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

WordPress Warning エラー
WordPress フォルダー・ファイル系の関数 is_dir や opendir や exif_imagetype で Warning エラー

Wordpress の管理画面でフォルダーの中身を読み込む関数 ope

Wordpress 自作フォーム (チェックボックスなど)
WordPress 自作フォーム その3(チェックボックスなど)

以前、WordPress 自作フォーム その1の記事で Wordpre

Javascript ノード の取得や挿入
Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑