zxcvbnmnbvcxz.com http://zxcvbnmnbvcxz.com We are SUPER C Wed, 22 May 2013 04:37:42 +0000 ja hourly 1 http://wordpress.org/?v=3.5.1 Google Map コントロールナビの位置や航空写真切替の表示非表示の設定変更方法 http://zxcvbnmnbvcxz.com/google-map-control/ http://zxcvbnmnbvcxz.com/google-map-control/#comments Thu, 09 May 2013 08:08:50 +0000 Kenta Toshikura http://zxcvbnmnbvcxz.com/?p=9019 どうもこんにちは。Toshikuraです。今回のTipsは【Google Map コントロールナビの位置や航空写真切替の表示非表示の設定変更方法】です。googleMapにはグレースケール化や経路表示等、色々なオプション設定もあります。今回は、中でも比較的頻繁に使用するコントロールナビの位置を制御するオプションの設定の仕方をメモしておきます。

Googleマップ

Googleマップを使用するには以下JSを読み込んでおく必要が有りますのでお忘れなく記述してください。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

実装方法

実装は至って簡単です。googleマップ設置では【mapTypeControlOptions】を指定するかと思います。こちらに以下のような記述をすれば実装完了です。マップ名及び航空写真（マップタイプ）の表示非表示はmapTypeControlで指定しています。

・コード

mapTypeControl: true,//falseでマップ名及び航空写真（マップタイプ）の非表示
mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
    position: google.maps.ControlPosition.BOTTOM_CENTER //マップタイプの位置
},
panControl: true,//falseで非表示
panControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,//falseで非表示
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,//falseで非表示
scaleControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: true,//falseで非表示
streetViewControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT
}

・コントロールの位置に関して
コントロールの位置は下記画像をご確認ください。

・コントロールの種類に関して
コントロールは4種類あります。それぞれ表示切替が可能です。詳しくはコードをご参照ください。

以上になります。

参照：Google Maps JavaScript API v3 – コントロール

]]> http://zxcvbnmnbvcxz.com/google-map-control/feed/ 1 簡単！youTubeの動画を全画面背景に配置し自動再生やループ再生を実現する jQuery Plugin【YTPlayer】の実装方法 http://zxcvbnmnbvcxz.com/jquery-ytplayer/ http://zxcvbnmnbvcxz.com/jquery-ytplayer/#comments Wed, 17 Apr 2013 05:01:16 +0000 Kenta Toshikura http://zxcvbnmnbvcxz.com/?p=8731 どうもこんにちは。Toshikuraです。今回のTipsは【簡単！youTubeの動画を全画面背景に配置し自動再生やループ再生を実現するjQuery Plugin【YTPlayer】の実装方法】です。このところ動画を扱うことが続いたのでメモしておきます。動画を背景にフルスクリーンに指定するプラグインは数々こざいますが、色々試した結果【YTPlayer】という素晴らしいプラグインに落ち着きました。本プラグインはループや自動再生が容易で且つループのつなぎが自然、さらには特定要素にFIXする事も可能で再生・停止ボタンや再生バー関連のカスタマイズも容易とかなり有用です。もし機会があればお試しください。

実装方法 > DOWNLOAD

シンプルに実装する場合の例です。この他にも再生/停止の非表示やループを停止に関する設定が行えます。

HTML

<a id="bgndVideo" class="player" data-property="{videoURL:'ここにYOUTUBEのリンク',containment:'body',autoPlay:true, mute:false}"></a>

JS

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>
<script type="text/javascript">
$(function(){
    $(".player").mb_YTPlayer();
});
</script>

設定について

自動再生やループの停止、再生ボタンの表示非表示、読み込み完了後の動作等細かい所まで設定が可能です。個人的に今後も使うだろうと思いましたのでJS内を読んでオプションの役割を書き出してみました（若干自信はないですが…）。この他にも様々な設定値が存在するようです。

