Royal PrettyPhotoでデフォルトサイズの変更をする方法。


先日紹介したWordpressプラグインのRoyal PrettyPhotoにてデフォルトのポップアップのサイズを変更する方法。

jQueryプラグインprettyPhotoのURL末尾#prettyPhotoを消す方法

jQueryプラグインPrettyPhotoを気軽に導入できる当プラグインですが、YoutubeビデオやVimeoからのギャラリーを表示するにはデフォルトの設定では少し物足りない大きさです。

<a>タグのURLの末尾にwidthとheightを入力する方法がよく紹介されていますが、その方法だとレスポンシブなデザインに対応できないのでいっその事デフォルトサイズを変更するとDOMサイズを変更してもレスポンシブに対応してくれます。

オリジナルのPrettyPhotoプラグイン(jQueryプラグインの場合)

jQueryのパッケージの場合はjsフォルダに格納されているjquery.prettyPhoto.jsのスクリプト内を以下のように変更すればOKです。

ファイルはミニマイズされているので【default_width】等で文字列検索をかけて見つけましょう。

Royal PrettyPhoto(Wordpressプラグインの場合)

Royal PrettyPhotoの場合も基本は同じですが、ファイルの場所がプラグイン内部になるのでFTP経由でプラグインのファイル(plugin/rt-prettyphoto/js/jquery.prettyPhoto.js)をダウンロードしたものを編集、

又は管理画面の「プラグイン→インストール済みのプラグイン→編集→rt-prettyphoto/js/jquery.prettyPhoto.js」から編集しましょう。

プラグイン

default_widthとheightの場所を見つけたら方法は上記と同じです。

しかしプラグインの場合はプラグインの更新によりファイルが書き換えられる場合があるのでプラグインの更新を行ったら変更されていないかチェックする必要があります。

あまりお勧めはしませんが、プラグインの更新通知自体を消す方法も以下のブログにて紹介されています。

WORDPRESSBLOG:WordPress 本体やプラグイン、テーマの更新通知を非表示にする方法

WPプラグイン化されたjQueryのプラグインのファイル構成は殆どの場合オリジナルとあまり変わらないのでマニュアル等が見つかりにくい場合はオリジナルのマニュアルをあたってみましょう。