e-まが http://e-maga.com ウェブデザイン実装チュートリアル Mon, 18 Jan 2010 05:57:18 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 四方に分割スライドする画像エフェクトSliding Door http://e-maga.com/javascript/sliding-door/ http://e-maga.com/javascript/sliding-door/#comments Tue, 15 Sep 2009 04:00:40 +0000 Daisuke http://e-maga.com/?p=733 マウスオーバーすると、４つに分割された画像が四隅に向かってスライドしていくという画像エフェクトスクリプト。

jQueryとプラグインeasingを使用しています。

四方にスライドする画像エフェクト
Create a Stunning Sliding Door Effect
with jQuery

下でダウンロードする実装サンプルを見てもらえばわかると思いますが、画像は小さめのものの方が相性がいいようです。画像サイズに合わせてエフェクト速度を調整する必要があります。

好みの見た目になるまでエフェクト速度を試行錯誤してみてください。

ダウンロード

以下のサイトでjQueryとeasing、それと実装見本をダウンロードできます。
Create a Stunning Sliding Door Effect – Queness
同梱されているjQueryは1.3.1.minですが、もちろん1.3.2.minでも使用可能です。

中に入っているjsフォルダをサーバーにアップロードしてください。

実装手順

<head>～</head>に以下を挿入。
画像URLやサイズ、エフェクト速度を変更して使用して下さい。

※1 正方形でも長方形でも対応できるように少々手を加えてあります。
※2 WordPressとの相性を整えるためにCSS及びXHTMLを修正しました。一般的な使用法でしたら、ダウンロードしたサンプルに倣った方が良いと思います。

<script type="text/javascript" src="http://サイトURL/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://サイトURL/js/jquery.easing.1.3.js"></script>

<script type="text/javascript">
$(document).ready(function() {

	//Custom settings
	var style_in = 'easeOutBounce';
	var style_out = 'jswing';
	var speed_in = 1200; //クローズのエフェクト速度
	var speed_out = 300; //オープンのエフェクト速度

	//Calculation for corners
	var neg = Math.round($('.qitem').width() / 2) * (-1);
	var pos = neg * (-1);
	var out = pos * 2;

	var neg2 = Math.round($('.qitem').height() / 2) * (-1);
	var pos2 = neg2 * (-1);
	var out2 = pos2 * 2;

	$('.qitem').each(function () {

	url = $(this).find('a').attr('href');
	img = $(this).find('img').attr('src');
	alt = $(this).find('img').attr('img');

	$('img', this).remove();
	$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
	$(this).children('div').css('background-image','url('+ img + ')');

	$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos2});
	$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos2});
	$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos2});
	$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos2});

	}).hover(function () {

	$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
	$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
	$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
	$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});

	},

	function () {

	$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
	$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in})
	$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
	$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});

	}).click (function () {
	window.location = $(this).find('a').attr('href');
	});

});
</script>

<style type="text/css">
.qitem {
	width: 560px; /* 画像幅指定 */
	height: 350px; /* 画像高さ指定 */
	margin: 5px 0;
	 /* オープン時の背景画像を指定 */
	background: url('http://背景画像URL') no-repeat;

	/* required to hide the image after resized */
	overflow: hidden;

	/* for child absolute position */
	position: relative;

	/* display div in line */
	float: left;
	cursor: hand;
	cursor: pointer;
}
.qitem img {
	border: 0;
	/* allow javascript moves the img position*/
	position: absolute;
	z-index: 200;
}
.qitem p.caption {
	position: absolute;
	z-index: 0;
	display: block;
	font-size: 14px;
	color: #555555;
	padding: 5px 0;
	margin: 0;
	width: 560px; /* 画像幅と同じ */
	text-align: center;
}

/* Setting for corners */
.topLeft, .topRight, .bottomLeft, .bottomRight {
	position: absolute;
	background-repeat: no-repeat;
	float: left;
}
.topLeft {
	background-position: top left;
}
.topRight {
	background-position: top right;
}
.bottomLeft {
	background-position: bottom left;
}
.bottomRight {
	background-position: bottom right;
}
.clear {
	clear: both;
}
</style>

