Keyword "JavaScript" - 11 items

Fancyboxでiframeを表示する際の高さを自動調整

先日「Lazy Loadでページ表示完了後に画像を表示させる」という記事にも書きましたが、画像をたくさん見せたい、よりかっこよく見せたい、という欲求は収まる気配がありません。
ということで、jQuery系のプラグインには大変お世話になっているのですが、とりわけ僕が愛用しているのが「Fancybox」です。

大昔にLightboxが発表されてからこの手のプラグインはいろいろ派生していきましたが、Fancyboxは表示のカスタマイズがオプションで簡単にできるのでとても便利です。
ただ一点不満だったのが、iframeを使って別のページを表示させるときに高さの調整が難しかったことです。「画像の場合は自動でちょうどいいサイズにしてくれるんだからページの時もやってくれよ!」と自分勝手に憤っていましたが、これまたオプションで指定できることを最近知りました。凄いです、Fancybox。

Lazy Loadでページ表示完了後に画像を表示させる

デジタル一眼レフがかなり手頃な値段で購入出来るようになったり、画像加工サービスが広まったりで、お気に入りの画像を大量に表示させたい、という方が増えてきたように思います。それは賑やかで楽しいサイトになるかもしれませんが、ページに大量の画像を表示する際、リクエストがサーバーに送信されその返事を待つ、という流れが画像の数だけ繰り返されるので、ページが表示されるまでに時間がかかってしまいますし、サーバーに負荷もかかります。サーバーにしたら矢継ぎ早に注文されて、「…ちょ、待てよっ!」って感じになるわけですね。

そこで便利なのが、ブラウザのウィンドウに表示されていない画像は一旦無視しておいて、表示領域にはいった時にあらためてリクエストを送信することで、ページ表示の高速化、サーバー負荷の軽減ができるjQueryのプラグイン「Lazy Load」です。

jQueryで外部リンクに「target="_blank"」を自動付加

ブログを始めた頃はW3Cのルールに沿うことを生き甲斐としてコーディングしていました。いろんなサイトに貼付けられていたミニバナーに憧れもありました。結果コーディングの理解も深まり、ブラウザ毎にレイアウトが崩れても、まずは自分のコーディングを見直すことで対処が早くなりました。
で、心穏やかにコーディングをする日々を過ごしていたのですが、徐々に気持ちをざわつかせれてきたのが、「target="_blank"」の扱いです。

Lightbox v2.0はすごい

先日「Lightbox Plus」に切り替えたばかりですが、本家「Lightbox JS」がバージョンアップするようです。

公開されたようです。
Lightbox JS v2.0

口で説明するのは難しいですが、なんか同じグループの画像を順番に見る機能なんかが追加されています。表示する際の効果も「ボワーン、ムニュッ」って感じでかっこよろしいです。が、画像の自動縮小、拡大機能がないのと、ページ機能の代償として、どこをクリックしても画像表示を終了させる機能が無くなっちまったようです。んー悩みますが、よく考えたら当サイトはそんなに画像を使わないので当分は Lightbox Plus を使用させていただきます。

しかしすごいなぁ。

Mac IEにLightbox Plusを読込ませない

当サイトのレイアウトは配付終了したMac IE以外の主要ブラウザでほぼ互換がとれています。もちろん一番思い通りに表示してくれているのはTigerで起動する最新版のSafariです。PantherのSafariもほとんど文句ないですが、スタイルシートなどで強制的に縮小表示している画像*1がちぃと汚い。でもこれはブラウザというよりもOSの機能の問題のようです。Tigerではどのブラウザでもきれいに表示していますので。で、完全無視しているMac IEですが、細々やってるBlogですのでそこまで対応するのもしんどいし、人が少ないので必要性も感じていませんでした。ところが、なんと当サイトを開いただけでIEが強制終了されていたことが判明。Mac IEにとってはブラクラBlogと化していたようです。大変申し訳ありませんでした。

で、その原因ですが、先日「Lightbox JS」より移行した「Lightbox Plus」だったようです。導入以降のアクセスログにMac IEがまったく無かったので、一時的に外してみるとレイアウトはともかく表示はもたつきながらもしてくれました。導入メモはほんとに役立ちます。

Lightbox Plusに変更

いろんな進化版がある「Lightbox JS」ですが、当サイトでは意固地にオリジナルを使い続けていました。特に思い入れがあったわけではないのですが、ちょこっとカスタマイズしていたので入れ替えるのが悔しかったんですね。しかし当サイトも「Lightbox Plus」に乗り換えました。今までありがとう、オリジナル Lightbox JS。

Lightbox Plus が素晴らしいのは、表示する画像と現在のウィンドウサイズを比較して、画像のサイズを調整してくれる点です。当サイトではあまり大きい画像は使いませんが、使用する時にそういう細かい点にいちいち気を配らないでいいのは嬉しいです。そんなわけで乗り換え自体はずっと前から検討していたのですが、決め手になったのは「Lightbox Plus で画像を同一画面にオーバーレイして表示」を拝見したことです。こちらで配付されている Lightbox Plus の改造版を使用すると、今まで必要だった「rel="lightbox"」が無くてもリンク先の拡張子が「jpg」「png」「gif」の場合、自動的に Lightbox Plus が動作してくれることになります。これこそ求めていた機能。ありがとうございます、Drk7jp さん。

ところで今回の変更したことで Win IE も正常に動いてくれるかも…と期待したのですが、やはりダメなようです。ただ、Lightbox Plus の画像拡大・縮小機能は動いているので、CSS かなにかが原因のようですね。IE 用の CSS が悪さしているのかな…

Lightbox JS さらにバージョンアップ

みんな大好き「Lightbox JS」がさらにバージョンアップしてます。今回のバージョンアップで、Lightbox JS で表示する画像の右上に、×マークが表示されるようになったみたいです。

Lightbox JS|class を付加

Moblog 一覧を作成するために、「Lightbox JS」が生成するポップアップ画像に「class」を付加したのでメモ。

Lightbox JS バージョンアップ

あっという間に広まった「Lightbox JS」がバージョンアップしてます。いくつかのバグフィックスと、あらたに title 属性があればそれも表示するようになってますね。

Lightbox JS|カスタマイズ後のセンタリング

未だ IE で表示させることができない当サイトの Lightbox ですが、いじくり回しているうちに微妙にセンターからずれていることが気になって仕方がありません。

というわけで、またまた知識も無いのに修正したのでメモ。

確認は Safari、Mac 版の FireFox、Opera で行っています。が、Opera では微妙ですがずれていますね。おまけに AdSense も飛び出して表示されたように見えます(笑)。興味のある方は、一度 Opera で見てください。思わずクリックしたくなりますよ(笑)。

«Prev1 2Next»

このページの先頭に戻る

Copyright 2015 - Heartfield