<a id="bgndVideo" class="player" 
data-property="{
    videoURL:'ここにYOUTUBEのリンク',
    containment:'body',
    autoPlay:true,
    mute:false,
    startAt:0,
    opacity:1,
    loop:true,
    showControls:true,
    printUrl:true,
    onReady:function(){console.log('START')}
}"
></a>
オプション 設定値 概要
videoURL http://www.youtube.com/watch?v=xteoc9zrC2w YOUTUBEのリンク
autoPlay true / false 自動再生の有無
mute true / false 音声の有無
startAt 0 ~ 1 最初の透明度
opacity 0 ~ 1 ロード後の透明度
loop true / false ループ再生の有無
showControls true / false 再生・停止ボタンの表示非表示
printUrl true / false 動画ページへのリンク
onReady onReady:function(){console.log(‘START’)} 動画再生準備が完了した段階で何らかの操作を実装

再生ボタンや再生バーの設定について

再生ボタンや停止ボタン、再生バーの表示はプラグイン設定時に下記のHTMLが自動的に挿入されますのでカスタマイズを施す場合には下記に対してCSSの記述を行います。再生バーに関してはclass=”mb_YTVPLoaded”がローディング状況を示しclass=”mb_YTVTime”が現在の再生時間を示しいるようです。この再生バーは本家youtubeのようにクリックで再生位置の指定が行えます。

<span id="controlBar_bgndVideo" class="mb_YTVPBar">
	<div class="buttonBar">
		<span class="mb_YTVPPlaypause">PAUSE </span>
		<span class="mb_YTVPMuteUnmute">MUTE </span>
		<span class="mb_YTVPTime">01 : 01 / 02 : 29</span>
		<span class="mb_YTVPUrl"></span>
		<span class="mb_OnlyYT"></span>
	</div>
	<div class="mb_YTVPProgress" style="position: absolute;">
		<div class="mb_YTVPLoaded" style="position: absolute; left: 0px; width: 10%;"></div>
		<div class="mb_YTVTime" style="position: absolute; left: 0px; width: 5%;"></div>
	</div>
</span>


以上になります。

]]> http://zxcvbnmnbvcxz.com/jquery-ytplayer/feed/ 0 jQuery 画像を事前読み込みさせておく方法 – 画像のプリロードの実装方法 http://zxcvbnmnbvcxz.com/jquery-img-preload/ http://zxcvbnmnbvcxz.com/jquery-img-preload/#comments Thu, 11 Apr 2013 12:58:59 +0000 Kenta Toshikura http://zxcvbnmnbvcxz.com/?p=8620 どうもこんばんは。Toshikuraです。今回のTipsは【jQuery 画像を事前読み込みさせておく方法 – 画像のプリロードの実装方法】です。画像の事前読み込みはロードの合計時間を算出したり、マウスホバーでの画像のちらつきを防いだりと色々な場面で活用できるTipsですので覚えておいてもいいかもしれませんね。ちなみにCSSのみでも実装可能です。その場合同一要素内に複数の背景画像を設置したり、imgとして読ませてわざわざどこかに飛ばしたりといういくつかの方法があります。

jQuery 画像を事前読み込みさせておく方法

事前にjQueryを読ませる事をお忘れなく。

jQuery.preloadImages = function(){
    for(var i = 0; i<arguments.length; i++){
        jQuery("<img>").attr("src", arguments[i]);
    }
};
$.preloadImages(
	"1.gif",
	"2.gif",
	...
	"9.gif",
	"10.gif"
);

以上になります。

