ココログで画像をライトポップアップ表示する

ココログを長い間使ってきましたが、アップロードした画像をウィンドウを切り替えずにポップアップする、いわばライトポップアップ表示する方法があったとは知りませんでした。このポップアップでは、ブラウザで新しくウインドウを開いたり、画像を見たら「もどる」をするとか、そういう手間がなくなります。どのように画像を見たいかは好みになりますが、ここは私の好みでライトポップアップを導入してみることにします。

導入と言っても、特にすることはありません。画像ファイルのアップロード時に、アップロード画面の下端（つまり上の画面）に表示されるオプション「画像をクリックしたときの動作」の中から、「記事ページ内で拡大画像を表示」を選んでおくだけです。これで、記事にある画像をクリックすれば、そのまま背景が暗くなり、画像のみが全面に拡大表示されるようになります。この記事の画像は、すでにそうなっています。

これだけだと、ココログの使い方みたいな簡単な話になってしまい、このブログらしくありません。そこで、今までアップロードした画像についても、このオプションが適用できないか試してみましょう。

アップロードした画像に相当するHTMLを表示させてみると、こんな感じになっています。

ここで注目したいのは、赤字になっているa要素のclass属性です。このclass属性は、「記事ページ内で拡大画像を表示」を選んだときにのみ付加される属性です。ということは、この属性をすでにアップロードされている画像のa要素に付加してやれば、同様にライトポップアップが実現できそうです。

さっそく、この記事でやってみました。

ディスニーシーの塩せんべい

この記事の3つの画像について、以下のようにa要素にclass属性を付加してやります。

a要素のhref属性に与えられるハイパーリンクが、新規アップロードではHTMLファイル、既存の画像では画像ファイルという違いはありますが、問題なく表示できるようです。気になれば、同じようにimage.htmlの引数に画像ファイルを指定する、というように書き換えてやればよいでしょう。私は面倒なので、これをやりませんでした。

ココログでは、ライトポップアップに、「MultiBox」という、MooToolsのプラグインを使用しているようです。記事のHTMLソースを表示させてみると、こんな部分がhead要素内に見つかります。

もうおわかりでしょうが、a要素のclass属性に指定したmbというのは、MultiBoxの意味だったんですね。

すでにアップロードしてしまった画像でも、ライトポップアップさせてみたいぞ、という方は試してみたらいかがでしょうか？

ココログで画像をライトポップアップ表示する

いいね:

コメント