使用場所に以下を記述。

<div class="qitem">
	<a href="リンクURL"><img src="http://クローズ時の表示画像URL" alt="" title="" /></a>
	<p class="caption">
	オープン時に表示するコメント
	</span>
</div>

以上です。
それでは。がんばってください。

via（AjaxRain.com）

]]> http://e-maga.com/javascript/sliding-door/feed/ 0 マウスオーバーでメニューが回転するAnimated Navigation http://e-maga.com/javascript/animated-navigation/ http://e-maga.com/javascript/animated-navigation/#comments Sun, 13 Sep 2009 05:48:11 +0000 Daisuke http://e-maga.com/?p=666 マウスオーバーで下からニョキニョキと回転してくるメニュースクリプト。
かなり目を引くメニューに仕上がると思います。

使用するAjaxライブラリはjQuery。

ダウンロード

使用するのはjquery-1.3.2.min.jsのみ。
ダウンロードしてサーバーにアップしておいてください。
jQueryダウンロード

実装手順

<head>～</head>に以下を挿入。
ご自身のサイトURLに変更（2か所）することをお忘れなく。

使用した背景画像
（a-bg.gif）
100px × 80px

<script type="text/javascript" src="http://サイトURL/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$("#topnav li").prepend("<span></span>");
	$("#topnav li").each(function() {
		var linkText = $(this).find("a").html();
		$(this).find("span").show().html(linkText);
	});
	$("#topnav li").hover(function() {
		$(this).find("span").stop().animate({
			marginTop: "-40"
		}, 250);
	} , function() {
		$(this).find("span").stop().animate({
			marginTop: "0"
		}, 250);
	});
});
</script>

<style type="text/css">
ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	display: block;
	overflow: hidden;
	float: left;
	height:40px;
}
ul#topnav a, ul#topnav span {
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(http://サイトURL/a_bg.gif) repeat-x; /* 背景画像を指定 */
	text-transform: uppercase;
	clear: both;
	height: 20px;
	line-height: 20px;
}
ul#topnav a{
	color: #555;
	background-position: left bottom;
}
ul#topnav span{
	background-position: left top;
}
</style>

使用場所に以下を記述。

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

割と簡単に実装出来ると思います。
では、がんばってください。

Script（Animated Navigation with CSS & jQuery – Torrance Web Design）

]]> http://e-maga.com/javascript/animated-navigation/feed/ 0 ゆるやかに色彩を変えていくエフェクトスクリプトBlend http://e-maga.com/javascript/blend/ http://e-maga.com/javascript/blend/#comments Fri, 14 Aug 2009 04:21:54 +0000 Daisuke http://e-maga.com/?p=598 マウスオーバーでファンタジックに画像が切り替わるjQueryプラグイン、Bland。
ゆったりと色彩を変化させる美しいリンクボタンを作成することができますので、高級感漂うウェブサイト作りに最適なスクリプトです。

「text-indent: -9999px;」というCSSによる画像置き換えを使用しており、デフォルトの他にも「点滅」と「逆再生」の２種類のエフェクトが用意されています。
スピードの調節も可能。

エフェクト：デフォルト / スピード：600

ダウンロード

jQuery Blend – Color Powered
Downloadの「v1.2」をクリックしてダウンロード。解凍してください。

Ajaxライブラリjquery-1.3.2.min.jsを別途用意する必要があります。
jQueryダウンロード
ダウンロード後、解凍したblendフォルダに入れてください。

実装手順

上に表示しているサンプルのソースです。
IE6でも問題なく表示されるように、CSS及びHTMLにul liを使用して魔法のプロパティ「display: inline;」を付け加えました。

用意したのは以下の画像。
137px×174pxの画像を4列2段に並べた1枚画像を、マウスオーバー時にbackground-positionで左や上にズラして表示します。

<head>～</head>に以下を挿入。

