急に、IE で見ている時に、loading.gif が消える際に背景が黒い四角で残るように なったので、「IE が勝手にバグ発生?」とか思ったのですが、Microsoft に腹を立 てても問題は解決しないので、loading.gif の背景を透過にすれば改善されるはず だと思って、調べてみると、loading 時の GIF を作成してくれるサイトがありまし た。 Ajaxload - Ajax loading gif generatorサイズは、24x24 なので、Indicator lite でぴったりです。これを Shdowbox の loading.gif に置き換えるだけでうまくいきます。 --------------------------------------------------------- 「他に無いかな・・・」 と探してみたらなんだかそっくりのがあったのですが、こちらはスピードを指定 できます。そのかわり画像サイズが右クリックで解らないので ダウンロードリン クがただの画像リンクなのでそちらで見ます。 Web Script Lab ≫ Ajax Loading Gif Generator
|
|
2010年12月19日
Shadowbox.js 3.0.3 の loading.gif の変更
2010年11月22日
Shadowbox.js 3.0.3 の正統な使い方 〜 flv 動画を表示する
Shdowbox では、パッケージに JW Player の 4.5 が同梱されています。ですから、 flashVars のパラメータは、Setup Wizard | LongTail Video | Home of the JW Player を参照して下さい。 一般的には、autoplayMovies を false にした時に表示する画像として image が 必要になり、その画像は動画が全て終了した時も使われます。もし、比較的長い動画 で autoplayMovies を true にするのならば、addCache では無く A タグのみ で設置可能です。 ※ autoplayMovies を false にする必要がある場合は、開いても真っ黒なので画像が ※ 必要になります。その場合は addCache を使います 他の flv プレーヤーを使いたい場合は、player.swf にリネームしたファイルと交換 するだけで利用できるはずです。
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js" charset="utf-8"></script>
<a id="sbx1290242586765" href="http://lightbox.on.coocan.jp/image/8377811.flv" title="甥っ子のソーラーバッタ"><img src="http://lightbox.on.coocan.jp/image/8377811.jpg" style='border:solid 0px #000000'></a>
<script type="text/javascript">
Shadowbox.addCache(document.getElementById("sbx1290242586765"),{
player: 'flv',
width: 800,
height: 600,
autoplayMovies: false,
flashVars: {
image: 'http://lightbox.on.coocan.jp/image/8377811.jpg'
}
});
</script>
<a rel="shadowbox;width=800;height=600;" title='甥っ子のソーラーバッタ' href="http://lightbox.on.coocan.jp/image/8377811.flv"><img src="http://lightbox.on.coocan.jp/image/8377811.jpg" style='border:solid 0px #000000'></a>
addCacheHTMLのみ
(5) flv 動画を表示する
Shadowbox.js 3.0.3 で Windows Media Player を正しく使えるように、stretchToFit オプションを追加する
Windows Media Player で実装すると、wmv とか mpeg は、サイズ指定をしても その中にオリジナルサイズで表示されるだけで間抜けな表示になるので、エディ タで二ヶ所変更します。一つ目の変更前
params={autostart:opt.autoplayMovies?1:0}
params={autostart:opt.autoplayMovies?1:0,stretchToFit:1}
さらに、Firefox や Google Chrome で正しく表示するには Firefox アドオン - プラグイン | Mozilla Japan より Firefox 用 のプラグインをインストールする必要があります。また、Shadowbox が内部で 指定している mime では stretchToFit が使え無いので video/x-ms-wmv を application/x-ms-wmp に変更する必要があります バラメータの一覧は以下のページにあります (stretchToFit の適用について書かれています) PARAM Elements in an OBJECT Element (Windows) 補足情報 Embedding the Player Control in a Web Page Displayed by Firefox (Windows) Firefox では type 属性に 以下のいずれかの mime を設定する必要がありますapplication/x-ms-wmp application/asx video/x-ms-asf-plugin application/x-mplayer2 video/x-ms-asf video/x-ms-wm audio/x-ms-wma audio/x-ms-wax video/x-ms-wmv video/x-ms-wvxUsing PARAM Elements in a Web Page Displayed by Firefox (Windows) Microsoft の サンプルでは以下のようになっていますが、 object 要素の data 属性でも ファイルを指定できるようです。
<OBJECT id="Player" type="application/x-ms-wmp" width="300" height="200"> <PARAM name="url" value="c:\MediaFiles\seattle.wmv" /> <PARAM name="autostart" value="true" /> </OBJECT>
Shadowbox.js 3.0.3 の正統な使い方 (1) ダウンロード、setup メソッドで事前にギャラリーを定義 (2) YouTube の動画を表示する (3) 大きな画像を表示する(4) Windows Media Player を正しく使えるようにする
2010年11月21日
Shadowbox.js 3.0.3 の正統な使い方 〜 大きな画像を表示する
Shadowbox をブログに前もって組み込む必要の無いコードを作成するツールを用意しました。 ( lightbox.on.coocan.jp で 3.0.3 をホスティングしています ) Shdowbox は、ブラウザの表示領域をこえるような大きさの画像でも、自動的に良い程度 の大きさに変更してくれます ( オプションを指定すると、オリジナルサイズでドラッグして見る事ができます )画像用コード取得ツール
上のツールは以下のコードをブログの本文等に書くだけで、たいていは設置できると思います。
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/createShadowboxImage.js" charset="utf-8"></script>
とても大きな画像をオリジナルのままの大きさで表示してドラッグさせるには、 rel だけでは指定出来ないので、rel を書かずに JavaScript で直接登録します。
rel を使わずに、addCache でセットアップする方法
<a id="sbx1290335243203" href="http://lh5.ggpht.com/_IzfbcNjqGuE/TM6GjyQ77AI/AAAAAAAABDU/gEJkgLsyhxs/P1000776.JPG" title=""><img src="http://lh3.ggpht.com/_IzfbcNjqGuE/TM6Io8o9edI/AAAAAAAABD4/AZXCuHAhzgw/P1000776.JPG" style='border:solid 0px #000000'></a>
<script type="text/javascript">
Shadowbox.addCache(document.getElementById("sbx1290335243203"),{
title: '実際の大きさです',
handleOversize: "drag"
});
</script>
設置ツールのソースコード
if ( !window['lightboxTool'] ) {
window.lightboxTool = {};
}
if ( !window.lightboxTool.createShadowboxHtmlImage ) {
window.lightboxTool.createShadowboxHtmlImage = function ( obj ) {
var pn = obj.parentNode.parentNode.parentNode;
var ig= pn.getElementsByTagName("INPUT")[0];
var sm = pn.getElementsByTagName("INPUT")[2];
var tt = pn.getElementsByTagName("INPUT")[3];
tt.value = (tt.value).replace(/\"/g,""");
var tx = pn.getElementsByTagName("TEXTAREA")[0];
var target = pn.getElementsByTagName("DIV")[0];
var str="";
var idstr = "sbx" + (new Date()).getTime();
str+="<a id=\""+idstr+"\" href=\""+ig.value+"\" title=\""+tt.value+"\"><img src=\""+sm.value+"\" style='border:solid 0px #000000'></a>";
target.innerHTML = str;
if ( tt.value != '' ) {
Shadowbox.addCache( document.getElementById(idstr), eval( "({title:\""+tt.value+"\"})" ) );
}
else {
Shadowbox.addCache( document.getElementById(idstr), {} );
}
var str2="";
str2+="<"+"script type=\"text/javascript\" src=\"http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js\" charset=\"utf-8\"></"+"script>\n";
tx.value = str2 + str.replace("<a", "<a rel=\"shadowbox\"" );
}
}
if ( !window.lightboxTool.initShadowbox ) {
window.lightboxTool.initShadowbox = function ( ) {
Shadowbox.init();
}
}
(function() {
var str;
if ( !window.Shadowbox ) {
str="";
str+="<link rel=\"stylesheet\" type=\"text/css\" href=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.css\"> \n";
str+="<"+"script type=\"text/javascript\" src=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.js\" charset=\"utf-8\"></"+"script> ";
document.write(str);
if (window.attachEvent){
window.attachEvent('onload', lightboxTool.initShadowbox );
}
else {
window.addEventListener('load', lightboxTool.initShadowbox, false);
}
}
})();
(function() {
var str;
str="";
str+="<table> \n";
str+="<tr><td>大きい画像</td><td><input style=\"width:350px\" value=\"http://lh5.ggpht.com/_IzfbcNjqGuE/TM6GjyQ77AI/AAAAAAAABDU/gEJkgLsyhxs/P1000776.JPG\"> <input onclick='lightboxTool.createShadowboxHtmlImage(this);' value=\"作成\" type=\"button\"></td></tr> \n";
str+="<tr><td>小さい画像</td><td><input style=\"width:350px\" value=\"http://lh3.ggpht.com/_IzfbcNjqGuE/TM6Io8o9edI/AAAAAAAABD4/AZXCuHAhzgw/P1000776.JPG\"></td></tr> \n";
str+="<tr><td>タイトル</td><td><input style=\"width:350px\"></td></tr> \n";
str+="<tr><td colspan='2'><textarea style=\"width:480px;height:120px\" onclick='this.select();' readonly></textarea></td></tr> \n";
str+="<tr><td colspan='2'><div style='margin-top:5px;'></div></td></tr> \n";
str+="</table> \n";
document.write(str);
})();
Shadowbox.js 3.0.3 の正統な使い方 (1) ダウンロード、setup メソッドで事前にギャラリーを定義 (2) YouTube の動画を表示する(3) 大きな画像を表示する (4) Windows Media Player を正しく使えるようにする
Shadowbox.js 3.0.3 の正統な使い方 〜 YouTube の動画を表示する
動画コード取得ツール※ 2010/11/23 追記 記事の最後に shdowbox.js の変更が必要な内容について記述しています。 ※ Google Cheome のみの問題の対処ですShadowbox をブログに前もって組み込む必要の無いコードを作成するツールを用意しました。 と言っても、結局私のサイトの Shdowbox を使用するだけなのですが、あちこちのブログで テストして正しく動いています。 YouTube の場合、動画ID で構成される特定の URL は、flv を再生する為のプレイヤーな ので通常のYouTubeのオブジェクト埋め込みが表示されます。 rel で、player=swf と指定していますが、無くても動作します。 rel で指定できるのは、player、width、height です。title は A 要素の title 属性 で指定します。( gallery ももちろん指定できます ) ※ Shdowbox の rel での識別は shdowbox か lightbox です。
上のツールは以下のコードをブログの本文等に書くだけで、たいていは設置できると思います。
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/createShadowbox.js" charset="utf-8"></script>
設置ツールのソースコード
if ( !window['lightboxTool'] ) {
window.lightboxTool = {};
}
if ( !window.lightboxTool.createShadowboxHtml ) {
window.lightboxTool.createShadowboxHtml = function ( obj ) {
var pn = obj.parentNode;
var ip = pn.getElementsByTagName("INPUT")[0];
var tt = pn.getElementsByTagName("INPUT")[2];
tt.value = (tt.value).replace(/\"/g,""");
var sl = pn.getElementsByTagName("SELECT")[0];
var sz = pn.getElementsByTagName("SELECT")[1];
var tx = pn.getElementsByTagName("TEXTAREA")[0];
var target = pn.getElementsByTagName("DIV")[0];
var str="";
var idstr = "sbx" + (new Date()).getTime();
str+="<a id=\""+idstr+"\" href=\"http://www.youtube.com/v/"+ip.value+"\" title=\""+tt.value+"\"><img src=\"http://img.youtube.com/vi/"+ip.value+"/"+sl.value+".jpg\" style='border:solid 0px #000000'></a>";
target.innerHTML = str;
if ( tt.value != '' ) {
Shadowbox.addCache( document.getElementById(idstr), eval( "({"+sz.value+",title:\""+tt.value+"\"})" ) );
}
else {
Shadowbox.addCache( document.getElementById(idstr), eval( "({"+sz.value+"})" ) );
}
var param = sz.value.replace(/\\/g,"").replace(/:/g,"=").replace(/,/g,";").replace(/\"/g,"");
var str2="";
str2+="<"+"script type=\"text/javascript\" src=\"http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js\" charset=\"utf-8\"></"+"script>\n";
tx.value = str2 + str.replace("<a", "<a rel=\"shadowbox"+";"+ param + "\"" );
}
}
if ( !window.lightboxTool.initShadowbox ) {
window.lightboxTool.initShadowbox = function ( ) {
Shadowbox.init();
}
}
(function() {
var str;
if ( !window.Shadowbox ) {
str="";
str+="<link rel=\"stylesheet\" type=\"text/css\" href=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.css\"> \n";
str+="<"+"script type=\"text/javascript\" src=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.js\" charset=\"utf-8\"></"+"script> ";
document.write(str);
if (window.attachEvent){
window.attachEvent('onload', lightboxTool.initShadowbox );
}
else {
window.addEventListener('load', lightboxTool.initShadowbox, false);
}
}
})();
(function() {
var str;
str="";
str+="<div> \n";
str+="動画ID <input type=\"text\" value=\"uxBFiU2N65c\"> \n";
str+="サムネイル番号 \n";
str+="<select onchange='lightboxTool.createShadowboxHtml(this);'> \n";
str+="<option value=\"0\">0</option> \n";
str+="<option value=\"1\">1</option> \n";
str+="<option value=\"2\">2</option> \n";
str+="<option value=\"3\">3</option> \n";
str+="</select> \n";
str+="<input type=\"button\" value=\"作成\" onclick='lightboxTool.createShadowboxHtml(this);'> \n";
str+="<br> \n";
str+="サイズ <select onchange='lightboxTool.createShadowboxHtml(this);'> \n";
str+="<option value='player:\"swf\",width:960,height:745'>960x745</option> \n";
str+="<option value='player:\"swf\",width:640,height:505'>640x505</option> \n";
str+="<option value='player:\"swf\",width:480,height:385'>480x385</option> \n";
str+="<option value='player:\"swf\",width:425,height:344'>425x344</option> \n";
str+="</select> \n";
str+="タイトル <input type=\"text\" style='width:280px;'> \n";
str+="<br> \n";
str+="<textarea style='width:480px;height:120px;' readonly onclick='this.select();'></textarea> \n";
str+="<div style='margin-top:5px;'></div> \n";
str+="</div> \n";
document.write(str);
})();
Shadowbox.js 3.0.3 の正統な使い方 (1) ダウンロード、setup メソッドで事前にギャラリーを定義変更前(2) YouTube の動画を表示する (3) 大きな画像を表示する (4) Windows Media Player を正しく使えるようにする ※ 2010/11/23 追記 Google Chrome のみ 以下の変更をしないと、IFRAME のコンテンツが表示を邪魔 してしまいます。エディタで一ヶ所変更します。
flashParams:{bgcolor:"#000000",allowfullscreen:true}
flashParams:{bgcolor:"#000000",allowfullscreen:true,wmode:"transparent"}
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
