使い勝手向上委員会 Movable Type 4 でサムネイル表示&スライドショー

| | コメント(0) | トラックバック(0)

以前、lightboxについての記事を書きましたが、MovableTyleでは画像を挿入する場合、通常1枚を left center right の何れかに設置するようになっています。

せっかく、lightboxのスライドショーの機能として写真を順番に表示させることが出来るので、画像のサムネイルを一覧表示させられるかやってみました。

画像挿入時のファイルオプションの設定

  • ブログ記事に画像を表示するにチェックする
  • サムネイルを利用にチェックする(幅: 160 ピクセル)
  • 位置は、左寄せ

※ポップアップウィンドウで元の大きさを画像にリンクには、チェックしない

始めは画像の位置を中央にしたり、横幅を代えてみましたが、私の環境では、「幅160px」の「左寄せ」に統一することで、キレイにうまく回り込ませることが出来ました。

左寄せの標準状態では、CSSで上0,右10px,下10px,左0の余白が設定されてますので、右寄せよりレイアウト的には良いのではないでしょうか。

ところで、MovableTypeは特別CSSをいじらなくても、勝手に回り込んでくれるのですね。

知りませんでした。

 

サムネイル表示まではうまくいきましたので、今度は、lightboxで表示させた際に、同一グループでスライドショー表示をさせられるか試してみました。

htmlモードのおまじない方法

予めブログ記事に写真を貼り付けたあと、htmlモードで「おまじない」を記入してやればすぐに出来てしまします。

a href="http://・・・・・/" rel="lightbox"

a href="http://・・・・・/" rel="lightbox[group]"

rel="lightbox" の後ろに半角で [group] と記載するだけで出来てしまいます。

もし、これが面倒であれば、lightboxの設定の際に、上記[group]を入れてしまっても支障ないと思います。 

※[ ]内は何を入れても機能します。今回はgroupとしました

 

それでは、実際に設置したところをご紹介します。

写真を表示させて、写真の右半分側でマウスをクリックすると次のページに行きます。

逆に、左半分側でマウスをクリックすると戻ります。

20080218-01.jpg
20080218-02.jpg
20080218-03.jpg
20080218-04.jpg
20080218-05.jpg
20080218-06.jpg
20080218-07.jpg
20080218-08.jpg
20080218-09.jpg
20080218-10.jpg
20080218-11.jpg
20080218-12.jpg

トラックバック(0)

このブログ記事を参照しているブログ一覧: 使い勝手向上委員会 Movable Type 4 でサムネイル表示&スライドショー

このブログ記事に対するトラックバックURL: http://style.customplan.info/system/mt-tb.cgi/55

コメントする


画像の中に見える文字を入力してください。

ADs by Google

アーカイブ

最近のコメント

最近のトラックバック