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ページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具体的には、スマホで最近よく見か

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

Javascript let const アロー関数 クラス

Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)

ESとはECMASCriptの略で、ECMA という国際的な標準化機関が定めた JavaScript

記事を読む

Strict モード JavaScript

Javascript Strictモード “use strict”;

Strict モード(厳格モード) Strict モードとは、ECMAScript5(2009年1

記事を読む

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

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

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

記事を読む

Web フォント とは?

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

記事を読む

JavaScript タイピングゲーム スマホ用

Javascript タイピング ゲーム スマホ用 をつくる

JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや

記事を読む

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

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

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

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

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

記事を読む

CSS セレクタ

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

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

記事を読む

CSS javascript

Message

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

Javascript let const アロー関数 クラス
Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)

ESとはECMASCriptの略で、ECMA という国際的な標準化機関

Strict モード JavaScript
Javascript Strictモード “use strict”;

Strict モード(厳格モード) Strict モードとは、ECM

CodeIgniter インストール
Codeigniter インストールとバージョンアップ2→3 PHP 5→7 メモ

Codeigniter インストール Codeigniter をサイ

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

wordpress カスタム投稿で 2ページ目以降が404
wordpress カスタム投稿で 2ページ目以降が404になってしまう

wordpress のカスタム投稿で、ニュースのページを作っていました

→もっと見る

    • 202007
      Mon Tue Wed Thu Fri Sat Sun
      12345
      6789101112
      13141516171819
      20212223242526
      2728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