Home > Tags > JavaScript
JavaScript Tag Archive
Amazon 画像のリンク切れをJavaScript でごまかしてみる
- 2008-08-07 (木)
- WordPress
読書感想カテゴリでは、サイドバー最上段に書影をランダムで10個表示するようにしていたのですが、ところどころ画像が表示されていないということに気付いていつつも放置していました。が、なんだか日が経つにつれてリンク切れ画像が増えていってるような気がして仕方なかったので、とりあえず対処療法を講じてみました。
そもそも、Amazon リンク切れ 画像で検索すると、同様なことに悩んでいる方は少なからずいるようで、そして、結局はひとつひとつ手作業で修正するしかなさそうという事実に愕然としてしまいます。
しかし、何とかす方法はやっぱりあるようで、画像がリンク切れの時は、代替画像を表示するという方法を指定した画像がなければ別のサーバーの画像を読み込むにて知りました。
ってことで、早速テーマを書き換え。WordPress のRandom Imageプラグインの出力を書き換えて、
<?php randomimage(false,
10,
"height='120' width='90' class='random-image' onerror=\"this.src='http://www.u-1.net/images/noimage_small.png'\"",
true,
"(\.jpg|\.jpeg|\.png)",
"both",
"",
"9",
true,
"",
"%2"); ?>
のように変更。プラグインの細かいパラメータは配布サイトの説明参照してもらうとして、img タグ内にイベントハンドラ onerror を追加してやって、画像読み込みにエラーが出た場合は、代替イメージ noimage_small.png を表示してやるということですね。
同様に、各エントリの中の書影を表示している img タグにも一括置換で onerror を追加してやって対応完了。
そのうちこつこつと画像の UR Lは書き換えないといけないけれど、ひとまずはこれで不格好なレイアウト崩れは回避できるはず。
- Comments: 0
- Trackbacks: 1
bookreader.js カスタマイズのメモ
- 2008-06-26 (木)
- コンピュータ
![]()
SS の公開に使っている、bookreader.js ですが、やっぱり便利。ブラウザで超長文を縦スクロールで読むのは、辛いなあと思っていたひとには福音となりそうなライブラリです。というか、Web 小説を公開しているひとの多くが該当するのかも。まぁ、見せる方のこだわりの一つと思ってもらえれば……。
ただ、使用できるタグが限定されていたり、カスタマイズに関する情報はさすがに少なかったので、自力でいろいろいじってみて分かったことについてメモってみようかと思います。
bookreader.js 0.4.5 のカスタマイズ
0.4.1でも施した、p タグや div タグへの class 指定を 0.4.5 でもできるようにしてみました。パッチは以下。
--- bookreader.src.js.org 2008-07-08 00:11:32.000000000 +0900
+++ bookreader.src.js 2008-07-09 11:44:12.000000000 +0900
@@ -71,15 +71,17 @@
case 'P':
s = elm.innerHTML;
t = BookReader.Utils.dividelines(s, maxletter);
+ w = elm.readAttribute('class');
+ if (!w) { w = ''; }
t.each(function(line){
if (BookReader.currentline >= maxline || line == '<hr />'){ BookReader.insertPage(); }
if (line != '<hr />'){
if (elm.align == 'right'){
- BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+' right">' + line + '</p>';
+ BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+' '+w+' right">' + line + '</p>';
} else if (elm.align == 'center'){
- BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+' center">' + line + '</p>';
+ BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+' '+w+' center">' + line + '</p>';
} else {
- BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+'">' + line + '</p>';
+ BookReader.pages[BookReader.pages.length-1] += '<p class="'+fontsize+' '+w+'">' + line + '</p>';
}
BookReader.currentline++;
}
0.4.5 では、行揃えなどが標準で組み込まれているので class 指定を使う必要があるケースはかなり少ないと思いますが、例えば、インラインで img タグを使用し文中に画像を入れたいときなどは、行の高さが決め打ちされているので、一部分しか表示されないなどの現象が起こりえます*1
例えば、バナーなどをインラインで表示したい場合などは、専用の class を CSS に追記して、画像を表示する行に対して class を指定してやるなどの方法で対応するのが良いかと思います。
動作サンプルで具体的な記述方法や CSS の指定を確認して下さい。
勝手にバナー作ってみました
アイコンの画像は、Detailed information for icon – document2 を使用させていただいています。アイコンのライセンスが GPL なので、こちらのバナーも GPL ってことで。
Illustrator で加工した EPS 形式のファイルと、バナー用の PNG ファイルをアーカイブしておいておきますので、自由に使って下さい。あ、公式とは全く関係ないので、その点はご注意を。
- Powered by bookreader.js バナー (214)
Update:2008/07/09
以下の内容は bookreader.js 0.4.1 に対して行った改造です。それ以降のバージョンではほぼ同等の機能が取り込まれていますので、改造は不要となっています。
- 画像自体に width や height を指定しないと、その行に収まるように高さを無理矢理縮めて表示するようです。 [↩]
- bookreader.js | JavaScript | Web | コンピュータ
- Comments: 2
- Trackbacks: 0
Home > Tags > JavaScript
- 応援中
- サイト内検索
- フィード
- メタ情報
- 49 queries.
- 10.244 seconds.
