kdcsライブラリー

bxsliderをカルーセル化し、画面いっぱいに表示させるカスタマイズ

キャプションに長めの文章を表示させる場合、画像上にマウスを合わせると
ツールチップが表示されてしまうのを回避したい。

jquery.bxslider.jsでcaptionの記述部分の「title」を「name」に変更し
html記述部分、imgタグ内にnameを使う

<img src="<?php bloginfo('template_url'); ?>/images/xxx.jpg" alt="" title="" name="">

jQueryスライドショー「Camera slideshow」現在は無料配布されてないっぽい

(続きを読む…)

入力フォームに日付入力がある場合、Datepickerでカレンダーを表示させ
クリックで入力できるようにする方法

入力フォーム内のhtmlはこちら
idは任意（オプションの設定と合わせる）readonly=”readonly”を指定することで
スマホのキーボード表示させないようにする。typeはtext

<label>日付<input id="calendar" type="text" readonly="readonly"></label>

jQueryとjQuery-UIを使用するのでgoogleからリンク（今回は1.11.1と1.11.4を使用）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

カレンダーを日本語化するために以下をリンク

<script src="<?php bloginfo('template_url'); ?>/js/datepicker-ja.js"></script>

オプションの設定

<script>
$(function() {
$('#calendar').datepicker({
        minDate: '1d', //明日から
        maxDate: '+1m', //1ヶ月後までが選択可能範囲
        dateFormat: 'yy年mm月dd日(D)', //年-月-日(曜日)
beforeShowDay: function(day) {
 var result;
 switch (day.getDay()) {
 
case 3: // 水曜日を選択できないようにする
 result = [false];
 break;
 case 4: // 木曜日を選択できないようにする
 result = [false];
 break;
 default:
 result = [true]; // それ以外は選択できる
 break;
 
}
 return result;
 }
    });
});
</script>

カレンダーのスタイルシート
今回は公式テーマの「redmond」を使用

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" >

閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれます。
引用：LIG INC

modernizr.jsをダウンロードするのはこちらから
ダウンロードページを表示すると、選択した機能を判別できるJSを生成してダウンロードすることができる。
(続きを読む…)

bxsliderの動作オプション
(続きを読む…)