YouTubeなど一通り対応したLightBox風プラグイン「PrettyPhoto」

前回紹介した「jQuery Lightbox Evolution」ほどではないですが無料でYouTubeやイメージギャラリー、インラインフレームで要素やWEBサイトが、その場で開けます。アニメーションもスムーズ、テーマが6個もある太っ腹。さらに営利目的でもOKなんですって。オススメの1品です（笑）

PrettyPhotoで何ができるの？

PrettyPhotoはモーダルウィンドウというjQueryを利用したプラグインです。モーダルウィンドウとは警告とかダイアログを手前に表示するウィンドウのことかな？たぶん、といってもJavaScriptでは同じウィンドウまたはタブ内でページを切り替えずに要素を開くものを示すようです。代表作としてはLightBoxというイメージギャラリーです。PrettyPhotoはそれの派生にあたるもので、
「イメージの表示」
「イメージのギャラリー形式で表示」
「ギャラリーのスライドショー」
「Flashコンテンツの表示」
「YouTubeの再生」
「Vimeoの再生」
「QuickTimeの再生」
「WEBサイトの表示」
「要素の表示」
などができます。結構多機能な方です。またテーマが6種類あります。
ダウンロード先でデモが見れます。また私のサブブログ「本棚のススメ」に導入しましたので良かったら見てください。

DLして必要な物を揃えましょう

ダウンロード

ダウンロードしたら解凍し中から以下の必要なデータを一カ所にまとめてください。

prettyPhoto_uncompressed_3.1.2/js/jquery-1.4.4.min.js
prettyPhoto_uncompressed_3.1.2/js/jquery.prettyPhoto.js
prettyPhoto_uncompressed_3.1.2/css/prettyPhoto.css
prettyPhoto_uncompressed_3.1.2/images/prettyPhotoフォルダ

jquery.prettyPhoto.jsの入らない部分を消します

social_tools: '<div class="pp_social"><div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href='+location.href+'&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div></div>'; /* html or false to disable */

89行目（前の方です）ソーシャルボタンがうまく動作しないので消しましょう。

prettyPhoto.css入らない部分を消して画像のリンクを書き換えます

まずダウンロード先の下「Theme Support」でどのテーマを使うか決めてください。決めたらprettyPhoto.cssを開き必要なテーマの部分だけ残して後はすべて消してください。私はFacebookのテーマにしたので以下のソースだけ残して後はすべて消しました。（長いので出だしだけ書きます。）

    /* ----------------------------------
        Facebook style Theme
    ----------------------------------- */
    
    div.facebook .pp_top .pp_left { background: url(../images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat; } /* Top left corner */
    div.facebook .pp_top .pp_middle { background: url(../images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x; } /* Top pattern/color */
    div.facebook .pp_top .pp_right { background: url(../images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat; } /* Top right corner */
    
    div.facebook .pp_content .ppt { color: #000; }
 
以下省略

prettyPhotoフォルダにテーマごとのフォルダがあります。選んだテーマのフォルダにあるイメージをすべて「マイページ>ブログを書く>画像フォルダ」にアップロードします。「画像フォルダ」でアップロードしたイメージをクリックすると下図のようなウィンドウが出るので、イメージの上で右クリック>画像のURLをコピー(ブラウザごとに違うかもしれません）します。これをCSSの対応する部分、上のソースでいう赤字部分を消して貼付けてください。地道な作業になりますが頑張ってください。

書き換えたprettyPhoto.cssをアメブロのCSSに貼付けよう

「マイページ>ブログを書く>デザインの変更>CSSの編集」、あなたのブログのCSSの一番後ろに「書き換えたprettyPhoto.css」の中身をコピー＆ペーストしましょう。
（*私の環境では外部CSSの読み込みがうまくいきませんでした。もしアメブロでCSSの外部リンクできたよって方いましたらコメください。お願いします。）

書き換えたjsデータをGoogle Codeにアップロードしましょう

jsファイルはGoogle Codeにアップロードします。旧ブログの「こちらの記事」を参考にしてください。後日、こちらのブログで清書しますのでしばらくは旧ブログでお願いします。

詳細

商用利用も可

PrettyPhotoの記述方法

基本リンクに「rel="prettyPhoto"」を追加するだけです。
写真だろうが動画だろうがWEBサイトだろうが基本全部一緒です。
ギャラリーは「rel="prettyPhoto[任意の名前]"」同一名をギャラリーにしてくれます。サイズ指定は「?iframe=true&width=853&height=510」をURLの後に付け足せばOK。WEBサイトなら「?iframe=true&width=100%&height=100%」としとけばブラウザのサイズに調整してくれます。
リンクボタンはテキストでも可能です。テキストの場合は上部のタイトルが表示されません。

<a href="★URL★" rel="prettyPhoto" title="説明" target="_blank"><img src="リンク画像" alt="リンクタイトル" /></a>

<a href="★URL★" rel="prettyPhoto" title="説明" target="_blank">リンク</a>

詳細

ブラウザのサイズに自動調整

ブログ画像一覧を見る

このブログをフォローする

アメブロカスタマイズに学ぶHTML&CSS

アメブロのカスタマイズを通してHTML&CSSの勉強をしています。