参照：to-R

]]> http://zxcvbnmnbvcxz.com/jquery-img-preload/feed/ 0 【12選】GoogleMap グレースケールやカラフルなマップ等、12種類のデザインコード例 http://zxcvbnmnbvcxz.com/11-googlemap-designs/ http://zxcvbnmnbvcxz.com/11-googlemap-designs/#comments Wed, 10 Apr 2013 04:27:53 +0000 Kenta Toshikura http://zxcvbnmnbvcxz.com/?p=8364 どうもこんにちは。Toshikuraです。今回のTipsは【Google Map グレースケールやカラフルなマップ等、12種類のデザインコード例】です。以前、Google Mapのカスタマイズ方法を記事にした事が有りましたが、今回11種類のデザイン&コード例を作成してみましたのでご興味がございましたら遊んでみてください。2013.5.15に一種類追加しました。

Google Mapをカスタマイズする方法

GoogleMapをカスタマイズするには【MapTypeStyler】を使う事になります。詳しくは以前の記事をご参照下さい。

オリジナルマーカー（画像）を使用する方法

以下のコード例では、マーカーアイコンをオリジナル画像に変更する事が可能です。他にもマップの拡大縮小等のナビの表示・非表示等の指定できますので色々触ってみてください。

<body onload="initialize();">
	<div id="map_canvas"></div>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	var map;
	var cent = new google.maps.LatLng(35.666571,139.758024); // 中心の座標
	var MY_MAPTYPE_ID = 'cool';
	function initialize() {

		//***** デザインのカスタマイズ部分 *****//

		var stylez = [
			{
				"stylers": [
					{ "visibility": "on" },
					{ "invert_lightness": true },
					{ "hue": "#00b2ff" },
					{ "gamma": 0.65 }
				]
			}
		];

		//***** デザインのカスタマイズ部分 *****//

		var mapOptions = {
			zoom: 10,                  // マップの拡大値
			navigationControl: false,  // マップの拡大縮小等のナビの表示・非表示を行います。
			mapTypeControl: false,     // 右上マップタイプ名を表示し、通常マップとの切替を可能にします。
			scaleControl: false,       // 左下にスケールを表示します。
			center: cent,
			mapTypeControlOptions: {
			mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
			},
			mapTypeId: MY_MAPTYPE_ID
		};
		map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
		var styledMapOptions = {name: "sample"};
		var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
		var markerOpts = {
			position: new google.maps.LatLng(35.666571,139.758024), // マーカの座標
			map: map,
			//title: "MAP",			// マップの名称
			icon:"img/iconmap.png"	// マーカーアイコンを画像に変更
		};
		var marker = new google.maps.Marker(markerOpts);
		var infowin = new google.maps.InfoWindow({content:"text"});
		google.maps.event.addListener(marker, 'click', function(){infowin.open(map, marker);});
	}
	</script>
</body>

オリジナルマーカー（画像）を使用する方法

以下はMapTypeStylerを使用して作成したデザイン&コード例です。上記コードのデザインのカスタマイズ部分に記述してください。
　

ビビットブルー DEMO

var stylez = [
	{
		"stylers": [
			{ "visibility": "on" },
			{ "invert_lightness": true },
			{ "hue": "#00b2ff" },
			{ "gamma": 0.65 }
		]
	}
];

　

ダークブルー DEMO

var stylez = [
	{
		"stylers": [
			{ "visibility": "simplified" },
			{ "invert_lightness": true },
			{ "hue": "#00e5ff" }
		]
		},{
		"featureType": "water",
		"stylers": [
			{ "color": "#003d4d" }
		]
	}
];

　

ワインレッド DEMO

var stylez = [
	{
		"stylers": [
			{ "visibility": "simplified" },
			{ "hue": "#ff0033" },
			{ "saturation": -47 },
			{ "gamma": 0.57 }
		]
	}
];

　

グリーン DEMO

var stylez = [
	{
		"stylers": [
			{ "invert_lightness": true },
			{ "hue": "#c3ff00" },
			{ "saturation": -29 }
		]
	}
];

　

エメラルドグリーン DEMO

var stylez = [
	{
		"stylers": [
			{ "invert_lightness": true },
			{ "saturation": 100 },
			{ "lightness": 1 },
			{ "gamma": 1.26 },
			{ "hue": "#00ffcc" }
		]
	}
];

　

