月別アーカイブ: 2014年9月

jQuery Lightbox2で画像拡大

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

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で音楽再生

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

Custom-Audio-Player-Skin-PSD

デモはこちら
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>