ここでは郵便番号から住所を自動入力してくれるAjaxZip3.0の紹介をしていきます。

デモはこちら
https://office-goto.info/demo/ajaxzip3/

AjaxZip3.0の公式サイト
https://code.google.com/p/ajaxzip3/

head内で読み込み

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

jQueryを読み込まなくても大丈夫でした。
また、2.0と違い、ファイルをダウンロードして、読み込ませる必要がなくなりました。

html

郵便番号
<input type="text" name="pos1" style="width:50px; ime-mode:disabled;" />
&nbsp;-&nbsp;
<input type="text" name="pos2" style="width:50px; ime-mode:disabled;" onKeyUp="AjaxZip3.zip2addr('pos1','pos2','pref','city');"/>
都道府県
<select name="pref">
    <option value="">--</option>
    <option value='北海道'>北海道</option><option value='青森県'>青森県</option>
    <option value='岩手県'>岩手県</option><option value='宮城県'>宮城県</option>
    <option value='秋田県'>秋田県</option><option value='山形県'>山形県</option>
    <option value='福島県'>福島県</option><option value='茨城県'>茨城県</option>
    <option value='栃木県'>栃木県</option><option value='群馬県'>群馬県</option>
    <option value='埼玉県'>埼玉県</option><option value='千葉県'>千葉県</option>
    <option value='東京都'>東京都</option><option value='神奈川県'>神奈川県</option>
    <option value='新潟県'>新潟県</option><option value='富山県'>富山県</option>
    <option value='石川県'>石川県</option><option value='福井県'>福井県</option>
    <option value='山梨県'>山梨県</option><option value='長野県'>長野県</option>
    <option value='岐阜県'>岐阜県</option><option value='静岡県'>静岡県</option>
    <option value='愛知県'>愛知県</option><option value='三重県'>三重県</option>
    <option value='滋賀県'>滋賀県</option><option value='京都府'>京都府</option>
    <option value='大阪府'>大阪府</option><option value='兵庫県'>兵庫県</option>
    <option value='奈良県'>奈良県</option><option value='和歌山県'>和歌山県</option>
    <option value='鳥取県'>鳥取県</option><option value='島根県'>島根県</option>
    <option value='岡山県'>岡山県</option><option value='広島県'>広島県</option>
    <option value='山口県'>山口県</option><option value='徳島県'>徳島県</option>
    <option value='香川県'>香川県</option><option value='愛媛県'>愛媛県</option>
    <option value='高知県'>高知県</option><option value='福岡県'>福岡県</option>
    <option value='佐賀県'>佐賀県</option><option value='長崎県'>長崎県</option>
    <option value='熊本県'>熊本県</option><option value='大分県'>大分県</option>
    <option value='宮崎県'>宮崎県</option><option value='鹿児島県'>鹿児島県</option>
    <option value='沖縄県'>沖縄県</option>
</select>
市区町村
<input type="text" name="city" />
番地等
<input type="text" name="address" />

解説

onKeyUp=”…” (4行目)
表示させるinputタグのnameで指定します。

関連記事
jQuery 郵便番号から住所を自動入力 AjaxZip2.0
https://office-goto.info/javascript-jquery/ajaxzip2-0/

ここではjQuery 画像スライドショーを簡単に実装するCameraプラグインの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/camera/

ダウンロードはこちら
http://www.pixedelic.com/plugins/camera/

headで読み込み

<link href="camera/css/camera.css" rel="stylesheet" type="text/css">
<script src="camera/scripts/jquery.min.js"></script>
<script src="camera/scripts/jquery.mobile.customized.min.js"></script>
<script src="camera/scripts/jquery.easing.1.3.js"></script>
<script src="camera/scripts/camera.min.js"></script>

パラメーターの設定

jQuery(function(){
    jQuery('.camera_wrap').camera({
        autoAdvance: true,        // スライド
        fx: 'simpleFade',         // エフェクト
        loader: 'none',           // ローダータイプ
        loaderColor: '#eeeeee',   // 色
        loaderBgColor: '#222222', // 背景色
        loaderOpacity: .5,        // 透明度
        loaderStroke: 5,          // ストローク
        navigation: false,        // ←→画像
        pagination: true,         // ページネーション
        playPause: false,         // 再生停止切り替え
        time: 3000                // 画像切り替え秒数
    });
});

body

<div class="camera_wrap">
    <div data-src="images1.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption1</em>
        </div>
    </div>
    <div data-src="images2.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption2</em>
        </div>
    </div>
    <div data-src="images3.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption3</em>
        </div>
    </div>
    <div data-src="images4.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption4</em>
        </div>
    </div>
</div>

画像の読み込みにはdata-src=”images1.jpg”を指定して
キャプションを表示させる際はclass=”camera_caption fadeFromBottom”で囲んでください。

