だるまブログ

jQueryのプラグインでレスポンシブ対応のbxsliderというプラグインがあります。

商用利用もOKなMITライセンスで、スマホやタブレットのスワイプにも対応したイケてるやつです。

※作者はFAQの下の方で「ビール奢ってね！」って言ってます。トップページの「Buy me a beer」から奢ってあげましょう！

機能も豊富で便利なのですが、一つイケてないのが

ページャーやPrev、Next（デフォルトだと三角のイメージが量端に出ます）を押すとオートアニメーションが止まる。

という点です。

jquery.bxslider.jsのソース見ると、

var clickPagerBind = function(e) ・・・ ページャーを押した時のファンクション

var clickNextBind = function(e) ・・・ Next押した時のファンクション

var clickPrevBind = function(e) ・・・ Prev押した時のファンクション

のそれぞれで

if (slider.settings.auto) el.stopAuto();

と、オートのアニメーションをストップしてます。

なんで、上記、3つのファンクションでif (slider.settings.auto) el.stopAuto();をコメントすれば、止まらなくなります。

コールバックファンクションもあるので、静止時間時間過ぎたら、startAutoするってのでも実現できるのですが、タイマー仕掛けたりメンドウなので、 el.stopAuto()をコメントすることにしました。

ミニマイズでやりたいけど、ソース追うのが面倒なので、ナシってことで。

※タイマーとコールバックで実現されてる方もいらっしゃいます。
自動再生させているはずのスライダーが止まっちゃうんです！！（bxSlider使用）

2 Comments »

<<前回

前回で3カラムのリキッドレイアウトはできましたが、このままだとmain部分が狭すぎたり間延びしたりするので、min-width、max-widthを設定することにします。

ここで問題なのは、min-width、max-widthがIE6で効かないこと。
いつもの手ですが、minmax.jsを使わせてもらいます。

こちらのサイトからminmax.jsをダウンロードしヘッダー部分に

<script src="minmax.js" type="text/javascript"><!--mce:0--></script>

のように読み込みます。

HTMLは下記のように全体を#contenntsで囲み、
[HTML]

<div id="contents">
<div id="header">
		headerの中身</div>
<div id="main_wrapper">
<div id="main">
			mainの中身</div>
</div>
<div id="side1">
		side1の中身</div>
<div id="side2">
		side2の中身</div>
<div id="footer">
		footerの中身</div>
</div>

CSSで、min-width、max-widthを設定します。
[CSS]

#contents {
	min-width: 760px;
	max-width: 960px;
}

これで、IE6でもきちんと表示されるものができました。
全体としては、以下のようなイメージです。

3カラムmax&min width

No comments »