アルザ制作 img-selectorの使い方

img-selectorを使うには?

  • サイト登録が必要です。まだの場合は「img-selectorサイト登録」で行ってください(送信を安全に行うためSSL化されたGoogleフォームが開きます)。試用版をおくらせていただきます。
  • ご契約の流れ、料金等については、img-selectorのご案内をご覧ください。
  • JavaScriptプラグインのため、HTML、CSS、JavaScript、JQueryについて、ある程度の知識が必要です。

img-selectorのフォルダを設置する

head内で以下のようにjQuery、slick(MITライセンス)、img-selectorを読み込みます。


<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

	<link rel="stylesheet" type="text/css" href="img-selector/slick/slick.css"/>
	<link rel="stylesheet" type="text/css" href="img-selector/slick/slick-theme.css"/>
	<link rel="stylesheet" type="text/css" href="img-selector/css/sample.css"/>

	<script type="text/javascript" src="img-selector/slick/slick.min.js"></script>
	<script type="text/javascript" src="img-selector/js/img-selector.js"></script>
	<script type="text/javascript" src="img-selector/js/sample.js"></script>	
</head>

サンプルではフォルダをroot直下に置いていますが、適宜読み替えてください。

*WordPressの場合は上記head内記述にかえて、functions.phpファイル内のfunction add_scripts()関数に以下を追加します。(なお、sample.jsとsample.cssは各ページの投稿欄で追加します。)


function add_scripts() {
	…
	…
	…
//以下を追加
	wp_enqueue_style( 'slick', get_template_directory_uri() . '/img-selector/slick/slick.css');
	wp_enqueue_style( 'slick-theme', get_template_directory_uri() . '/img-selector/slick/slick-theme.css');

	wp_enqueue_script( 'slick-min-js', get_template_directory_uri() . '/img-selector/slick/slick.min.js');
	wp_enqueue_script( 'img-selector-js', get_template_directory_uri() . '/img-selector/js/img-selector.js');
 
}
add_action('wp_print_scripts', 'add_scripts');

HTMLを記述する

HTMLのbody内で以下のように記述します。


		<div class="img-selector">
			<div data-price="2000" data-name="ステーキ"><img src="img/main/illustrain09-tabemono2.png"></div>
			<div data-price="1200" data-name="とんかつ"><img src="img/main/illustrain09-tabemono3.png"></div>
			<div data-price="800" data-name="コロッケ"><img src="img/main/illustrain09-tabemono4.png"></div>
			<div data-price="900" data-name="ハンバーグ"><img src="img/main/illustrain09-tabemono5.png"></div>
			<div data-price="300" data-name="目玉焼き"><img src="img/main/illustrain09-tabemono7.png"></div>
			<div data-price="700" data-name="ミネストローネ"><img src="img/main/illustrain09-tabemono12.png"></div>
		</div>

		<div class="img-selector">
			<div data-price="200" data-name="サンドイッチ"><img src="img/sub/illustrain09-pan5.png"></div>
			<div data-price="300" data-name="スパゲティ"><img src="img/sub/illustrain09-tabemono6.png"></div>
			<div data-price="300" data-name="オムライス"><img src="img/sub/illustrain09-tabemono1.png"></div>
			<div data-price="100" data-name="パン"><img src="img/sub/illustrain09-pan1.png"></div>
			<div data-price="200" data-name="ごはん&味噌汁"><img src="img/sub/illustrain09-tabemono13.png"></div>
		</div>

*WordPress場合は、以下のように記述します。なお、左詰めなのは自動整形機能対策です。また、最初に絶対パスでsample.jsとsample.cssを読み込んでいます。


<div><link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/twentyseventeen/img-selector/css/sample.css"/><script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/twentyseventeen/img-selector/js/sample.js"></script></div>
<div class="img-selector">
<div data-price="2000" data-name="ステーキ"><img src="img/main/illustrain09-tabemono2.png"></div>
<div data-price="1200" data-name="とんかつ"><img src="img/main/illustrain09-tabemono3.png"></div>
<div data-price="800" data-name="コロッケ"><img src="img/main/illustrain09-tabemono4.png"></div>
<div data-price="900" data-name="ハンバーグ"><img src="img/main/illustrain09-tabemono5.png"></div>
<div data-price="300" data-name="目玉焼き"><img src="img/main/illustrain09-tabemono7.png"></div>
<div data-price="700" data-name="ミネストローネ"><img src="img/main/illustrain09-tabemono12.png"></div>
</div>
<div class="img-selector">
<div data-price="200" data-name="サンドイッチ"><img src="img/sub/illustrain09-pan5.png"></div>
<div data-price="300" data-name="スパゲティ"><img src="img/sub/illustrain09-tabemono6.png"></div>
<div data-price="300" data-name="オムライス"><img src="img/sub/illustrain09-tabemono1.png"></div>
<div data-price="100" data-name="パン"><img src="img/sub/illustrain09-pan1.png"></div>
<div data-price="200" data-name="ごはん&味噌汁"><img src="img/sub/illustrain09-tabemono13.png"></div>
</div>

