［JS覚書］サイドの画像バナーがハイライトするスライダーをWordPress用にカスタマイズメモ

2013年4月4日2013年5月23日

ホームページのトップページに使える素敵なスライダー１ | KOBO TAKE

ホームページのトップページに使える素敵なスライダーのデモ

制作者の方には申し訳ないんですけど、このページ、スライダー部分とは別の要素がたくさんくっついてます。
スライダー部分だけ抜き出してカスタマイズしてみました。
スライダーを５枚に増やし、ボタンの位置に汎用性を持たせたかったので、
スタイル名「leftTab」を「sideTab」に変更し、
Wordpressでテンプレートにvicunaを使ってる時の仕様です。
画像名も以下のように変更しちょります！
「1.gif」→「topimg01.png」
「lefttab01.gif」→「tab01.png」
「lefttab01_on.gif」→「tab01_on.png」

scriptで必要な部分

まずscript要素は、必ず＜/body＞の直前に配置。head内では動きません。
いるのは、コレだけです。
Jqueryのライブラリ記述は既に入ってる場合はいらないかも。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/style-vega/js/libs/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/style-vega/js/jquery.featureList-1.0.0.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/style-vega/js/slide.js"></script>

なので、jsファイルで必要なのも「jquery.featureList-1.0.0.js」と「slide.js」の２つだけです。任意の場所に置きました。

CSSで必要な部分

.left{ float:left;}
.right{ float:right;}

#mainImg {
	height: 300px;
	width: 980px;
}
#mainPicture {
	height: 300px;
	width: 710px;
	overflow: hidden;
}

#mainPicture ul {
	margin:0;
	padding:0;
}

#mainPicture ul li{
	list-style:none;
}

ul#sideTab {
	margin:0;
	padding:0;
}

ul#sideTab li{
	list-style:none;
}

#sideTab li#tab01 {
	display: block;
	height: 60px;
	width: 270px;
}
#sideTab li#tab01 a {
	background: url(images/slider/tab01.png) no-repeat;
	text-indent: -9999px;
	display: block;
	height: 60px;
	width: 270px;
	overflow: hidden;
}
#sideTab li#tab01 a.current,#sideTab li#tab01 a:hover {
	background: url(images/slider/tab01_on.png) no-repeat;
}
#sideTab li#tab02 {
	display: block;
	height: 60px;
	width: 270px;
}
#sideTab li#tab02 a {
	text-indent: -9999px;
	display: block;
	height: 60px;
	width: 270px;
	overflow: hidden;
	background-image: url(images/slider/tab02.png);
	background-repeat: no-repeat;
}
#sideTab li#tab02 a.current,#sideTab li#tab02 a:hover {
	background: url(images/slider/tab02_on.png) no-repeat;
}

#sideTab li#tab03 {
	display: block;
	height: 60px;
	width: 200px;
}
#sideTab li#tab03 a {
	text-indent: -9999px;
	display: block;
	height: 60px;
	width: 270px;
	overflow: hidden;
	background-image: url(images/slider/tab03.png);
	background-repeat: no-repeat;
}

#sideTab li#tab03 a.current,#sideTab li#tab03 a:hover {
	background: url(images/slider/tab03_on.png) no-repeat;
}

#sideTab li#tab04 {
	display: block;
	height: 60px;
	width: 200px;
}
#sideTab li#tab04 a {
	text-indent: -9999px;
	display: block;
	height: 60px;
	width: 270px;
	overflow: hidden;
	background-image: url(images/slider/tab04.png);
	background-repeat: no-repeat;
}
#sideTab li#tab04 a.current,#sideTab li#tab04 a:hover {
	background: url(images/slider/tab04_on.png) no-repeat;
}

#sideTab li#tab05 {
	display: block;
	height: 60px;
	width: 200px;
}
#sideTab li#tab05 a {
	text-indent: -9999px;
	display: block;
	height: 60px;
	width: 270px;
	overflow: hidden;
	background-image: url(images/slider/tab05.png);
	background-repeat: no-repeat;
}
#sideTab li#tab05 a.current,#sideTab li#tab05 a:hover {
	background: url(images/slider/tab05_on.png) no-repeat;
}

スライダー部分

フロートの設定は、この行のclassをleft、rightに変えることで切り替えできます。

<ul id="sideTab" class="right">

<!-- ▼スライダー -->
<div id="mainImg">

<ul id="sideTab" class="right">
<li id="tab01"><a href="#">ナビゲーション1</a></li>
<li id="tab02"><a href="#">ナビゲーション2</a></li>
<li id="tab03"><a href="#">ナビゲーション3</a></li>
<li id="tab04"><a href="#">ナビゲーション4</a></li>
<li id="tab05"><a href="#">ナビゲーション5</a></li>

</ul>

<div id="mainPicture" class="left">
<ul>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/style-vega/images/slider/topimg01.jpg" alt="画像の説明" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/style-vega/images/slider/topimg02.jpg" alt="画像の説明" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/style-vega/images/slider/topimg03.jpg" alt="画像の説明" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/style-vega/images/slider/topimg04.jpg" alt="画像の説明" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/style-vega/images/slider/topimg05.jpg" alt="画像の説明" /></a></li>
</ul>
</div>

</div>
<!-- ▲スライダー-->

注意点(；´Д｀)

謎(；´Д｀)
最初に設置した時に、間違いなかったのに2番目と3番目のデフォルト画像が表示されず。
Widthを画像の大きさに合わせて調整したら出てきた。

注意(；´Д｀)
画像を間違えてアップしてしまったときはリロードしてもキャッシュが残っている時がある。その場合は使っているタブを閉じて、新しいタブで開いて確認する。