スピードの調整は赤字部分の数値を変更。
エフェクトは青字部分を「pulse:true」（点滅）もしくは「reverse:true」（逆再生）に書き換えることで変更が可能です。

<script type="text/javascript" src="http://サイトURL/blend/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://サイトURL/blend/jquery.blend.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#list a").blend({
speed: 600, //エフェクト速度
pulse: false //エフェクト選択
});
});
</script>

<style type="text/css">
.blend_menu {
	clear: both;
	margin: 0;
	padding: 0;
}
.blend_menu li {
	float: left;
	display: inline;
	margin-right: 4px;
}
.blend_menu li.end {
	margin-right: 0;
}
.blend_menu li a {
	display: block;
	text-indent: -9999px;
	width: 137px; /* 画像サイズ：縦 */
	height: 174px; /* 画像サイズ：横 */
	margin: 0;
	padding: 0;
	background: url(panel.jpg); /* 画像URL */
	background-repeat: no-repeat;
	cursor: pointer;
	overflow: hidden;
}

#list_spring{background-position:0 0;}
#list_spring:hover,#list_spring.hover{background-position:0 -174px;}

#list_summer{background-position:-137px 0;}
#list_summer:hover,#list_summer.hover{background-position:-137px -174px;}

#list_autumn{background-position:-274px 0;}
#list_autumn:hover,#list_autumn.hover{background-position:-274px -174px;}

#list_winter{background-position:-411px 0;}
#list_winter:hover,#list_winter.hover{background-position:-411px -174px;}
</style>

使用場所に以下を記述。

<div id="list">
<ul class="blend_menu">
	<li><a href="#" id="list_spring">Spring</a></li>
	<li><a href="#" id="list_summer">Summer</a></li>
	<li><a href="#" id="list_autumn">Autumn</a></li>
	<li class="end"><a href="#" id="list_winter">Winter</a></li>
</ul>
</div>

idやclassはお好きな名前に付け直して使用してください。
画像サイズの指定とbackground-positionの修正もお忘れなく。

では、がんばってください。

via（コリス）

]]> http://e-maga.com/javascript/blend/feed/ 0 自動でスクロールするスライドショーEasy Slider http://e-maga.com/javascript/easy-slider/ http://e-maga.com/javascript/easy-slider/#comments Fri, 07 Aug 2009 07:27:06 +0000 Daisuke http://e-maga.com/?p=499 コンテンツを滑らかにスクロールするスライドショーのスクリプトEasy Slider 1.7。
スクロールのスピードや静止時間なども自由に設定することが出来ます。

見栄えのいいスクリプトなのですが、実装が結構めんどくさいのが難点。

ダウンロードしたCSSはそのままでは使用出来ません。
body～preや#content、それと#prevBtn・#nextBtn（左右のボタン）の位置指定を、導入するサイトのデザインに合わせて修正する必要があります。
CSSに不慣れな人にはかなり難しいかも。

※サンプルの左右のボタンはオリジナルですので、同梱されているものとはデザインが違います

　

ダウンロード

現在の最新バージョンは1.7です。
「Download easySlider 1.7」をクリックしてzipファイルをダウンロード、解凍してください。

Easy Slider 1.7
jquery.jsは同梱されています。

実装手順

解凍したeasyslider1.7フォルダに入っている「easyslider1.7」を、サーバーに丸ごとアップロード。
<head>～</head>に以下を記述。
speedとpauseで速度と静止時間を調整します。数値を小さくするほど早くなります。

<link rel="stylesheet" href="http://サイトURL/easyslider1.7/css/screen.css" type="text/css" />
<script type="text/javascript" src="http://サイトURL/easyslider1.7/js/jquery.js"></script>
<script type="text/javascript" src="http://サイトURL/easyslider1.7/js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
speed: 800,
pause: 2000
});
});
</script>

Easy Sliderを表示させる場所に以下のように記入。
id=contentというプロパティは既に使用されている可能性が高いので、別の名称にするか<div style="position: relative;">に書き換えた方がいいかも知れません。