イエロー DEMO

var stylez = [
	{
		"stylers": [
			{ "visibility": "simplified" },
			{ "saturation": 1 },
			{ "invert_lightness": true },
			{ "hue": "#ffdd00" }
		]
	}
];

　

ポイズン DEMO

var stylez = [
	{
		"stylers": [
			{ "visibility": "simplified" },
			{ "invert_lightness": true },
			{ "hue": "#eeff00" }
		]
		},{
		"featureType": "water",
		"stylers": [
			{ "color": "#519726" }
		]
	}
];

　

グレースケール_v1 DEMO

var stylez = [
	{
		"stylers": [
			{ "invert_lightness": true },
			{ "saturation": -100 },
			{ "lightness": -27 },
			{ "gamma": 1.11 },
			{ "visibility": "simplified" }
		]
		},{
		"featureType": "road",
		"stylers": [
			{ "color": "#000000" }
		]
	}
];

　

グレースケール_v2 DEMO

var stylez = [
	{
		"stylers": [
			{ "saturation": -100 },
			{ "gamma": 1.11 },
			{ "visibility": "simplified" },
			{ "invert_lightness": true }
		]
		},{
		"featureType": "landscape",
		"stylers": [
			{ "color": "#000000" }
		]
		},{
		"featureType": "road",
		"stylers": [
			{ "color": "#000000" },
			{ "lightness": -100 }
		]
	}
];

　

グレースケール_v3 DEMO

var stylez = [
	{
		"stylers": [
			{ "saturation": -100 },
			{ "gamma": 1.11 },
			{ "visibility": "simplified" },
			{ "invert_lightness": true }
		]
		},{
		"featureType": "water",
		"stylers": [
			{ "color": "#ffffff" }
		]
		},{
		"featureType": "road",
		"stylers": [
			{ "visibility": "on" },
			{ "color": "#000000" }
		]
	}
];

　

パープル DEMO

var stylez = [
	{
		"featureType": "administrative",
		"stylers": [
			{ "visibility": "off" }
		]
		},{
		"featureType": "landscape",
		"stylers": [
			{ "visibility": "off" }
		]
		},{
		"featureType": "poi",
		"stylers": [
			{ "visibility": "off" }
		]
		},{
		"featureType": "road",
		"stylers": [
			{ "visibility": "off" }
		]
		},{
		"featureType": "transit",
		"stylers": [
			{ "visibility": "off" }
		]
		},{
		"featureType": "water",
		"elementType": "labels",
		"stylers": [
			{ "visibility": "off" }
		]
		},{
		"featureType": "landscape",
		"stylers": [
			{ "visibility": "simplified" },
			{ "color": "#330020" }
		]
		},{
		"featureType": "water",
		"stylers": [
			{ "color": "#fff4ef" }
		]
	}
];

　

グレースケール DEMO

var stylez = [
	{
		"featureType": "all",
		"stylers": [
			{ "saturation": -100 }
		]
	}
];

以上になります。

]]> http://zxcvbnmnbvcxz.com/11-googlemap-designs/feed/ 0 jQuery iframeの読み込み完了後のタイミングで処理を実行する方法 http://zxcvbnmnbvcxz.com/jquery-iframe-loaded/ http://zxcvbnmnbvcxz.com/jquery-iframe-loaded/#comments Thu, 04 Apr 2013 16:01:06 +0000 Kenta Toshikura http://zxcvbnmnbvcxz.com/?p=8622 どうもこんばんは。Toshikuraです。今回のTipsは【jQuery iframeの読み込み完了後のタイミングで処理を実行する方法】です。局所的な記事が続いていますが地味に使えるTipsなのでメモしておきます。デモの方を見ていただければざっくりとした使い方が掴めるかと思います。もしよろしければ合わせてご確認ください。

