Hoyzontal Accordion (Menu hoverタイプ)大型画像専用。前ページの記事「ホリゾンタルアコーディオン1」を大型画像を使用する場合に使い易いようにしました。設定はＪＳ側で行い、ＣＳＳ記述を簡略化しています。
jQueryホリゾンタルアコーディオン(Menu hoverタイプ) 大型画像使用
大型に画像を挿入して「メニュー」に使用することを前提に最適化しました。画像の大きさを指定できるようにしました。
(画像の縮小)、ページの横幅など変更しても、新しい画像サイズのものをＵＰせず、楽にページにあわせることが可能になります。
サンプル
簡易方式の「ホリゾンタルアコーディオン」です。現在、5枚構成、中央配置、大きさ640px になります。
1番目初期オープン状態、クリック(<a></a>)の設定はしていますが、クリックしても別ページには飛びません。
HoyzontalAccordionMenu (hoverタイプ) 大型画像使用の説明
CSSでの設定は、大まかな収容位置の大きさのみの変更で、そのほかのサイズなどはＪＳ側で変更します。ＪＳの上方部分をよく読んでください。
- 構成、JSの内容は popswicks-a.js とほぼ同じものです。大型画像の使用に最適化しています。
- HTMLおよびCSSの記述を簡略化しています。画像専用です、背景画像は使用できません。
- 「li要素」にホバーした場合に hovered_wicks クラスが与えられます。現在これのＣＳＳ設定はしていない。
- 横幅、重なり余白など指定できますので、レイアウトが楽になります。(画像枚数5-10枚くらいの場合)
- 使用する画像横幅の計算を下記により、概略決定してから画像を作ってください。(ＪＳで画像サイズ変更は可能ですが、そのままの大きさのほうがキレイです。お断り：ブラウザの種類により画像の品質が違います。ＩＥ6,7ではギザギザになります)
- 大型画像専用ですが、小型画像にも使用は可能です。設定のほとんどをＪＳで行っているだけです。
- この状態では「オールブラウザ対応」です。HTML CSS JS の書き換えなどは使用者の責任で行ってください。
設定方法
説明、そのほかの資料は「jQueryホリゾンタルアコーディオン1」の記事を参照ください。ほぼ同じです。
【参照】前ページの記事: jQueryホリゾンタルアコーディオン1
全体の幅の計算方法(ul要素の幅)
ul要素の幅 = li要素の幅 + 重なり余白の幅 x (li要素の合計数 - 1) で算出できます。
重なり余白などは通常自動計算されて、マスクの大きさも修正されます。場合によっては横幅が1ピクセル小さくなる場合があります。通常はありませんが、事前に画像の幅など考慮せず数多く並べた場合には、マスクでカットされ全て表示されない場合があります。
簡易説明図
1. JS上方の説明を読んでんでください。
2. 余白、全体の幅、画像枚数などを考慮して、画像の大きさを決定ください。
3. 背景色指定は通常画像で隠れますので必要ありません、ほとんど使用することはないと思いますが、画像を小さくして(または小さな画像)配置する場合ですが。使用者が画像周りのＣＳＳを変更ください。
4. 1,2枚の画像の増減が有っても余白の幅が変わるだけです。見栄えが悪い場合は全体の幅(ul)などを変更ください。
設置方法
動作にはjQuery(v1.4以上)が必要です。事前にＣＳＳを読み込み、jQuery、該当ＪＳの順序で読み込みます。標準的なjQueryの設置と同じです。
なお、このサンプルでは jquery-1.6.4.min.js が使用されています。
HTML
上記サンプル、当方の設定例、状況に応じ背景画像ＵＲＬなどの書き方を変更ください。
<div id="popswicks-wrap">
<ul id="popswicks">
<li title="GOTO-PAGE1"><a href="javascript:void(0);"><img src="/main/images/toyota_car01.jpg" /></a></li>
<li title="GOTO-PAGE2"><a href="javascript:void(0);"><img src="/main/images/toyota_car02.jpg" /></a></li>
<li title="GOTO-PAGE3"><a href="javascript:void(0);"><img src="/main/images/toyota_car03.jpg" /></a></li>
<li title="GOTO-PAGE4"><a href="javascript:void(0);"><img src="/main/images/toyota_car04.jpg" /></a></li>
<li title="GOTO-PAGE5"><a href="javascript:void(0);"><img src="/main/images/toyota_car05.jpg" /></a></li>
</ul>
</div>
初期状態で「オープンさせたい要素」には actived_wicks クラスをあたえます。ＪＳで設定を優先させる場合はＣＳＳのクラス設定はしないでください。この例ではＪＳで設定しています。
注意、画像１番目を指定する場合は、0を記入します、２番目は1です。li要素数より大きすぎる場合は最後の画像がオープンします。
JS
簡易記述方式、popswicks-c.js 7KB
//popswicks-c.js
//簡易記述HoyzontalAccordion
//POPS WEB KOUBOU
(function($){
$(function(){
//全体の幅を決めるか、または重なりを決めるかで少し形態が違ってくる
//幅などの大きさ情報
//BOX情報、CSSに記載されていれば原則記入の必要はない
var boxWidth = 640;//中の収容ＢＯＸ幅 ul
var boxHeight = 260;//中の収容ＢＯＸ高さul
//収容item幅 li/自動修正されます
var itemWidth = 520;
var itemHeight = 260;
//余白は固定しない場合自動修正されます
var boxSpace_W = 24;
//余白を固定する use/固定する場合は全体を自動修正
var set_space_use = '';
//画像サイズ修正されます
var imgWidth = 520;//画像サイズ幅
var imgHeight = 260;//画像サイズ高さ
//画像を縮小する場合収容item幅を画像サイズにあわせる use
var set_image_use = '';
//COLOR
var bgcolor=['#068E9A','#02C8BC','#8FA308','#D0B002','#F89C78','#F08C9F','#D185B7','#068E9A','#02C8BC','#8FA308','#D0B002','#F89C78','#F08C9F','#D185B7'];
//li要素の背景色を染めるか use
var bgcolor_use = '';
//速度、余白
var duration = 500;//アニメ速度
var len_max = 0;//要素最大数
//position関連変数
var position_st = [];//初期標準位置保存配列
var position_op = [];//オープン位置保存配列
var position_cl = [];//クローズ位置保存配列
var hoverflag = 0;//ul要素にhoverしているかの判定
var index = 0;
//初期に開閉したい要素を指定、0からの番号に注意/CSSでの設定も可能
//オープン番号指定がない場合は1番目(open_no=0)をオープン/-1の場合は初期標準(standerd位置)にする
var open_no = 0;
//Hover-Outの時standerd位置に戻すか use
var standerd_use = 'use';
//収容ＢＯＸ大きさ修正、そのままで使用ください
var set_v_use = 'use';
//------------------------------------------------
//初期化init
function init () {
//BOX非表示
$("#popswicks").css({'display':'none'});
//基本的な大きさを算出設定
//要素の数
len_max = $('#popswicks li').length;
//収容item幅を画像サイズにあわせる
if (set_image_use == 'use') {
itemWidth = imgWidth;
itemHeight = imgHeight;
boxHeight = imgHeight;
//余白初期値を使用/全体をちじめる
set_space_use = 'use';
}
//収容ＢＯＸ大きさ位置修正再計算
//余白を再計算/useの場合初期値を使用
if (set_space_use != 'use') {
boxSpace_W = Math.ceil((boxWidth-itemWidth)/(len_max-1));//重なり余白計算floor.round.ceil
}
//boxWidthが大きすぎる場合ははみ出し分カットされる
boxWidth = itemWidth + boxSpace_W * (len_max - 1);
//収容ＢＯＸ大きさCSS修正
if (set_v_use == 'use') {
$('#popswicks').css({'width':boxWidth,'height':boxHeight});
$("#popswicks li").css({'width':itemWidth,'height':boxHeight});
$("#popswicks li img").css({'width':imgWidth,'height':imgHeight});
}
//配置位置を計算保存
$("#popswicks li").each(function(i) {
//position保存
position_st[i] = (boxWidth / len_max) * i;
position_op[i] = boxSpace_W * i;
position_cl[i] = boxSpace_W * (i-1) + itemWidth;
if(i == 0) {position_cl[0] = 0;position_op[0] = 0;}//1番目補正
//actived位置保存
if ($(this).attr('class') == 'actived_wicks') {open_no = i;}
//li背景を染める
if (bgcolor_use == 'use') {
$(this).css({'background-color':bgcolor[i]});
}
//外側に移動配置
$(this).css({'left':boxWidth});
});
//actived位置修正/大きい場合は最後
if (open_no >= len_max) {open_no = len_max - 1;}
//BOX表示
$("#popswicks").css({'display':'block'});
//初期移動
//オープン位置を指定してオープン
if (open_no >= 0) {
open_set(open_no);
}
//指定なしオープン、standerd2標準にする
if (open_no == -1) {
standerd_set2();
}
//hover_actionを有効にする
hover_action_set();
}
//------------------------------------------------
//ACTIONの設定/hovered_wicksクラスをあたえているがここではクラス未使用
//CSS側で変化をつける場合にクラスを使用してください
var hover_action_set = function() {
//li要素HOVER-ACTION-addClass
$("#popswicks li").hover(
//hover
function(e) {
$(this).addClass("hovered_wicks");
//要素の番号を取得
var index_no = $("#popswicks li").index(this);
//グローバルindexに保存、index使用
index = index_no;
//hover番号位置をオープン
open_set(index_no);
},
//hover-Out-removeClass
function(e) {
$(this).removeClass("hovered_wicks");
}
);
//ul要素HOVER-OUT-ACTION
$("#popswicks").hover(
//hover何もしない
function() {
hoverflag = 0;
},
//hover-Out標準に戻す
function() {
hoverflag = 1;
//戻す場合の指定を判定して処理する
if (standerd_use == 'use') {
//標準状態に戻す
standerd_set();
} else {
//開いたままにする、場所を指定して開くことも可能
hoverflag = 0;
//常に初期指定のオープン位置に戻す場合はstanderd_useを変更して、下記のようにすれば良い
//open_set(open_no);
}
}
);
}
//------------------------------------------------
//アニメACTIONの実行
//open
function open_set(no) {
$("#popswicks li").each(function(i) {
if (no >= i) {$(this).stop().animate({'left':position_op[i]},duration);}
else {$(this).stop().animate({'left':position_cl[i]},duration);}
});
};
//standerd hoverflag-OUTの場合のみ処理
function standerd_set() {
//ul要素にhoverしている場合のみ処理
if (hoverflag) {
$("#popswicks li").each(function(i) {
//標準positionにセット
$(this).stop().animate({'left':position_st[i]},duration);
});
hoverflag = 0;
}
};
//standerd2 hoverflag-OUT以外、初期のオープに使用
function standerd_set2() {
$("#popswicks li").each(function(i) {
//標準positionにセット
$(this).stop().animate({'left':position_st[i]},duration);
});
};
//----------------------------------------------
//全体を計算配置表示する
init ();
});
})(jQuery);
「li要素にホーバー」した場合、その要素に hovered_wicks クラスが与えられます。何らかの変化をＣＳＳで与える場合に利用できます。
CSS
popswicks-c.css
/* popswicks-c.css 日本語 */
/*外枠は必ず設定する*/
#popswicks-wrap {
width:640px;
height:260px;
background-color: #000000;
text-align:center;/*中央補正*/
overflow: hidden;
}
/*以下ＪＳで自動修正されます*/
#popswicks-wrap ul {
position: relative;
list-style: none;
margin: 0 auto;/*中央補正*/
padding: 0;
text-align:left;/*中央補正の場合に重要*/
background-color:none;
overflow: hidden;
}
#popswicks {
width:640px;
height:260px;
}
#popswicks li{
list-style: none;
display: inline;
position: absolute;
top:0;left:0;
width: 100%;
height: auto;
padding: 0;
margin-right: 0px;
background-color:#000000;/*標準*/
overflow: hidden;
}
#popswicks li a {
width:100%;
height:auto;
border:none;
text-decoration:none;
}
#popswicks li a img {
border:none;
text-decoration:none;
}
収容する外枠のＣＳＳは使用者が直接訂正ください。現在中央表示になっています。
画像
サンプル画像 / 原則 使用者が用途に応じてご用意ください。
| サンプル画像、520x260 |
 |
 |
 |
 |
 |
画像はトヨタ自動車(株)の壁紙を引用しています。
【画像引用】toyota.jp: TOYOTA
以上です。
[ この記事のURL ]
