画像も動画も拡大表示できるLightbox系スクリプト prettyPhoto の使い方



RW5.x検証済み
このエントリの内容は RapidWeaver 5.x を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
動画を拡大表示して再生させたいので prettyPhoto を導入してみました。

ファイルをダウンロード

まずは必要なファイルをダウンロードします。Download のところの一番左側、Production Version のボタンをクリックしてファイルをダウンロードします。
ハイライトされた部分です。


必要なファイルをテーマにコピー

幾つかのファイルやフォルダをテーマに組込みます。

JavaScriptファイルをコピーする

prettyPhoto_compressed_3.1.2/js/jquery-1.4.4.min.js
prettyPhoto_compressed_3.1.2/js/jquery.prettyPhoto.js



カスタマイズするテーマのパッケージを開き…

任意のTheme/contents/js/

の中にコピーします。フォルダが無い場合は新たに作成してください。(他のフォルダ名でスクリプトファイルが格納されている場合はその場所でも構いません)

CSSファイルをコピーする

prettyPhoto_compressed_3.1.2/css/prettyPhoto.css



任意のTheme/contents/css/

の中にコピーします。フォルダが無い場合は新たに作成してください。(他のフォルダ名で CSSファイルが格納されている場合はその場所でも構いません)

imagesフォルダをコピーする

prettyPhoto_compressed_3.1.2/images/prettyPhoto/



任意のTheme/contents/images/

の中にコピーします。フォルダが無い場合は新たに作成してください。(images という名前以外のフォルダだと CSS を書き直さなければいけないので images という名前のフォルダの方が作業が簡単です)

Theme.plist をカスタマイズ

cssフォルダや jsフォルダ、imagesフォルダが無い場合は、Theme.plist をテキストエディタなどで開いて、下記の部分を追加してください。既にテーマにフォルダが存在する場合はこの項は必要ないので読み飛ばしてください。
RWCopyFiles

	css
	your_folder
	images
	fancybox
	js
	styles.css
	colourtag.css
	print.css
	handheld.css
	javascript.js
	jquery-1.4.4.min.js



index.html をカスタマイズ

contentsフォルダの中の index.html を開いて以下の部分に 追加したファイルへのパスを書き込みます。今回は%user_javascript%の上辺りに以下のコードを追加しました。便宜上、% を * に置き換えています。
<script type="text/javascript" src="*pathto(jquery-1.4.4.min.js)*"></script><!-- prettyPhoto -->
<script type="text/javascript" src="*pathto(jquery.prettyPhoto.js)*"></script><!-- prettyPhoto -->

CSSファイルへのパスは %
user_header% の下辺りに追加しました。この辺は使っているテーマによって変わるかもしれませんが、ファイルの種類によって近いところに追加すれば特に問題は起こらないと思います。
<link rel="stylesheet" type="text/css" media="screen" href="*pathto(prettyPhoto.css)*"  /><!-- prettyPhoto -->

後は以下のコードをheadかbodyのどちらかの中に追加します。テーマを変更したい場合は
.prettyPhoto() の部分にを .prettyPhoto({theme:'dark_rounded'}) のようにしてテーマのフォルダ名(images/prettyPhoto の中にあります)を追加してください。何も書かないとデフォルトのテーマが適用されます。テーマについては以下のリンクを参照してください。
Dark rounded
Dark square
Light rounded
Light square
facebook

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>


prettyPhoto を起動させる

基本的には、リンクタグに rel="prettyPhoto" を追加するだけです。以下はサンプルコード。
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" /></a>

複数の画像などを1グループにする場合は、rel="prettyPhoto[グループ名]"とします。
<a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]" title="You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a>

画像以外のコンテンツを表示したい場合は以下のリンクの Demo のところを参考にしてください。(サンプルコードなどが見られます)
jQuery lightbox for images, videos, YouTube, iframes, ajax | Stéphane Caron – No Margin For Errors


ラピッドウィーバーのリンクを追加ボタンを利用する

RapidWeaver には、ブログなどのスタイル付きテキストページだと「リンクを追加」という機能があります。それを利用しても prettyPhoto を呼び出す事ができます。
リンクを追加の属性を利用します。


Twitter と FaceBook のアイコンを消す

拡大画面の左下に表示される Twitter と FaceBook のアイコンを消すには jquery.prettyPhoto.jssocial_tools: ' に続く次のコードを削除します。( '},pp_settings); の手前まで)
<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>


参考リンク

jQueryで角丸なLightBoxクローンprettyPhoto | AirNX 開発者ブログ
無題メモランダム: 画像もYouTubeもカッコよく表示出来るjQuery prettyPhotoがいい感じ
-nanairo*moyou-: prettyPhoto 3.0
1日一枚くらいは絵を描いてあげようかなとかそんな感じ | サイト用メモ。
RapidWeaver User Forum | Pretty Photo
blog comments powered by Disqus