iframeの読み込み完了後のタイミング

読み込みのタイミングで何らかの動作をさせる場合は以下のような記述で実装可能です。
　
HTML

<iframe id="tgt" src="http:****.com"></iframe>

JS

<script type="text/javascript">
$(function(){
	$('#tgt').load(function(){
		console.log('読み込み完了');
	});
});
</script>

クリック等のタイミングで読み込み

次の例はクリック等のタイミングでiframeの読み込みを開始させ、且つiframeの読み込みの完了を取得します。
　
JS

<script type="text/javascript">
$(function(){
	var url = 'http:****.com';//読み込み先のURL
	$('#loadbtn').click(function(){
		$('#tgt').attr({'src':url});
		$('#tgt').load(function(){
			console.log('読み込み完了');
		});
	});
});
</script>

クリック等のタイミングで読み込み（デモ）

今回のデモではこれに加え、ローディングイメージ及びiframe自身の表示・非表示を行っています。
　
CSS

#tgt{display: none;}
#loading{display: none;}

HTML

<img src="images/loading.gif" id="loading">
<iframe id="tgt" src=""></iframe>

JS

<script type="text/javascript">
$(function(){
	var url = 'http:****.com';//読み込み先のURL
	$('#loadbtn').click(function(){
		$('#loading').fadeIn(300);
		$('#tgt').attr({'src':url});
		$('#tgt').load(function(){
			$(this).fadeIn(1000);
			$('#loading').fadeOut(300);
		});
	});
});
</script>

　
以上になります。

]]> http://zxcvbnmnbvcxz.com/jquery-iframe-loaded/feed/ 0 WordPress カスタムフィールドが空だった場合の分岐や複数あった場合の出力、分岐方法 http://zxcvbnmnbvcxz.com/wp-custum-fields/ http://zxcvbnmnbvcxz.com/wp-custum-fields/#comments Wed, 03 Apr 2013 11:31:39 +0000 Kenta Toshikura http://zxcvbnmnbvcxz.com/?p=8573 どうもこんばんは。Toshikuraです。この時期は忙しく久々の更新になってしまいました。今回のTipsは【Wordpress カスタムフィールドが空だった場合の分岐や複数あった場合の出力や分岐方法】です。あまり使う事もないTipsですが…一応備忘録の為に書いておきます。

カスタムフィールドが空だった場合の表示

この記述ではカスタムフィールドが空だった場合に表示されます。

<?php $ctm = get_post_meta($post->ID, 'カスタムフィールド名', true);?>
<?php if(empty($ctm)):?>
    空欄だった場合に表示されます。
<?php endif;?>

また以下の記述ではカスタムフィールドが空欄だった場合と記述がある場合での表示切替を行います。

<?php $ctm = get_post_meta($post->ID, 'カスタムフィールド名', true);?>
<?php if(empty($ctm)):?>
    空欄だった場合に表示されます。
<?php else:?>
    記述が有る場合に表示されます。
    <?php echo post_custom('カスタムフィールド名');?>
<?php endif;?>

ひとつのカスタムフィールドに複数の記述がある場合


　
以下の記述はカスタムフィールドテンプレートの項目追加を利用した場合に活躍します。例では「画像」というカスタムフィールドに複数の記述がされている場合での表示切替を行っております。
　

<?php $ctm = get_post_meta($post->ID, '画像', true);?>
<?php if(empty($ctm)):?>
    空欄だった場合に表示されます。
<?php else:?>
    <?php $thumbs = post_custom('画像'); ?>
    <?php if(count($thumbs) == 1 ):?>
        ひとつ記述が有る場合に表示されます。
        <?php echo post_custom('画像');?>
    <?php elseif(count($thumbs) >= 2 ):?>
        複数の記述が有る場合に表示されます。
        <?php foreach ($thumbs as $key => $value) { echo $value; } ?>
    <?php endif;?>
<?php endif;?>

