ウェブ学のすすめ

Study of Web Design & Programing

Flashもiframeも動画もlightboxにできる！jQueryプラグイン「prettyPhoto」の使い方

jQuery



ポートフォリオサイトでも使用したjQueryプラグイン「prettyPhoto」をいろいろ試してみました。このプラグインは写真の他にFlashやiframe、動画もlightboxにすることができます。

デモ

↓別ウィンドウを開いて見る
prettyPhotoの使い方｜YoutubeもFlashもLightbox化 - js do it

↓QRコード

※おすすめQRコード読み取りアプリ

最速QR
カテゴリ: ユーティリティ
サイズ: 1.5 MB
価格： 無料

使い方

公式サイトからダウンロードします。

jQuery lightbox for images, videos, YouTube, iframes, ajax | St〓phane Caron – No Margin For Errors

prettyPhoto.cssとjquery.prettyPhoto.jsをhead内に指定
<link rel="stylesheet" href="http://webgaku.biz/css/prettyPhoto.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://webgaku.biz/js/jquery.prettyPhoto.js"></script>
HTML

class名やrelにprettyPhotoを指定します。
グループ化するには「rel='prettyPhoto[キー]'」のように記述します。

<a href="01.jpg" title="説明" class="prettyPhoto">
  <img src="thumb01.jpg" alt="タイトル">
</a>
JavaScript

relにprettyPhotoを指定した場合

$(document).ready(function(){ 
  $("a[rel^='prettyPhoto']").prettyPhoto(); 
});
指定できるオプション

※[]内はデフォルト

  • animationSpeed：アニメーションのスピード fast/slow/normal[normal]
  • opacity：透明度 0から1を指定[0.80]
  • showTitle：タイトルを表示するか boolean[true]
  • allowresize:リサイズ可能か boolean[true]
  • default_width:デフォルトの幅[500]
  • default_height:デフォルトの高さ[344]
  • theme:テーマ light_rounded / dark_rounded / light_square / dark_square / facebook[light_rounded]
  • hideflash:flashオブジェクトを隠すか boolean[false]
  • autoplay:ビデオを自動再生するか boolean[true]
  • modal:closeボタンだけがprettyPhotoを閉じることが可能か boolean[false]
サイズの指定

パスに続き

width=80%&amp;height=80%

のように指定する。

コード

HTML
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width"> 
        <title>prettyPhotpo</title>
        <link rel="stylesheet" href="http://webgaku.biz/css/prettyPhoto.css">
        <link href='http://fonts.googleapis.com/css?family=Lemon' rel='stylesheet'>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://webgaku.biz/js/jquery.prettyPhoto.js"></script>
    </head>
    <body>
        <div id="container">
            <h1>prettyPhotpo</h1>
                <ul class="gallery">
                    <li><a href="http://jsrun.it/vinton/1omQ?iframe=true&width=80%&amp;height=80%" rel="prettyPhoto[iframe]" title="<p>a要素のtitle属性がここに表示されます。HTMLタグも使うことができます。</p><p style='margin-top:10px;'>※例：<em>強調</em>のemタグを記述した場合</p>" ><img src="http://capture.heartrails.com/200x150/?http://jsrun.it/vinton/1omQ" alt="imgのaltがここに表示されます。" width="200" height="150"></a></li>
                    <li><a href="http://u.jimdo.com/www35/o/sfb9521c98ad02c47/flash/m390e2469841f8d12/1341919687/flash.swf?width=80%&amp;height=80%" rel="prettyPhoto[flash]" title="FlashがLightbox上で実際に動きます。"><img src="http://jsrun.it/assets/a/9/k/7/a9k7L.jpg" width="200" height="150" alt="Flashが動作しているデモ"></a></li>
                    <li><a href="http://youtu.be/MTchMn7MhS0?rel=0?width=80%&amp;height=80%" rel="prettyPhoto" title="YouTubeもLightbox上で表示されます。"><img src="http://i.ytimg.com/vi/MTchMn7MhS0/default.jpg" width="200" height="150"  alt="動画が動作しているデモ"></a></li>
                </ul>
    	</div>
    </body>
</html>
CSS
body {
    background: #563C55 url(http://jsrun.it/assets/n/e/4/V/ne4Vm.jpg) no-repeat center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;   
}

#container {
    width:760px;
    margin:0 auto;
    text-align:center;
}

h1 {
    color:#fff;
    text-shadow:0 0 5px rgba(255,255,255,0.6);
    font-family: 'Lemon', cursive;
    margin:100px 0;
}

ul {
    list-style-type:none;
}
li {
    float:left;
    width:200px;
    margin:20px;
}
li a:hover {
    opacity:0.6;
}

img {
    box-shadow: 2px 2px 10px rgba(255,255,255,0.6);
}

.pp_description {
    margin:20px 0;
}

a.pp_close {
    top: 70%;
}
.pp_social {
	width: 500px;
}
.pp_social .facebook {
    width: 75px;
	overflow: visible;
}

@media only screen and (max-width:480px) {
    #container {
		width:320px;
        padding-bottom:50px;
	}
    h1 {
        margin:50px 0;
    }
    li {
        float:none;
    }
    
}
JavaScript
$(document).ready(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto({
		animation_speed:'normal',
        theme:'light_square',
        slideshow:3000, 
        autoplay_slideshow: false
    });
});