<div id="content">
<div id="slider">
 <ul>
  <li><a href="リンク先URL"><img src="画像URL" /></a></li>
  <li><a href="リンク先URL"><img src="画像URL" /></a></li>
  <li><a href="リンク先URL"><img src="画像URL" /></a></li>
  <li><a href="リンク先URL"><img src="画像URL" /></a></li>
  <li><a href="リンク先URL"><img src="画像URL" /></a></li>
 </ul>
</div>
</div>

では、がんばってください。

]]> http://e-maga.com/javascript/easy-slider/feed/ 0 動画もインラインフレームもポップアップ！Sexy Lightbox 2 http://e-maga.com/javascript/sexy-lightbox-2/ http://e-maga.com/javascript/sexy-lightbox-2/#comments Wed, 05 Aug 2009 03:37:13 +0000 Daisuke http://e-maga.com/?p=397 コンテンツをポップアップするLightboxタイプのスクリプトなのですが、画像も動画もウェブサイトもログインフォームもなんでもかんでもポップアップするうえに、グループナンバーを割り振ることによってそれぞれをグループ化することが可能。

jQueryとMooToolsの両Ajaxライブラリに対応していますので、他のJavaScriptとの相性に合わせて選ぶこともできます。

画像をポップアップ

動画をポップアップ

インラインフレームでウェブサイトをポップアップ

ダウンロード

主にjQuery版についての説明となりますが、MooTools版も実装方法も同様です。

リンク先のDownloadで「sexy-lightbox-2.2.zip」をクリック。
ダウンロード後、解凍。jQuery版とmootools版が同梱されていますので、どちらを使用するか決めたら使用する方のフォルダを「sexy-lightbox」とリネームしてください。

Sexy Lightbox 2 – Coders.me

Ajaxライブラリjquery-1.3.2.min.jsを別途用意する必要があります。
jQueryダウンロード
ダウンロード後、先程リネームしたsexy-lightboxフォルダに入れてください。

MooToolsの場合も同様です。
MooToolsダウンロード
※mootools-1.2.3-core-nc.jsはjsファイルではなくtxtファイルとして認識される場合があります。mootools-1.2.3-core-nc.js.txtになっていると動作しませんのでテキストエディタ等で一旦開き、「名前を付けて保存する」で.txt無しのファイル名にリネームしてください。

必ずやっておくこと

最大のポイントです。sexylightbox.v2.2.jquery.jsの29行目（MooTools版は23行目）に記述されている「imagesdir : ‘sexyimages‘,」の青字部分をフルパスに書き直すこと。
パーツ画像の在処を示すプロパティなので’http://アップロードしたURL/sexyimages‘とURLを追加記入しておかないと背景画像が正しく表示されません。

ちなみに、sexylightbox.v2.2.jquery.jsの27行目（MooTools版は21行目）の’black‘を’white‘に書き換えると背景パーツが「白」になります。お好みに応じて変更してください。

実装手順

サーバーにsexy-lightboxフォルダをアップロード。
<head>～</head>の間に以下を記述。

jQuery使用時

<link rel="stylesheet" href="http://サイトURL/sexy-lightbox/sexylightbox.css" type="text/css" />
<script type="text/javascript" src="http://サイトURL/sexy-lightbox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://サイトURL/sexy-lightbox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://サイトURL/sexy-lightbox/sexylightbox.v2.2.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
SexyLightbox.initialize();
});
</script>

MooTools使用時

<link rel="stylesheet" href="http://サイトURL/sexy-lightbox/sexylightbox.css" type="text/css" />
<script type="text/javascript" src="http://サイトURL/sexy-lightbox/mootools-1.2.3-core-nc.js"></script>
<script type="text/javascript" src="http://サイトURL/sexy-lightbox/sexylightbox.v2.2.mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
SexyLightbox = new SexyLightBox();
});
</script>

使い方

基本的には、リンクに「rel=”sexylightbox”」と付け加えるだけ。
グループ分け（関連づけ）する場合は「rel=”sexylightbox[グループナンバー]“」とすると、同じナンバーのコンテンツを巡回できるようになります。
「title=”タイトル”」を加えると、タイトルを表示することもできます。

