[prettyPhoto3]ステップbyステップ【prettyPhoto3の導入】
prettyPhoto3
【jQuery lightbox for images, videos, YouTube, iframes Stéphane Caron – No Margin For Errors】[LINK]
を
WEBページに埋め込む方法の
ステップByステップ
【1】HTMLを用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[prettyPhoto3]sample01</title>
</head>
<body>
<div>
<noscript> </noscript>
</div>
</body>
</html>
「sample_01.html.txt」をダウンロード
【2】CSSスタイルシートを組み込みます
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[prettyPhoto3]StepByStepSample02</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
</head>
<body>
<div>
<noscript> </noscript>
</div>
</body>
</html>
【3】Jqueryを組み込みます
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[prettyPhoto3]StepByStepSample03</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
</head>
<body>
<div>
<noscript> </noscript>
</div>
</body>
</html>
【4】prettyPhoto3を組み込みます
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[prettyPhoto3]StepByStepSample04</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
</div>
</body>
</html>
【5】終了bodyタグの前にprettyPhotoの呼び出し部を付け加えます
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[prettyPhoto3]StepByStepSample05</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'});
});
</script>
</body>
</html>
【6】リンクを作る所にDIVタグを指定します。
この時のクラスは『gallery clearfix』です。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[prettyPhoto3]StepByStepSample06</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
<div align="center" class="gallery clearfix">
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'});
});
</script>
</body>
</html>
「sample_06.html.txt」をダウンロード
【7】リンク行を作ります
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[prettyPhoto3]StepByStepSample07</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
<div align="center" class="gallery clearfix">
<a href="http://www.youtube.com/watch?v=Sy3LPj4Ea_M" title="YouTubeLink"><img border="0" alt="YouTube" src="http://i3.ytimg.com/vi/Sy3LPj4Ea_M/hqdefault.jpg" class="shadow" hspace="5" vspace="5"></a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'});
});
</script>
</body>
</html>
【8】rel内にprettyPhotoの変数を指定します。
prettyPhoto
prettyPhoto[XXXXX]
prettyPhoto[movie]
prettyPhoto[unusual]
prettyPhoto[iframe]
prettyPhoto[inline]
prettyPhoto[mixed]
prettyPhoto[custom]
等があります。
今回はiframeを使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[prettyPhoto3]StepByStepSample08</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
<div align="center" class="gallery clearfix">
<a href="http://www.youtube.com/watch?v=Sy3LPj4Ea_M&hd=1&fs=1&showsearch=0" rel="prettyPhoto[iframe]" title="YouTubeLink"><img border="0" alt="YouTube" src="http://i3.ytimg.com/vi/Sy3LPj4Ea_M/hqdefault.jpg" class="shadow" hspace="5" vspace="5"></a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'});
});
</script>
</body>
</html>
【9】開くウィンドウの大きさや種類を指定します。
種類は
dark_rounded
dark_square
facebook
light_rounded
light_square
があります。
開く大きさは
width=XXX&height=XXX
で指定できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[prettyPhoto3]StepByStepSample09</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
<div align="center" class="gallery clearfix">
<a href="http://www.youtube.com/watch?v=Sy3LPj4Ea_M&hd=1&fs=1&showsearch=0&width=853&height=504" rel="prettyPhoto[iframe]" title="YouTubeLink"><img border="0" alt="YouTube" src="http://i3.ytimg.com/vi/Sy3LPj4Ea_M/hqdefault.jpg" class="shadow" hspace="5" vspace="5"></a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'light_square'});
});
</script>
</body>
</html>
light_square[LINK]
light_rounded[LINK]
facebook[LINK]
dark_square[LINK]
dark_rounded[LINK]
【10】表示されるメッセージを加えます
img 内のalt属性がウィンドの外
a 内のtitle属性がウインド内
に表示されるメッセージになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[prettyPhoto3]StepByStepSample12</title>
<link rel="stylesheet" href="http://force4uip.appspot.com/css/prettyPhoto.css" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">google.load("jquery", "1.3.2");</script>
<script src="http://force4uip.appspot.com/prettyPhoto/jquery.prettyPhoto.3.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<noscript> </noscript>
<div align="center" class="gallery clearfix">
<a href="http://www.youtube.com/watch?v=Sy3LPj4Ea_M&hd=1&fs=1&showsearch=0&width=853&height=504" rel="prettyPhoto[iframe]" title="ウィンドウ内に表示されるメッセージ"><img border="0" alt="ウィンド外に表示されるメッセージ" src="http://i3.ytimg.com/vi/Sy3LPj4Ea_M/hqdefault.jpg" class="shadow" hspace="5" vspace="5"></a>
</div</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_square'});
});
</script>
</body>
</html>
「sample_13.html」をダウンロード
他にもオプションの使い方等
色々ありますので
試してみたいですね。
追記
prettyPhoto3はリクエストされたURLを検索して
if (itemSrc.match(/youtube\.com\/watch/i)) {
return 'youtube';
}else if (itemSrc.match(/vimeo\.com/i)) {
return 'vimeo';
}else if(itemSrc.indexOf('.mov') != -1){
return 'quicktime';
}else if(itemSrc.indexOf('.swf') != -1){
return 'flash';
}else if(itemSrc.indexOf('iframe') != -1){
return 'iframe';
}else if(itemSrc.indexOf('custom') != -1){
return 'custom';
}else if(itemSrc.substr(0,1) == '#'){
return 'inline';
}else{
return 'image';
};
};
それぞれのファンクションに分岐します
他オプションの種類は
こちら
【[JQUERY]prettyPhotoのオプション: [FORCE]】[LINK]
の記事にも書いています。
| 固定リンク
「JavaScript」カテゴリの記事
- Google Libraries API(2011.02.02)
- [JQUERY]prettyPhotoのオプション(2010.11.01)
- [reflect.js2]ステップbyステップ【画像への移り込み効果】(2010.09.30)
- [prettyPhoto3]ステップbyステップ【prettyPhoto3の導入】(2010.09.27)
- [javascript]IPアドレスを取得する。(2010.06.26)
この記事へのコメントは終了しました。
[RSS]
コメント