以上です。

]]> http://zxcvbnmnbvcxz.com/wp-custum-fields/feed/ 1 PHP Javascript それぞれでクエリストリングの有無を判別する方法 http://zxcvbnmnbvcxz.com/php-query_string/ http://zxcvbnmnbvcxz.com/php-query_string/#comments Thu, 21 Mar 2013 15:28:13 +0000 Kenta Toshikura http://zxcvbnmnbvcxz.com/?p=8488 どうもこんばんは。Toshikuraです。今回のTipsは【PHP クエリストリングの有無を判別する方法】です。これまた大分局所的な内容ですが一応備忘録として。

PHP
<?php
if(!empty($_SERVER['QUERY_STRING'])){
	echo 'あるよ';
}else{
	echo 'ないよ';
}
?>
Javascript
<script type="text/javascript">
var url = document.location.href;
var url_split = url.split("/");
var files = url_split[url_split.length - 1];
if(!files.indexOf("?",0)){
	document.write("あるよ");
}else{
	document.write("ないよ");
}
</script>

以上になります。

]]> http://zxcvbnmnbvcxz.com/php-query_string/feed/ 0 【10選】モノトーンを基調にしたおしゃれWEBサイト – 10 Wonderful monotone Webdesign http://zxcvbnmnbvcxz.com/10-wonderful-monotone-webdesign/ http://zxcvbnmnbvcxz.com/10-wonderful-monotone-webdesign/#comments Fri, 15 Mar 2013 05:39:11 +0000 Mikiko Kikuoka http://zxcvbnmnbvcxz.com/?p=8432 こんにちは、Kikuokaの久しぶりの更新です。今回のtipsは【モノトーンを基調にしたおしゃれWEBサイト – 10 Wonderful monotone Webdesign】に関してです。白黒をメインカラーとして使用することで、ポイントにしたい色や目立たせたい要素を際立たせることが効果的にできているデザインや、タイポグラフィーをうまく活用しているデザイン、またシンプルで見やすくきれいに構成されたデザインなど、優れたデザインのサイトを集めてみました。

Pipol


The Twelvestudio créatifThe Twelve2013


Doctor JekyllControversial Ideas


numéro10The Agency for Synchronised CommunicationSyncBig numéro 10numero10


Andreas Kleiberg


Kenji Saito


The Windmill Club


kobito inc.


Les Chanterellesフランス料理シャントレル


Eduardo Nunes – Cross Media Designer

以上になります。

色使いがシンプルな分、複雑な動きでとてもインパクトのあるサイトが多かったように思います。写真をメインにしているサイトにも相性が良さそうですね。参考にしてみてはいかがでしょうか。

]]> http://zxcvbnmnbvcxz.com/10-wonderful-monotone-webdesign/feed/ 0 jQuery 特定要素がアニメーション中か判別する方法 http://zxcvbnmnbvcxz.com/jquery-animate-handle/ http://zxcvbnmnbvcxz.com/jquery-animate-handle/#comments Fri, 08 Mar 2013 11:17:35 +0000 Kenta Toshikura http://zxcvbnmnbvcxz.com/?p=8333 どうもこんばんは。Toshikuraです。今回のTiosは【jQuery 特定要素がアニメーション中か判別する方法】です。随分局所的なTipsですが…先日作成した謎スライダーでも活躍していたのでメモしておきます。

実装方法

読み込み

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

if($('#tgt').is(':animated')){
	$('#flg').text('Animate');
}else{
	$('#flg').text('...');
}

どのタイミングで判別させるかによって動作のタイミングが変わってきますのでお気をつけ下さい。

一定時間ごとに判別

setInterval(function(){
	if($('#tgt').is(':animated')){
		$('#flg').text('Animate');
	}else{
		$('#flg').text('...');
	}
},100);

クリックで判別

$(function(){
	$("#...").click(function(){
		if($('#tgt').is(':animated')){
			$('#flg').text('Animate');
		}else{
			$('#flg').text('...');
		}
	});
});