<a href="コンテンツURL" rel="sexylightbox[グループナンバー]" title="タイトル">リンク</a>

動画を表示する（inline）

動画をポップアップさせる場合、ページに貼り付けた動画を非表示にしておいてからSexy Lightboxで表示させることになります。

<div id="video" style="display:none;"></div>の中に動画を貼り付けすると非表示になります。id名は適当に付けてOKですが、リンクを設定する際は同じid名にする必要があります。
サイズの指定も忘れずに。

<div id="video" style="display:none;">
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/bNF_P281Uu4&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bNF_P281Uu4&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
</div>
<a href="#TB_inline?height=385&width=480&background=#000&inlineId=video" rel="sexylightbox" title="タイトル">リンク</a>

ウェブサイトをインラインフレームで表示する（iframe）

サイトURLと表示サイズを指定して以下のように記述します。

<a href="http://www.google.co.jp/?TB_iframe=true&height=500&width=900" rel="sexylightbox" title="Google" >Google</a>

以上です。
それでは、がんばってください。

via（Dream CSS）

]]> http://e-maga.com/javascript/sexy-lightbox-2/feed/ 0 思わずブックマークしたくなるスクリプトShareBox http://e-maga.com/javascript/sharebox/ http://e-maga.com/javascript/sharebox/#comments Mon, 03 Aug 2009 05:17:34 +0000 Daisuke http://e-maga.com/?p=360 これは秀逸です。とてもカワイイ。
こんなものが貼ってあった日には思わずブックマークしてしまいたくなりますよね。

AjaxライブラリはjQueryを使用。

  • Bookmark
  • Sumbit to Hatena
  • Sumbit to Livedoor
  • Sumbit to Yahoo!
  • Sumbit to Digg
  • Sumbit to StumbleUpon
  • Sumbit to Delicious
  • Sumbit to Technorati
  • Sumbit to Reddit
  • Sumbit to Mixx



※このサンプルにはブックマークリンクを設定してありません

ダウンロード

Create fancy share box with CSS and jQuery – Janko At Warp Speed

Ajaxライブラリjquery-1.3.2.min.jsを別途用意する必要があります。
jQueryダウンロード
ダウンロード後、解凍したShareBoxフォルダに入れてください。

実装手順

Shareboxフォルダを丸ごとアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。

<script type="text/javascript" src="http://サイトURL/ShareBox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://サイトURL/ShareBox/sharebox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sharebox").sharebox();
});
</script>
<style type="text/css">
ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute; }
ul.sharebox li a { margin:0 0 0 -24px; display:block; }
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}
</style>

ShareBoxを表示させる場所に以下を記入。
ブックマークのリンク先は、それぞれのブックマークサイトで確認してください。

<ul id="sharebox" class="sharebox">
 <li><img src="http://サイトURL/ShareBox/sharethis.png" alt="Share this" /></li>
 <li><a href="ブックマークリンク"><img src="ボタン画像URL" /></a></li>
 <li><a href="ブックマークリンク"><img src="ボタン画像URL" /></a></li>
 ・
（以下同様に）
 ・
 ・
</ul>

おまけ

日本向けに、はてな・ライブドア・ヤフーのみボタンを作成しました。
ダウンロード（右クリックから「画像を保存」）してご自由にお使い下さい。
BookmarkSumbit to HatenaSumbit to LivedoorSumbit to Yahoo!

無地も作成しておきましたので自作したい方はどうぞ。
nonenone48px

]]> http://e-maga.com/javascript/sharebox/feed/ 0 スルスルとページ内を移動するSmooth Anchors http://e-maga.com/javascript/smooth-anchors/ http://e-maga.com/javascript/smooth-anchors/#comments Sat, 01 Aug 2009 15:31:18 +0000 Daisuke http://e-maga.com/?p=305 ページ内のリンクをスルスルゆるゆると移動していくjQueryプラグインSmooth Anchors。
ゆったりとした高級感のあるページに仕上がりますので、地味ですが割と印象に残る「いぶし銀」的なスクリプトです。

