5/09 練習02 - おかゆ学習帳

前回のペースですぐ出来そうと思ったけど、jqueryとタブ切り替え等にものすごく時間がかかってしまった・・・・。
既存サイトのjqueryをまんま解析しようと思ったけど断念。
やっぱりjqueryそのまま使うのではなく、いろいろアレンジしているのかも。
IE6,7ではレイアウト崩れてるし・・・・
いろいろやってみて未だ解決してない所もありますがとりあえずメモ。

GalleryView

下記ダウンロード

jquery-1.3.2.min.js
jquery.galleryview-1.1.js
jquery.easing.1.3.js
jquery.timers-1.1.2.js

"jquery.galleryview-1.1.js"ファイルと"themesフォルダ"を同じディレクトリに置く

javascriptのコードhead内に記入
overlay_height: 40を記入しないとIE6,7で崩れる。

<script type="text/javascript">
	$(document).ready(function(){
		$('#gallery').galleryView({
			panel_width: 1100, //パネルの幅
			panel_height: 280,　//パネルの高さ
			frame_width: 223,　//サムネイルの幅
			frame_height: 59,　//サムネイルの高さ
			overlay_height: 40　
		});
	});
</script>

jquery.galleryview-1.1.jsファイル下記必要部分変更する

$.fn.galleryView.defaults = {
	panel_width: 1100,
	panel_height: 280,
	frame_width: 223,
	frame_height: 59,
	filmstrip_size: 3,
	overlay_height: 70,//キャプション部分の高さ
	overlay_font_size: '1em',
	transition_speed: 400,//切替時のスピード
	transition_interval: 6000,//切り替え開始時間
	overlay_opacity: 0.6,//キャプション部分の透明度
	overlay_color: 'black',
	background_color: '#F0F0F0',
	overlay_text_color: 'white',
	caption_text_color: 'white',
　　　　nav_theme: 'light',
	easing: 'swing',//easingの動きのタイプ('swing','linear'）
	filmstrip_position: 'bottom',
	overlay_position: 'bottom',
	show_captions: false,//キャプションの表示・非表示
	fade_panels: true,//画像を切り替えるときフェードするかすぐ切り替えるか
	pause_on_hover: false//マウスが乗ったらスライドショーを停止するかどうか
	};

HTML

<div id="billboard">
<!-- main banner --> 
<div id="gallery" class="galleryview">
<div class="panel">
<a href="#"><img src="img/top_main_bnr19.jpg" width="1100" height="280" alt="パネル01" /></a>
</div>
<div class="panel">
<a href="#"><img src="img/top_main_bnr18.jpg" width="1100" height="280" alt="パネル02" /></a>
</div>
<div class="panel">
<a href="#"><img src="img/top_main_bnr13.gif" width="1100" height="280" alt="パネル03" /></a>
</div>
<div class="panel">
<a href="#"><img src="img/top_main_bnr02.jpg" width="1100" height="280" alt="パネル04" /></a>
</div>
<div class="panel">
<a href="#"><img src="img/top_main_bnr08.jpg" width="1100" height="280" alt="パネル05" /></a>
</div>
<!-- /main banner -->
<!-- navigator -->
<ul class="filmstrip">
<li>
<img src="img/thumbs/top_main_thumb19.jpg" width="223" height="59" alt="パネル01" title="パネル01"/>
</li>
<li>
<img src="img/thumbs/top_main_thumb18.jpg" width="223" height="59" alt="パネル02" title="パネル02"/>
</li>
<li>
<img src="img/thumbs/top_main_thumb13.gif" width="223" height="59" alt="パネル03" title="パネル03"/>
</li>
<li>
<img src="img/thumbs/top_main_thumb02.gif" width="223" height="59" alt="パネル04" title="パネル04"/>
</li>
<li>
<img src="img/thumbs/top_main_thumb08.jpg" width="223" height="59" alt="パネル05" title="パネル05"/>
</li>
</ul>
</div>
<!-- /navigator -->

タブ切り替え

既存サイトはjquery使用していたが、うまくいかないのでこちらを参考にどうにか設置した。

2つのjQuery関数

addClass
$(”class名を追加したい要素のCSS セレクタ”).addClass(”追加したいclass名”);
$('#tabs ul li:first').addClass('active');
removeClass
$(”class名を削除したい要素のCSS セレクタ”).removeClass(”削除したいclass名”);
$('#tabs ul li').removeClass('active');

<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
 
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>

<div id="tabs">
<ul>
<li><a href="#tab01">お知らせ</a></li>
<li><a href="#tab02">イベント</a></li>
<li><a href="#tab03">入試</a></li>
<li><a href="#tab04">教育・研究</a></li>
</ul>

<div id="tab01">内容</div>
<div id="tab02">内容</div>
<div id="tab03">内容</div>
<div id="tab04">内容</div>
</div>

li.tab02 a{ 
	background: url(../img/top_info_nav01.gif);
	background-repeat: no-repeat;
	background-position: 0 0; 
}
li.tab02 a:hover{ 
	background-position: 0 -42px; 
}
li.tab02.active a { 
	background-position: 0 -84px; 	
}

透明度　Opacity設定

hoverの時に透明度７０％にする

#sidenav #photo a:hover img{
	border:1px solid #69F;
	filter: alpha(opacity=70);　/* IE */
	-moz-opacity: 0.70;　/* Firefox */
	opacity: 0.70;　/* Opera・Safari */
	zoom: 1;
}

GalleryView

タブ切り替え

2つのjQuery関数

透明度 Opacity設定

透明度　Opacity設定