fx
‘random’,’simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’, ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’, ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’, ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’, ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’, ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’, ‘bottomLeftTopRight’, ‘scrollLeft’, ‘scrollRight’, ‘scrollHorz’, ‘scrollBottom’, ‘scrollTop’
沢山のエフェクトがあるのでいろいろ試してみてください。

ここでは画面に雪を降らせるjQuery snowfallの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/snowfall/

Jquery Snowfall Plugin 1.4をダンロード
http://www.somethinghitme.com/2010/12/09/jquery-snowfall-plugin-1-4/

Jquery Snowfall Plugin 1.6で画像を降らせる場合クリアがうまく動作しなかったので1.4のソースをカスタマイズしていきます。

headで読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./snowfall.jquery/snowfall.jquery.js"></script>

snowfall.jquery.jsを読み込んでください。

snowfall.jquery.jsの編集

73行目を画像が降らせれるように修正します。

var flakeMarkup = "<img src="" + options.image + "" id="flake-" + this.id;
    flakeMarkup += "" style="width: " + this.size + "px; height: " + this.size + "px;";
    flakeMarkup += "; position: absolute; top: " + this.y + "px; left:" + this.x;
    flakeMarkup += "px; font-size: 0px; z-index: " + options.flakeIndex;
    flakeMarkup += ";" class="snowfall-flakes">";

パラメーターの解説

$(function() {
    $(document).snowfall({
        image      : 'img',      // 画像
        // flakeColor : '#ffffff',  // 画像を使用しない場合色で指定
        flakeCount : 20,         // 数
        flakeIndex : 99999,      // スタイルシートのz-indexの値
        maxSpeed   : 3,          // 最大速度
        minSpeed   : 1,          // 最小速度
        maxSize    : 20,         // 最大サイズ
        minSize    : 2,          // 最小サイズ
        shadow     : true        // 影
    });
});

結構たくさんパラメータをいじれるので、お好みにカスタマイズしてください。

クリア

$(document).snowfall('clear');

flakeCount: 99999などと無理なパラメータを渡すとブラウザがクラッシュしてしまうので気をつけてください。

ここではjQueryプラグインLightbox2で画像を拡大する方法を紹介しています。

デモはこちら
https://office-goto.info/demo/lightbox2/

ダウンロードはこちら
http://lokeshdhakar.com/projects/lightbox2/

headで読み込み

<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>

必要なファイル
lightbox.css
jquery-1.11.0.min.js
lightbox.min.js
imgフォルダ
これ以外は削除しても大丈夫です。

body

1枚を拡大

<a href="imgsrc.jpg" rel="lightbox"><img src="imgsrc.jpg"></a>

aタグのrelにlightboxを指定してください。
aタグのhrefが大きく表示されるパスでimgタグのsrcが小さく表示するパスです。

グループとして拡大

<a href="imgsrc1.jpg" rel="lightbox[key]"><img src="imgsrc1.jpg"></a>
<a href="imgsrc2.jpg" rel="lightbox[key]"><img src="imgsrc2.jpg"></a>
<a href="imgsrc3.jpg" rel="lightbox[key]"><img src="imgsrc3.jpg"></a>

aタグのrelにlightboxの配列でキーを設定すれば同じキーで定義されているものがグループ表示で拡大されます。

ここではjQuery音楽再生jPlayerプラグインの紹介をしていきます。

デモはこちら
https://office-goto.info/demo/jplayer/

jPlayerのダウンロード
http://jplayer.org/

skinのダウンロード
https://www.onedesigns.com/freebies/custom-mediaelement-js-skin

headで読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>

script

$(document).ready(function(){
    $("#jplayer").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "music.mp3"
            });
        },
        swfPath: "js"
    });
});
</script>

ページ読み込みで自動再生

$(document).ready(function(){
    $("#jplayer").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "music.mp3"
            }).jPlayer("play");
        },
        swfPath: "js"
    });
});

7行目、.jPlayer(“play”);を足すだけで自動再生されます。

停止

$('#jplayer').jPlayer('stop');

html

<!-- 音楽再生 -->
<div id="jplayer" class="jp-jplayer"></div>

headで読み込み -skinを使う場合-

<link rel="stylesheet" href="./skin/style.css" />
<link rel="stylesheet" href="./skin/mediaelementplayer.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./lib/mediaelement.js"></script>
<script src="./lib/mediaelementplayer.js"></script>

script

jQuery(document).ready(function($) {
    $('audio,video').mediaelementplayer({
        videoWidth: '100%',
        videoHeight: '100%',
        audioWidth: '100%',
        features: ['playpause','progress','tracks','volume'],
        videoVolume: 'horizontal'
    });
});

html

<div id="audio-container">
    <audio controls preload="none" src="./LifeGoesOn.mp3"></audio>
</div>