実装はとても簡単。


動作サンプル

１）LINK-01の詳細はココをクリック！
２）LINK-02の詳細はココをクリック！
３）LINK-03の詳細はココをクリック！

キーン

LINK-01の詳細

聞いたことあるような無いような・・・。
お役に立てず申し訳ありません。

▲サンプルの先頭に戻る

キーン

LINK-02の詳細

それは難しいですねぇ。
書籍などで勉強してみてはいかがですか？

▲サンプルの先頭に戻る

キーン

LINK-03

まったくわかりませんね。
まぁ、知っていても教えませんけどね。

▲サンプルの先頭に戻る

キーン

ダウンロード

Smooth Anchors jQuery Plugin
Setupの「Download the Smooth Anchors plugin.」クリックでjquery.jsも同梱されたフォルダがダウンロードされます。

実装手順

サーバーにSmooth_Anchorsフォルダのjsフォルダ（jquery-1.3.2.jsとjquery.smoothanchors.js以外は不要）をアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。
移動速度は「fast」「normal」「slow」から選択。もちろんslow推奨です。

<script type="text/javascript" src="http://サイトURL/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://サイトURL/js/jquery.smoothanchors.js"></script>
<script>
$(document).ready(function(){
$.smoothAnchors("slow");
});
</script>

あとは通常通りにページ内リンクを貼るだけ。
う～ん、簡単簡単。

<ul>
<li><a href="#link01">LINK-01</a></li>
<li><a href="#link02">LINK-02</a></li>
<li><a href="#link03">LINK-03</a></li>
</ul>
 
<a name="link01"></a>
LINK-01
コンテンツ-01
<a name="link02"></a>
LINK-02
コンテンツ-02
<a name="link03"></a>
LINK-03
コンテンツ-03

なんだろう・・・。
このスクリプト、かなり好きです。

▲サンプルの先頭に戻る

]]> http://e-maga.com/javascript/smooth-anchors/feed/ 0 コンテンツがくるっと回転するタブスクリプトFlipping Content Tabs http://e-maga.com/javascript/flipping-content-tabs/ http://e-maga.com/javascript/flipping-content-tabs/#comments Sat, 01 Aug 2009 05:06:28 +0000 Daisuke http://e-maga.com/?p=255 コンテンツがくるっと回転しているように見えるタブスクリプトFlipping Content Tabs。
画像を回転させるjQueryのプラグインQuickFlip（ダウンロードファイルに同梱）を使用します。

実装は比較的簡単ですが、コンテンツに合わせてCSSの修正が必要です。

【シャガ】
アヤメ科アヤメ属の多年草。
学名の種小名はjaponica（「日本の」という意味）であるが、中国原産でかなり古くに日本に入ってきたものと考えられている。
[出典：Wikipedia]

【シバザクラ】
ハナシノブ科の多年草。
北米原産。4-5月頃にサクラに似た形の淡桃、赤、薄紫、あるいは白色の花を咲かせる。葉形やその匍匐性などから芝桜と名付けられた。
[出典：Wikipedia]

【アブラナ】
アブラナ科アブラナ属の二年生植物。
古くから野菜として、また油を採るため栽培されてきた作物で、別名としてナノハナ（菜の花）、ナタネ（菜種、厳密には採取した種子のこと）などがあり、江戸時代には胡菜または菜薹と呼ばれた。
[出典：Wikipedia]

【チューリップ】
ユリ科チューリップ属の植物。
球根ができ、形態は有皮鱗茎。和名は鬱金香（うこんこう、うっこんこう）、中近東ではラーレと呼ばれる。アナトリア、イランからパミール高原、ヒンドゥークシュ山脈、カザフスタンのステップ地帯が原産。
[出典：Wikipedia]

