jquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説

jquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説. prettyPhoto の紹介

PrettyPhoto は、jquery をベースにした軽量のライトボックス画像再生プラグインです。画像だけでなく、ビデオ、Flash、YouTube、iframe、ajax もサポートしています。さらに、prettyPhoto は設定と使用が非常に簡単で、拡張性が高く、最大限にカスタマイズできます。現在、prettyPhoto は、わかりにくい IE6 を含むほとんどの主流ブラウザと互換性があります。

PrettyPhoto プラグイン プロジェクトのアドレス: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

英語が得意な友達は、このプラグインの使い方を直接公式サイトにアクセスして学ぶことをお勧めします。英語が苦手な方でも、prettyPhoto の使い方を jquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説 つずつ紹介しますので、ご安心ください。 。

2. prettyPhoto の使い方の紹介

jquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説. jqueryコアライブラリ、prettyPhotoプラグインライブラリ、prettyPhotoスタイルシートファイルを導入します

コードをコピーします コードは次のとおりです:

2. jquery プラグインを初期化します。以下は最も単純な構成の js コードです。

コードをコピーします コードは次のとおりです:

$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});

各タイプの HTML コードは次のとおりです

jquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説. 単一の写真

コードをコピーします コードは次のとおりです:

2. ピクチャーアルバム

コードをコピーします コードは次のとおりです:

コードをコピーします コードは次のとおりです:

" rel="prettyPhoto[flash]" title="Flash jquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説0 デモ">

4. YouTube 動画

コードをコピーします コードは次のとおりです:

http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">

5、Vimeo

コードをコピーします コードは次のとおりです:

http://vimeo.com/8245346" rel="prettyPhoto" title=""> /a>

6. クイックタイムビデオ

コードをコピーします コードは次のとおりです:

http://trailers.apple.com/movies/universal/despicableme/despicableme-tlrjquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説_r640s.mov?width=640&height=360 "> http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlrjquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説_r640s.mov?width=640&height= 340"> a>a title="グリース シング ア ロング" rel="prettyPhoto[映画]" href="http://trailers.apple.com/movies/paramount/greasesingalong/greasesingalong-tlrjquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説_r640s.mov ?width=640&height=272">

7. 外部ウェブサイト (iframe)

コードをコピーします コードは次のとおりです:

http://www.google.com?iframe=true&width=jquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説00%&height=jquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説00%"
rel="prettyPhoto[iframes]" title="Google.com が jquery画像再生プラグイン prettyPhoto_jquery の使い方を詳しく解説00% でオープンしました">Google.com
http://www.apple.com?iframe=true&width=500&height=250" rel="prettyPhoto[iframes]">Apple.com
http://www.twitter.com?iframe=true&width=400&height=200" rel="prettyPhoto[iframes]">Twitter.com

8. 通常のテキスト

コードをコピーします コードは次のとおりです:

これは通常のテキストです

今日紹介する prettyPhoto を気に入っていただければ幸いです。これは通常のテキストを再生する HTML です

9. AJAX コンテンツ

コードをコピーします コードは次のとおりです:

Ajax コンテンツ

3. 概要

prettyBox 画像プレーヤー プラグインは非常に便利です。自分だけの特別なフォト アルバムを作成するために使用してください。