今回出てきました【is】はjqueryの中でもなかなか役に立つやつなので覚えておいてもいいかもしれせんね。これに関しては少し前に記事化していますので、もしよろしければ合わせてご参照ください。参照：jQuery isの利用方法 – 条件式を満たす場合に要素を操作

以上になります。

]]> http://zxcvbnmnbvcxz.com/jquery-animate-handle/feed/ 0 jQuery スライダーの中にスライダーが設置できるプラグイン【 jQuery slideinslide 】 http://zxcvbnmnbvcxz.com/jquery-slideinslide/ http://zxcvbnmnbvcxz.com/jquery-slideinslide/#comments Wed, 06 Mar 2013 12:30:29 +0000 Kenta Toshikura http://zxcvbnmnbvcxz.com/?p=8301 どうもこんばんは。今回のTipsは【jQuery スライダーの中にスライダーが設置できるプラグイン jQuery slideinslide】です。今回のプラグインは自作です。機会は少ないですが何度かスライダーの中にスライダーを設置したいという場面がありました。これまでは都度スクリプトを書いていたのですが…ちょっと面倒だなぁとプラグイン化しました。この謎なプラグイン…自分用にとっておいてもいいのですが、存在自体忘れる可能性もあるので…備忘録としてメモしておきます。

DEMO & DOWNLOAD

更新情報
・2013 3/8 水平方向へのスライド機能を追加。詳しくはOptionをご確認ください。上下左右のキーボートにも対応しております。DEMOはこちらから

実装方法

実装は至ってシンプルです。スライドの中にスライドの入るHTMLを用意し、プラグインを読み込みます。

読み込みファイル（jQueryは1.7以降から動作確認済み）

<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.slideinslide.js"></script>

<link rel="stylesheet" href="css/decoration.css"/>

HTML

<div id="slideBd">
	<div><div class="slide">slide1-1</div>slide1-2</div>slide1-3</div></div>
	<div><div class="slide">slide2-1</div>slide2-2</div>
	<div><div class="slide">slide3-1</div>
</div>

JS

$(function(){
	$('#slideBd').slideinslide();
});

実装に関しては以上です。decoration.cssには【次/前】のデザイン等が含まれています。必要なければ外していただいて構いませんが記述推奨です。

ブラウザ

IE7,IE8,IE9,Chrome,Firefox,Safari,Opera

オプション

2013年3月6日時点で用意したオプションは以下になります。通常のスライダープラグインとあまり変わりません。

オプション 設定 概要
auto true / false 自動再生のON/OFFを指定します。
intval 1000 自動再生時のスライドのタイミングを指定します。
speed 1000 スライドのスピードを指定します。
ease ‘easeInOutExpo’ アニメーションのイージングを指定します。
captions true / false キャプションの有無を指定します。
key true / false キーボードによるスライドの可不可を指定します。
prev ‘prev’ スライダー内スライドの【前へ】を編集できます（HTML可）
next ‘next’ スライダー内スライドの【次へ】を編集できます（HTML可）
slideprev ‘slideprev’ スライダーの【次へ】を編集できます（HTML可）
slidenext ‘slidenext’ スライダーの【前へ】を編集できます（HTML可）
slidestop ‘slidestop’ 自動再生停止のテキストを変更する場合に使用（HTML可）
vertical true / false スライダー内のスライドアニメーションを水平方向に変更できます。

オプション設定例

$(function(){
	$('#slideBd').slideinslide({
		intval   : 3000,
		speed    : 1000,
		ease     : 'easeInOutExpo',
		auto     : false,
		captions : true
	});
});

スライダーを大量に見せたい場合や、スライダーのみでサイトを完結させてしまうような場面には使えそうですね。以上になります。

]]> http://zxcvbnmnbvcxz.com/jquery-slideinslide/feed/ 0