【ハナショウブ】
アヤメ科アヤメ属の植物。
6月ごろに花を咲かせる。花の色は、白、ピンク、紫、青、黄など多数あり、絞りや覆輪などとの組み合わせを含めると5000種類あるといわれている。
[出典：Wikipedia]

ダウンロード

Flipping Content Tabs Using jQuery
Download Source Code n Tryをクリックすると、jsというフォルダに入ったjquery-1.3.2.jsとjquery.quickflip.jsがダウンロードできます。

チュートリアルの「The CSS Styles」をコピーしてCSSファイルを作成します。
flipping.cssとでも名付けてjsフォルダに入れてください。

実装手順

jsフォルダを丸ごとアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。

<link rel="stylesheet" href="http://サイトURL/js/flipping.css" type="text/css" />
<script type="text/javascript" src="http://サイトURL/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://サイトURL/js/jquery.quickflip.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid=$(this).attr('id').substr(4);
$('#flip-container').quickFlipper({ }, flipid, 1);
return false;
});
});
});
</script>

Flipping Content Tabsを表示させる場所に以下を記述。

<div id="flip-tabs" >
	<ul id="flip-navigation" >
		<li class="selected"><a href="#" id="tab-0"  >コンテンツ－１の見出し</a></li>
		<li><a href="#" id="tab-1" >コンテンツ－２の見出し</a></li>
		<li><a href="#" id="tab-2" >コンテンツ－３の見出し</a></li>
	</ul>
<div id="flip-container" >
	<div>
		コンテンツ－１
	</div>
	<div>
		コンテンツ－２
	</div>
	<div>
		コンテンツ－３
	</div>
 ・
 （以下同様に）
 ・
 ・
</div>
</div>

コンテンツ部分に<p>を使用するとCSSの指定が楽になると思います。
では、がんばってください。

]]> http://e-maga.com/javascript/flipping-content-tabs/feed/ 0 エフェクトが選べる画像スライドAD Gallery http://e-maga.com/javascript/ad-gallery/ http://e-maga.com/javascript/ad-gallery/#comments Fri, 31 Jul 2009 05:05:54 +0000 Daisuke http://e-maga.com/?p=184 画像が切り替わる際のエフェクト（効果）が選べるスライドのスクリプトです。
使用するAjaxライブラリはjQuery。

カスタマイズする場合、実装にはちょっと手こずるかも知れません。

ダウンロードと修正

AD Gallery – Coffeescripter.com
Downloadsから「The whole kit and kaboodle」で一式ダウンロード、解凍してください。

Ajaxライブラリjquery-1.3.2.min.jsを別途用意する必要があります。
jQueryダウンロード
ダウンロード後、解凍したjquery.ad-gallery.1.2.0フォルダに入れてください。

jquery.ad-gallery.cssに以下を追加します。
背景色（background）はお好みで指定してください。

#gallery {padding: 30px; background: #e1eef5;}

画像の表示サイズ変更はjquery.ad-gallery.cssの以下の赤字部分を修正。

.ad-gallery {
 width: 600px; /* 横幅 */
}
.ad-gallery, .ad-gallery * {
 margin: 0;
 padding: 0;
}
.ad-gallery .ad-image-wrapper {
 width: 100%;
 height: 400px; /* 高さ */
 margin-bottom: 10px;
 position: relative;
 overflow: hidden;
}

※サイトの基本CSSとの相性により、思い通りの表示にするためにjquery.ad-gallery.cssの修正が必要です。場合によってはIE用のCSSハックも必要になります。

