SmoothGalleryをXOOPSテーマに導入

2009
2/13

最近、javascript や Flash を利用した cool な 画像ギャラリーが沢山リリースされている。

当サイトは、Xoops CUBE Legacy で構築しているのだけど、あまり Xoops らしくないデザインのテーマも欲しいな・・・と思って、このところテーマ作りにいそしんでいるのだけど。

だけど、動きを持たせたり綺麗な見せ方をしようと思うと、 Xoops の基本機能はもとより、色々な module を導入してもやはり限界がありますねぇ~

というか、欲しけりゃ作れ! といわれそうな世界ですから・・・

最近では、画像module でも LightBox などの javascript を取り込んでいるものも多く、当サイトの Gallery も類似の表示方法を採用している。もっとも、これはmodule作者様の努力のたまものなんですが・・・

 

そこで、今回は自作の Xoops テーマに SmoothGallery を導入して、トップページのみ SmoothGallery によるスライドショーを表示させるようにしてみました。

といっても、やっぱり人様の成果物のパクリでしかなく・・・参考にしたのは、素晴らしいテーマを沢山リリースされている B-COOL さんの次の記事です。

http://demo.2bcool.net/news+index.page+article+storyid+30.htm

http://demo.2bcool.net/news+index.page+article+storyid+30+storypage+1.htm

http://demo.2bcool.net/news+index.page+article+storyid+30+storypage+2.htm

http://demo.2bcool.net/news+index.page+article+storyid+31.htm

 

この記事では、SmoothGallery による表示に加えて、myalbum の指定カテゴリーの画像を表示するように工夫がされており、非常に CMS 的なものです。 It’s so COOL!

準備段階として、myalbum をインストールして、画像表示用のカテゴリーを作成して画像をアップしておき、Malaika System さんの xoops_block smarty プラグイン 「function.xoops_block.php」というファイルを、XOOPSルートディレクトリの /class/smarty/plugins/ に入れておく。

 あとは、上記記事を参考に設置・・・と思ったら本家の内容が少し変わっているようで・・・

http://smoothgallery.jondesign.net/ 

最終的には、サンプルファイル等々の記述を参考にして仕上げました。

現在利用中のテーマ 「mistgreen00」に設定・利用しています。 

 

自分的には非常に気に入りました。

(ただし、javascript の jquery とはバッティングがあるようで・・・とりあえず  jquery で利用している機能ははずしました。)

 

 

 以下は、自分の備忘録として「function.xoops_block.php」 の説明書きをコピーさせてもらいました。

 

XOOPSのブロックを、テーマやテンプレートの任意の場所に表示させる為のSmartyプラグイン。

「function.xoops_block.php」というファイルを、XOOPSルートディレクトリの /class/smarty/plugins/ に入れる。

【バージョン】
v1.1  – mod指定がある時だけ、blockの言語ファイルを読み込むようにしました。

【書式】

使用法 1:


<{xoops_block mod="モジュールディレクトリ名"

     func="ブロック関数名"

     opt="関数の引数(必要に応じて)"

     assign="テンプレートアサイン名"}>

記述例 1: (news新着記事表示の場合)

<{xoops_block mod="news" func="b_news_top_show" opt="published,10,50" assign="newsblock"}>

<ul>
  <{foreach item=news from=$newsblock.stories}>
    <li><a href="<{$xoops_url}>/modules/news/article.php?storyid=<{$news.id}>"><{$news.title}></a> (<{$news.date}>)</li>
  <{/foreach}>
</ul>

使用法 2:

<{xoops_block file="ブロック関数が記述されたファイル"
     func="ブロック関数名"
     opt="関数の引数(必要に応じて)"
     assign="テンプレートアサイン名"}>

記述例 2: (news新着記事表示の場合)

<{xoops_block file="modules/news/blocks/news_top.php"  func="b_news_top_show" opt="published,10,50" assign="newsblock"}>

<ul>
  <{foreach item=news from=$newsblock.stories}>
    <li><a href="<{$xoops_url}>/modules/news/article.php?storyid=<{$news.id}>"><{$news.title}></a> (<{$news.date}>)</li>
  <{/foreach}>
</ul>

【使用例】

メインメニューでの使用例

<{xoops_block mod="system" func="b_system_main_show" assign="ex_mainmenu"}>

<!– メインメニュー部分 –>
<{foreach item=module from=$ex_mainmenu.modules }>
  <a href=“<{$xoops_url}>/modules/<{$module.directory}>/”><{$module.name}></a> |
<{/foreach}>

<!– サブリンク部分 –>
<{if $xoops_dirname }>
  <{foreach item=module from=$ex_mainmenu.modules }>
    <{if $module.directory == $xoops_dirname && $module.sublinks }>
      <div class=”blockTitle”><{$xoops_modulename}> :</div>
      <div class=”blockContent”>
        <{foreach item=sublink from=$module.sublinks }>
          <a id=“mainmenu” href=”<{$sublink.url}>”><{$sublink.name}></a>
        <{/foreach}>
      </div>
    <{/if}>
  <{/foreach}>
<{/if}>

マルチメニューでの使用例(MultiMenu01の時)

<{xoops_block mod="multiMenu" func="a_multimenu_show" assign=“mmblock”}>

<!– メインメニュー部分 –>
<{foreach item=imenu from=$mmblock.contents}>
  <{if $imenu.link != “”}>
    <a href=”<{$imenu.link}>” target=”<{$imenu.target}>”><{$imenu.title}></a> |
  <{else}>
    <{$imenu.title}>
  <{/if}>
<{/foreach}>

<!– サブリンク部分 –>
<{foreach item=imenu from=$mmblock.contents}>
  <{if $imenu.sublinks}>
    <{foreach item=sublink from=$imenu.sublinks}>
      <a href=”<{$sublink.url}>”><{$sublink.name}></a> |
    <{/foreach}>
  <{/if}>
<{/foreach}>

myalbumモジュールのb_myalbum_topnews_showという関数を使う。myalbumのオプションは・・・

  1. モジュールディレクトリ名(myalbum)
  2. 表示画像数(5)
  3. titleテキストの文字数(50)
  4. カテゴリid(1)
  5. サブカテゴリを含めるかどうか?(0)

トラックバック・ピンバックはありません

トラックバック / ピンバックは現在受け付けていません。

この投稿へのコメントは受け付けていません。

コメント一覧

marine  投稿日時 2009/2/15 12:18

SmoothGallery の表示について
javascriptがオフの場合、全部の画像が
下方向につながって表示されてしまい
トップページが非常に見にくくなってしまう。

<div>の設定を overflow=hidden にすると
javascriptがオフの場合でも表示が
くずれないようにならないかな?
(1枚目の画像だけの表示になる?)