カスタマイズ＆運用TIPS : lightboxをxoopsで使ってみる
投稿者 : taka 投稿日時： 2007-1-27
myalbum-pを使う
myalbum-PはGIJOEさんによる最もすばらしい画像系モジュールのひとつですが、まずはこのmyalbum-Pのtemplateからlightbox対応にしてみます。
といってもmyalbumは出力画面数がすごい数なので、全部紹介するのも大変。なので、indexページの最新リストをlightbox化してみます。
myalbum/templates/myalbum_photo_in_list.htmlの11行目付近
<a href='<{$mod_url}>/photo.php?lid=<{$photo.lid}>'><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' /></a>とあるので、この aタグ部分を
<a href="<{$photo.imgsrc_photo}>" target="_blank" rel="lightbox[new added]" title="<{$photo.title}>"><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' class='photo_frame' /></a>としてみてください。
ちなみにimgタグにふったphoto_frameというclassは、studioの中に入っている写真フレームっぽさを表現したスタイルですので、つける必要はありません。
またコミュニティサイトとしてわいわい感を強調するのでなく、写真家さんたちがもっとスタイリッシュに作品を見せたいということであれば、myalbum_index.htmlを編集してしまうのも...。
39〜43行目
<table width='100%' cellspacing='0' cellpadding='10' border='0'>
<{foreach from=$photos item=photo}>
<{include file="db:myalbum_photo_in_list.html"}>
<{/foreach}>
</table><{foreach from=$photos item=photo}>
<div style="width:120px; height:120px; display:block; border:1px solid #CCC; margin:0px 3px 3px 0; overflow: hidden; float:left;">
<a href="<{$photo.imgsrc_photo}>" target="_blank" rel="lightbox[new added]" title="<{$photo.title}>"><img src='<{$photo.imgsrc_thumb}>' <{$photo.width_spec}> alt='<{$photo.title}>' title='<{$photo.title}>' /></a>
</div>
<{/foreach}>
<div style="clear:both;"> </div>
余計なテーブルも減らせますし、テーマの幅可変にも対応可能です。POINTは写真をくくっているdivタグのスタイル。写真だけを並べようとしても、意外とガタガタになって、美しく整列できないですよね。写真自体を全部同じサイズにするのでは、XOOPSやmyablumの利便性をうまく使っている感じがしなくなってしまいますし...。かといっていろんなサイズの写真から同一サイズや縦横比率同一のサムネイルを生成させるのはプログラム自体に手を加えないといけないので、少し敷居が高くなってしまいます。というわけで、ココでは簡単なスタイルの記述だけで、美しくレイアウトさせてみました。サイズはサムネイルの大きさとうまく調整してください。
がお勧めです。
で格安ドメインをGET!
