Born Neet

アマゾンのスライドショーウィジェットがカッコよかったので使おうと思ったんだけど…
ブログのデザインを変更せずに導入できそうなサイズがなかったので（超）劣化版を作ってみた。

昨日から（パーマリンク以外のページの）サイドバー最上部に貼ってるやつです。

参考にしたのは、Accessible News Slider: A jQuery Plugin via アクセッシブルなスライダーjavascript「Accessible News Slider」（viaって1回言ってみたかった…）

初めはAccessible News Sliderをカスタマイズしようとしてたんだけど、オリジナルの作者が苦労したであろうアクセシブルな部分を削除していくうちに、申し訳ない気持ちで一杯になってきたのでイチから（jQueryには依存）作った。

ソースはクソ長くなっちゃったので続きにいれました。

[使い方]

なんて大袈裟なもんじゃないですが。

<div class="adSlide">
	<ul class="adBody">
		<li>1枚目の内容</li>
		<li style="display: none">2枚目の内容</li>
		<li style="display: none">3枚目の内容</li>
			：
			：
		<li style="display: none">n枚目の内容</li>
	</ul>
</div>

っていうHTMLをスライド表示します。
スライド上にマウスを移動させるとページ送りや全表示させるボタンが出てきます。

ちなみに、2枚目以降のdisplay: noneは任意です。
（ページ読み込み中やJavaScript無効時に全部のスライドが表示されるのを防ぐために指定してます。cssが無効だと…すいません、お手上げです。）
あと.adSlideの背景もあらかじめ設定しておくいいかもしれません。（僕の使ってる画像は続きに）

こんな感じです。
外部cssがいらないところが売りです（たぶん）。

あ！忘れてた。広告リンクの作成はG-Toolsさんを使わせてもらいました。これちょー便利！

[ソース]

けっこう長いですが、やろうと思えばかなり短くできると思います。
（っていうか半分ぐらいはcssをjs化しただけ）
僕は可読性重視（？）ということでこのまま使ってます。

$(function() {

	// adSlide
	var color = 'white';
	var bgColor = 'silver';
	var width = 200;
	var height = 200;
	var padding = 15;
	var footer = 20;
	
	var v = '\u25BD';
	var vTitle = 'View All';
	var x = '\u25B3';
	var xTitle = 'Slide Mode';

	var bgImage = 'url(http://file.blog.bornneet.com/back.png)';

	$('.adSlide').each(function() {
	
		// append
		$(this).append('<p class="adFooter"><a href="javascript:void(0)">\uFF1C</a><a href="javascript:void(0)" title="' + vTitle + '">' + v + '</a><a href="javascript:void(0)">\uFF1E</a></p>');

		// css
		$('*', this).css({ 
			margin: 0, 
			padding: 0
		});

		$(this).css({ 
			position: 'relative', 
			width: width + 'px', 
			overflow: 'hidden', 
			backgroundColor: bgColor, 
			backgroundImage: bgImage, 
			backgroundRepeat: 'repeat-x'
		});

		var length = $('.adBody > li', this).length;
		$('.adBody', this).css({ 
			position: 'relative', 
			width: width * length, 
			left: 0
		});

		$('.adBody > li', this).css({ 
			float: 'left', 
			width: width + 'px', 
			listStyle: 'none', 
			textAlign: 'center', 
			height: height - padding - footer + 'px', 
			paddingTop: padding + 'px', 
			display: 'block'
		}).find('img').css({ border: 'none' });
		
		$('.adFooter' , this).css({ 
			position: 'relative', 
			clear: 'left', 
			width: '100%', 
			textAlign: 'center', 
			fontSize: '14px'
		}).find('*').css('visibility', 'hidden');

		$('.adFooter > a:eq(0)' , this).css({ position: 'absolute', left: 0, display: 'none' });
		$('.adFooter > a:eq(2)' , this).css({ position: 'absolute', right: 0 });
		$('.adFooter a' , this).css({ textDecoration: 'none', color: color });
		
		// event
		$(this).mouseover(function() {
			$('.adFooter', this).find('*').css('visibility', 'visible');
		});
		$(this).mouseout(function() {
			$('.adFooter', this).find('*').css('visibility', 'hidden');
		});

		var body = $('.adBody', this);
		var prev = $('.adFooter > a:eq(0)' , this);
		var next = $('.adFooter > a:eq(2)' , this);
		var max = -width * (length - 1);
		var min = 0;
		$('.adFooter > a:eq(0)' , this).click(function(e) {
			var left = parseInt(body.css('left')) + width;
			var newLeft = (left <= min) ? left : min;
			if(newLeft == min) {
				$(this).css('display', 'none');
			}
			next.css('display', 'inline');
			body.animate({ 'left': newLeft });
		});

		$('.adFooter > a:eq(2)' , this).click(function(e) {
			var left = parseInt(body.css('left')) - width;
			var newLeft = (left >= max) ? left : max;
			if(newLeft == max) {
				$(this).css('display', 'none');
			}
			prev.css('display', 'inline');
			body.animate({ 'left': newLeft });
		});

		var li = $('.adBody > li', this);
		var self = $(this);
		$('.adFooter > a:eq(1)' , this).toggle(function(e) {
			$(this).html(x).attr('title', xTitle);
			li.css({ float: 'none' });
			body.css({ 'left': min });
			prev.css('display', 'none');
			next.css('display', 'none');
			self.css('backgroundImage', 'none');
		}, function() {
			$(this).html(v).attr('title', vTitle);
			li.css({ float: 'left' });
			next.css('display', 'inline');
			self.css('backgroundImage', bgImage);
		});
	});
	
});

なんかOperaで文字化けしたので全角文字をUnicodeエスケープシーケンスで書きました。
今まで運営日数とかもずっと文字化けしてたんんですね…すいませんm(_ _)m

背景画像は下のをrepeat-xしてます。



以上です。

[参考]

Core JavaScript 1.5 Guide:Unicode - MDC
Unicode の文字列をエスケープする JavaScript - bkブログ