エフェクト変更は、jquery.ad-gallery.jsの(function($)赤字部分を修正します。
デフォルトは横スクロール（slide-hori）なので、他のエフェクトに変更する場合は青字部分から選択して書き換えてください。

effect: 'slide-hori', // or 'slide-vert', 'fade', or 'resize', 'none'

jquery.ad-gallery.jsの(function($)で画像読み込み時の画像URLをフルパスに修正。

loader_image: 'http://サイトURL/loader.gif'

実装手順

jquery.ad-gallery.1.2.0フォルダを丸ごとアップロード＋表示させる画像をアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。

<link rel"stylesheet" href"http://サイトURL/jquery.ad-gallery.1.2.0/jquery.ad-gallery.css" type"text/css" />
<script type="text/javascript" src="http://サイトURL/jquery.ad-gallery.1.2.0/jquery.ad-gallery.js"></script>
<script type="text/javascript" src="http://サイトURL/jquery.ad-gallery.1.2.0/jquery.ad-gallery.js"></script>
<script type="text/javascript">
$(function() {
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
});
</script>

AD Galleryを表示させる場所に以下を記入。

<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper">
</div>
<div class="ad-controls">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
 <li><a href="http://画像01URL"><img src="画像01サムネイルURL" title="画像01タイトル" longdesc="画像01説明文" class="image0（画像番号）"></a></li>
 <li><a href="http://画像02URL"><img src="画像02サムネイルURL" title="画像02タイトル" longdesc="画像02説明文" class="image1（画像番号）"></a></li>
　・
（以下同様に）
　・
　・
</ul>
</div>
</div>
</div>

サイズ変更をする際などはCSSの修正に苦労を強いられることになると思います。
カスタマイズは根気強くがんばってください。

]]> http://e-maga.com/javascript/ad-gallery/feed/ 0 縦も横もOKのアコーディオンメニューBySlideMenu http://e-maga.com/javascript/byslidemenu/ http://e-maga.com/javascript/byslidemenu/#comments Tue, 28 Jul 2009 15:02:43 +0000 Daisuke http://e-maga.com/?p=102 BySlideMenuは、サイドバーのメニューなんかにも活用可能な「縦型」のアコーディオンメニューを実装出来るスクリプト。

もちろんimage menuのような横開きのスタイルも用意されています。
動きのある縦型のメニューが欲しかった！そんな人に超オススメ。

このサンプルではBLOCK-01（1番上の画像）を最初からオープンさせるためにbyslidemenu.jsのoptions:でdefaultIndex: 1に設定してありますが、デフォルトではdefaultIndex: falseとなっていますので全てのブロックが等間隔で表示されます。
その他の指定も全てbyslidemenu.jsのoptions:で行います。
　
ちなみにimagemenuがCSSによる画像置き換え（text-indent: -9999px;ってやつ）を採用しているのに対し、このBySlideMenuは画像そのものを重ねて表示するスクリプトです。
お好みに応じて使い分けても良いと思います。

ダウンロード

BySlideMenu – ByScripts

Ajaxライブラリmootools-core.jsを別途用意する必要があります。
mootoolsダウンロード
※mootools-1.2.3-core-nc.jsはjsファイルではなくtxtファイルとして認識される場合があります。mootools-1.2.3-core-nc.js.txtになっていると動作しませんのでテキストエディタ等で一旦開き、「名前を付けて保存する」で.txt無しのファイル名にリネームしてください。

実装手順

mootools-core.jsとbyslidemenu.js、それと画像をサーバーにアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。
※横型メニューの場合は赤字部分を削除

<script type="text/javascript" src="http://アップロードしたURL/mootools-core.js"></script>
<script type="text/javascript" src="http://アップロードしたURL/byslidemenu.js"></script>
<script type="text/javascript">
window.onload = function(){
new BySlideMenu('verticalmenu', {vertical: true});
}
</script>

BySlideMenuを表示させる場所に以下を記入。
※横型メニューの場合は赤字部分をbyslidemenuに変更

<ul id="verticalmenu">
 <li><a href="ページ1"><img src="画像1" /></a></li>
 <li><a href="ページ2"><img src="画像2" /></a></li>
 <li><a href="ページ3"><img src="画像3" /></a></li>
 <li><a href="ページ4"><img src="画像4" /></a></li>
 <li><a href="ページ5"><img src="画像5" /></a></li>
</ul>

BySlideMenuはバリエーションが豊富なのでいろいろと楽しめるのではないでしょうか。
では、がんばってください。

]]> http://e-maga.com/javascript/byslidemenu/feed/ 0