各セレクターにimg-selectorクラスを付与します。

また、各画像に data-xxxx の形式で属性を付与できます。

*サンプルでは画像フォルダをroot直下に置いていますが、適宜読み替えてください。

また画像の下に、文字をいれることもできます。


	<div data-price="2000" data-name="ステーキ"><img src="img/main/illustrain09-tabemono2.png"><br>ステーキ</div>

ステーキ

とんかつ

コロッケ

ハンバーグ

目玉焼き

ミネストローネ

JavaScriptを記述する

sample.jsを書き換えることで様々な機能が使えます。

*ファイルの場所は、img-selector/js/sampale.js

(1)img-selectorの呼び出し

以下の記述で呼び出しができます。


	$.setImgSelctor()

呼び出し時にオプションを追加できます。


	$.setImgSelctor({
		slidesToShow: 3,//表示する選択肢の数
		dots: true,//各セレクターににドットを追加
	});

(2)選択中の画像の番号を取得

以下の記述で取得できます(引数nは、セレクター番号)。


	$.getNumber(n)

たとえば、1番目のセレクターで選択中の画像を知りたい場合、


	var num=$.getNumber(0);
	console.log(num);//結果→画像の番号が表示

結果で仮に3が表示された場合、2番目の画像が選択されているとわかります。

*引数及び戻り値は0から始まることに注意してください。

(3)画像ファイルを取得

以下の記述で取得できます(引数mはセレクター番号、引数nは画像番号)


	$.getSrc(m,n)

例えば、1番目のセレクターの3番目の画像ファイルを取得する場合、


	src num=$.getSrc(0,2);
	console.log(src);//結果→画像のアドレスが表示

*引数は0から始まることに注意してください。

(4)選択中の画像のdata属性を取得

以下の記述で取得できます(引数mはセレクター番号、引数strはdata属性の名称)。


	$.getData(m,str)

例えば、1番目のセレクターで選択中の画像の名前を取得する場合


	var imgname=$.getData(0,'name');
	console.log(imgname);//結果→画像の名前(とんかつ等)を表示

*引数は0から始まることに注意してください。

取得したdata属性を表示

(5)各セレクターで選択された画像を重ねて表示。

以下の記述で表示できます。


	$(要素名).getImg()

以下は、resultクラスに画像を表示したい場合。(HTML側でresultクラスを作った前提)


	$('.result').getImg();

*ただし各画像は、同じサイズの透過画像である必要があります。

(6)ワンポイント・アドバイス

(2)~(4)を組み合わせることで、様々なことができます。

たとえば、1番目のセレクターで選択中の画像ファイルを知りたい場合。


	var num=$.getNumber(0);//1番目のセレクターの画像番号を取得
	var src=$.getSrc(0,num);//取得した番号を引数に代入
	console.log(src);//結果→1番目のセレクターで選択中の画像アドレスが表示

さらにJQueryのDOM操作と組み合わせることで画像そのものを表示できます。

以下はmyimgクラスに画像を表示させる場合。(HTML側でmyimgクラスを作った前提)


	var num=$.getNumber(0);//1番目のセレクターの画像番号を取得
	var src=$.getSrc(0,num);//取得した番号を引数に代入
	$('.myimg').html('<img src="' + src + '">');//結果→myimgクラスに画像が表示

ステーキ

とんかつ

コロッケ

ハンバーグ

目玉焼き

ミネストローネ

また、各セレクターで選択した商品の合計金額を知りたい場合。

以下のような計算式で求めることができます。(セレクター1~3の商品の合計)


	var yen=$.getData(0,'price')+$.getData(1,'price')+$.getData(2,'price');

CSSを記述する

sample.cssを書き換えることで表示を整えます。

*ファイルの場所は、img-selector/css/sampale.css

CSSについては一般的な使い方と変わりません。sample.cssのコメントを参考に書き換えてください。

まとめ

一見複雑に見える処理も、シンプルなメソッドの組み合わせで実現可能です。

イメージセレクターを利用してどのようなサイトを作るかはアイデア次第です。

それでは素敵なimg-selectorライフをお送りください。

メニュー