ウェブマスターがウェブのことを書いたらMENUお問い合わせフォームこのブログについてウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。javascriptlightbox系のプラグイン、jQueryで利用するJavaScriptライブラリ「prettyPhoto」の使い方、設定のまとめ。prettyPhotoは画像拡大表示のほかに、動画の拡大表示にも対応しています。Youtube、Quicktime、FLASH、VIDEOファイルなどをおしゃれに拡大表示することができます。ページ内の画像をグループ化することで自動再生スライドショーも可能。サンプルデモ必要なファイルは以下URLのダウンロードよりhttp://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/prettyPhotoの設定方法jQueryとprettyPhotoよりダウンロードしたprettyPhoto.jsとprettyPhoto.cssをヘッダで読み込む。type="text/javascript">$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto();});</script>拡大させたい画像のimgタグにaタグを追記し、拡大用画像を指定します。rel属性に「prettyPhoto」と指定します。/></a>ギャラリーとして複数画像をグループ化させる場合はprettyPhoto[gallery1]と指定。gallery1の箇所は任意に指定。自動スライドショー表示させることができます。/></a>aタグのtitle属性に画像のキャプションを指定すると拡大表示時に画像下部分に表示されます。imgタグのalt属性を記述すると拡大後の画像上部分に表示されます。prettyPhotoのカスタマイズ(ソーシャルボタンの非表示)上記デフォルト設定のままでは、ツイッター、facebookのソーシャルボタンがデフォルトで表示されています。表示させたくない場合はjquery.prettyPhoto.jsに修正が必要になります。(v3.1.4時点)jquery.prettyPhoto.jsの34行目あたりの以下のコードを削除します。prettyPhotoのカスタマイズ(ハッシュタグを消す)デフォルト設定ではprettyPhotoを設定した画像をクリックした時にURLに「#prettyPhoto」が付与されます。これを表示させたくない場合もjquery.prettyPhoto.jsに修正が必要になります。jquery.prettyPhoto.jsのおわりの方、82行目あたり、以下のコード部分をコメントアウトします。PMモーダルウィンドウの設定方法がとても丁寧で、簡潔に説明されていてとても参考になりました、ありがとうございます。いい感じで進んでるはずが、コード通りにしたにも関わらず、なぜか、[×]closeボタンがでてこず、ギャラリーにした際[▼▲]FWDボタンが表示されません。prettyPhoto.csjquery-1.6.1.min.jsquery.prettyPhoto.js以外に何かファイルが必要でしょうか?それとも、何か思い当たることがありましたら、教えてください。お忙しいとは思いますが、よろしくお願いをいたします。PMちょっと状況はわかっておりませんが、必要なファイルはcssとjsの2つのみで、head内でスクリプトの記述のみです。動作はしているようですので、どこかの設定か記述ミスのような気がします。AM↑おそらく画像をアップしてないのではないでしょうか?DLしたimagesフォルダの設定されているテーマの画像をアップしないとボタンやら表示できないとおもいます。PMCSS内でボタンの設定をbackground:url(../images/prettyPhoto/default/sprite.png)としているからでしょう。本元のサイトのデモを立ち上げ、Chromeで右クリックしてbackgroundimageを表示してダウンロード(sprite.png/sprite_next.png/sprite_prev.png/sprite_x.png/sprite_y.pngくらい)面倒くさいのでCSSをいじらずに同階層にイメージを掘り込めばある程度表示するようです。コメントをキャンセルメールアドレスが公開されることはありません。」といわれるスポンサードリンク管理人が使っている安定の「Xサーバー」Xサーバー、さくら、ロリポップの比較記事はこちらこのブログを書いている人ネット系の企業で自社サービスのWEBマスターをしています。サイトの開発、運営をメインに書いています。