Google Libraries API
| 固定リンク | コメント (0) | トラックバック (0)
JavaScript
[JQUERY]prettyPhotoのオプション
JQUERYを使ったLightroomクローン
prettyPhotoのオプションを説明します。
設置については
こちら
【[prettyPhoto3]ステップbyステップ【prettyPhoto3の導入】: [FORCE]】[LINK]
の
記事を参考にしてください。
GoogleMap等を設定する時はのサンプルはこちら[LINK]
サンプルのソースはこちらを使います
「prettyPhoto.html.txt」をダウンロード
■窓の形状
light_square
[LINK]
「prettyPhoto.light_square.html.txt」をダウンロード
light_rounded
[LINK]
「prettyPhoto.light_rounded.html.txt」をダウンロード
facebook
[LINK]
「prettyPhoto.facebook.html.txt」をダウンロード
dark_square
[LINK]
「prettyphoto. dark_square.html.txt」をダウンロード
dark_rounded
[LINK]
「prettyPhoto.dark_rounded.html.txt」をダウンロード
■複数リソースの対応
[LINK]
「prettyPhotoXXX.html.txt」をダウンロード
■開く窓のサイズ
[reflect.js2]ステップbyステップ【画像への移り込み効果】
jQuery系です。
【Reflection.js】[LINK]
の導入をステップbyステップで
【1】HTMLを用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[reflect]</title>
<style type="text/css">
html {
display: block;
}
body{
background-color: #000;
}
</style>
</head>
<body>
<div align="center">
<noscript> </noscript>
</div>
</body>
</html>
効果がわかりやすいように
背景を黒にしています。
「reflect.js.1.html.txt」をダウンロード
「reflect.js.1.html」をダウンロード
【2】画像を配置します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[reflect]</title>
<style type="text/css">
html {
display: block;
}
body{
background-color: #000;
}
</style>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img src="https://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body>
</html>
「reflect.js.2.html.txt」をダウンロード
「reflect.js.2.html」をダウンロード
【3】reflect.jsを組み込みます
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[reflect]</title>
<style type="text/css">
html {
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img class="reflect rheight50 ropacity30" src="https://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body>
</html>
「reflect.js.3.html.txt」をダウンロード
「reflect.js.3.html」をダウンロード
【4】imgタグにclass指定します。
形式は
class="reflect rheight50ropacity30"
となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[reflect]</title>
<style type="text/css">
html {
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img class="reflect rheight50 ropacity30" src="https://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body>
</html>
「reflect.js.4.html.txt」をダウンロード
「reflect.js.4.html」をダウンロード
【5】マウスイベントを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[reflect]</title>
<style type="text/css">
html {
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img onmouseover="Reflection.add(this, { opacity: 2/3 });" onmouseout="Reflection.add(this, { opacity: 1/3 });" class="reflect rheight50 ropacity30" src="https://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body>
</html>
「reflect.js.5.html.txt」をダウンロード
「reflect.js.5.html」をダウンロード
【6】クリックイベントを追加する事もできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>[reflect]</title>
<style type="text/css">
html {
display: block;
}
body{
background-color: #000;
}
</style>
<script type="text/javascript" src="http://force4uip.appspot.com/reflect/reflection.js"></script>
</head>
<body>
<div align="center">
<noscript> </noscript>
<img onclick="Reflection.add(this, { height: 1/3, opacity: 2/3 });" class="reflect rheight50 ropacity30" src="https://force4u.cocolog-nifty.com/skywalker/prettyPhotoSomethingBlue/Images/7.jpg" />
</div>
</body>
</html>
「reflect.js.6.html.txt」をダウンロード
「reflect.js.6.html」をダウンロード
classで指定するオプションは以下
とても簡単に
クロスブラウザ環境で移り込みを再現できます
便利ですね。
写真を多く見せるサイトではカッコいいですね
画像が変わる場合等や
画像の点数が多い場合は有効です
が
１ケ２ケで固定な画像なら
PNG24で透過画像を作る方がセオリーだろうなぁ
[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]IPアドレスを取得する。
Google App Engineを使った[LINK]
方法が
あるようです。
JSONを使って
簡単なPythonプログラムを使ってIPアドレスを取得
出来ます。
jsonipの解説ページはこちら[LINK]
Python scriptプログラムソース
に
ついてはこちら[github]で見る事が出来ます。
HTMLからの呼び出し方法についてはこちら[LINK]
か
こちら[github]で
見る事が出来ます。
とても簡単な１７行のプログラムです。
それを
JSON形式で
Content-Type: application/javascriptにして
渡す
ダケのシンプルな物です
ビギナー向きにはピッタリですね。
一時期、ちょっと前なら
SSI使っていましたが、昨今便利な世の中で
JSON使ってアクセスしている利用者のIPアドレスを取得する事が出来ます。
jsonip.appspot.com
を使います。
『http://jsonip.appspot.com/』のリクエスト
に対して
IPアドレスを返してきます。
callbackのオプションを使います。
『http://jsonip.appspot.com/?callback=getip』
『callback』オプションを付ける事で
戻り値を変数として格納？出来るのかな？
そのようですね。
callbackオプションで指定した『ID』（この場合はgetipやgetaddress)
にIPアドレスが格納されます。
サンプルはこちら[LINK]
HTMLソースはこちら[LINK]
JSONP入門[LINK]や
JSONPの守り方[LINK]を
読む限り
http://jsonip.appspot.com/をそのまま利用するより
自前で用意した方が
セキュリティ上も好ましいようです。
appspot.comの一般的なアプリケーションは
作者がいるわけで
その作者がまぁ悪い人ではないでしょうが
悪意のあるコードを埋め込んだと『したら』
そのコードを利用している人
はもちろん
サイトで使っているなら
サイトに訪れた人を危険にさらす事になりますね。
大きいプロジェクトになったいる
appspot.comのアプリケーションは
まぁ
大丈夫だと思いますが
気を付けたいですね。
そんな訳で
簡単なので
自分用にも作ってみた
[http://force4uip.appspot.com/]
geoiptoolとかも[LINK]
同様の仕組みですね
今でもjavascriptのみでIPアドレスを取得するには
ブラウザに依存したりしていますが
一般的にjavascriptではIPアドレスを取得出来ない
って事になるのかな？
でも
今回紹介したように
新しいテクニックや技術がどんどん出てきますので
WEB上で検索した結果だけを鵜呑みにして
信じるのは危険ですね
実際ウィキペディアに関しても
更新されていない項目なんかは
内容が間違っているのを良く見かけます。
（当時はそれで良かったが今は違うでしょみたいな）
まずは
手軽ですのでWEB検索するのは良いとして
その情報が本当なのか（今も）
は
考える必要がありますね
その他のカテゴリー
Accessibility AccessibilityCheck AccessibilityForm AccessibilityInDesign AccessibilityPDF Acrobat Acrobat Action Acrobat Annotation Acrobat AppleScripts Acrobat Character Acrobat Layer Acrobat PDF Embed API Acrobat PDF Form Print Acrobat Plug-ins Acrobat Portfolios Acrobat Print AcrobatBarcode AcrobatDialog AcrobatForm AcrobatJS AcrobatMenu AcrobatPDF AcrobatStamp AcrobatYouTube AddressBook Adobe Adobe InDesign Adobe Photoshop AdobeAppleScript AdobeBridge AdobeIllustrator AdobeJSX aed Alfresco Android AnimationGif Apple Apple Support AppleScript AppleScriptBasics AppleScriptCharacter AppleScriptColor AppleScriptDroplet AppleScriptErrorNum AppleScriptFolder AppleScriptFontBook AppleScriptRename AppleScriptTools AppleSymbols Applications Barcode Barcode2D BarcodePostal BetterHTMLExport Book BOX Browser buzz Certificates CharacterEntity CharacterSets Colors Cool Site CSS Cutting DecoMail DecorationMail Design Desktop Diff DJ dmg DNS Documents Download DTP eBook Editer eMail Envelopes ExifTool Facebook FFmpeg File System Fonts FontsTool FontsWeb FOOD FormPrint ftp Gadget Gif Animation Google Google Chrome Enterprise HexEditor HTML info iPhoto ISBN ISO iTunes iWork iWorkNumbers iWorkNumbersCalendar iWorkNumbersTimecard iWorkPages JavaScript JeditX JeditX Regexp JeditXAppleScript JIS jquery Letterpress Library logo Mac Admin Mac Archiver Mac Browser Mac Browser Plugin Mac QuickLook Mac Setup Mac Spotlight Mac Video Map Memo Microsoft Teams Mobby mobileconfig Moto Movies Music Network Basic ntp OCR Office OfficePowerPoint OSX Paint Pantone Paper PDFlib Permission Photo Pictograms Print Public Python QuickLook QuickTime QuickTimeSetting QuickTimeSound Real Media ReName ResourceFork ruby Sample Screen ScreenCast Search Security SEO Sharing SLAResource Sound Spotlight Stamp SWF TCC.db Tutorial PSD TV Twitter Typography Unicode Utilities Video WEB APP WebFont Wedding Windows WindowsMedia XML XMP XPS YouTube YouTube Rss
[RSS]
