忍者ブログ

Home > > Amazonアソシエイトの広告とか画像をスライド表示させる変なの作った

[PR]

  • 2017-10-18

Share on Tumblr このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference
[PR] from Born Neet
Trackback from Born Neet 2008-02-19 (火) 18:28

スライド表示スクリプトをちょっと改良

最初に表示される画像をランダムで選ぶようにした。 以下のようなソースを関数内の最後に追加すればOK。 var rand = Math.floor(Math.random() * length) * width; body.css({ ''left'': -rand }); これでいつ見ても同じ画像が表示されるということがなくなります。 ※ ページ読み込み終了までは1枚目が表示されちゃうのが微妙だなぁ。   cssで1枚目も消すとjs無効時に何も表示されなくなるし…。... (more…)

Trackback from Born Neet 2008-09-07 (日) 09:58

Amazonの画像URLが変更されてた

結構前から、サイドバーに貼ってるアソシエイトの画像が、 表示されたりされなかったりするなーと気になってはいたんですが…。 やはりAmazonの画像URLが変わっていたようです。 デジモノに埋もれる日々: コミックダッシュ!でAmazon画像の変更に合わせたデザイン変更を進めています。 ということで早速(?)URLを変更。 今まで貼ってたURLは下のようなもの。 http://ecx.images-amazon.com/images/I/21gL6elGqTL.... (more…)

Home > > Amazonアソシエイトの広告とか画像をスライド表示させる変なの作った

Home > JavaScript > Amazonアソシエイトの広告とか画像をスライド表示させる変なの作った

Amazonアソシエイトの広告とか画像をスライド表示させる変なの作った

Share on Tumblr このエントリーをはてなブックマークに追加

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

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

参考にしたのは、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ブログ

PR

Comments:0

Comment Form

Trackback+Pingback:2

TrackBack URL for this entry
Listed below are links to weblogs that reference
Amazonアソシエイトの広告とか画像をスライド表示させる変なの作った from Born Neet
Trackback from Born Neet 2008-02-19 (火) 18:28

スライド表示スクリプトをちょっと改良

最初に表示される画像をランダムで選ぶようにした。 以下のようなソースを関数内の最後に追加すればOK。 var rand = Math.floor(Math.random() * length) * width; body.css({ ''left'': -rand }); これでいつ見ても同じ画像が表示されるということがなくなります。 ※ ページ読み込み終了までは1枚目が表示されちゃうのが微妙だなぁ。   cssで1枚目も消すとjs無効時に何も表示されなくなるし…。... (more…)

Trackback from Born Neet 2008-09-07 (日) 09:58

Amazonの画像URLが変更されてた

結構前から、サイドバーに貼ってるアソシエイトの画像が、 表示されたりされなかったりするなーと気になってはいたんですが…。 やはりAmazonの画像URLが変わっていたようです。 デジモノに埋もれる日々: コミックダッシュ!でAmazon画像の変更に合わせたデザイン変更を進めています。 ということで早速(?)URLを変更。 今まで貼ってたURLは下のようなもの。 http://ecx.images-amazon.com/images/I/21gL6elGqTL.... (more…)

Home > JavaScript > Amazonアソシエイトの広告とか画像をスライド表示させる変なの作った

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top