Welcome Guest 
メインメニュー
タグ一覧
トップ  >  web一般(html&cgi)  >  未解決◆ニュースモジュールの最新ニュースをフリッカー表示する
jQuery プラグイン jquery jcflick js ニュース フリッカー 表示 marquee カルーセルパネル
ニュースモジュールの最新ニュース を10件程度表示するのに場所を取るのでmarquee タグで表示する

最新ニュースブロックは、ブロックオプションで、表示件名の長さを調整できるので固定長(文字数を固定)に出来る。

タイトルをマーキー表示したブロックテンプレート
<{strip}>
  <marquee bgcolor="#FFFFFF">
    <div id="news_topics">
     <{foreach item=story from=$block.stories}>
     <a href="<{$block.mydirurl}>/index.php?page=article&amp;storyid=<{$story.id}>"><{$story.title}></a>
       <{if strstr( $block.type , "counter" )}>     (<{$story.hits}>)   <{else}>     (<{$story.date}>)   <{/if}>          <{/foreach}>
    </div> 
 </marquee>    
<{/strip}>

サンプル
サンプルでは、最新ニュースブロックのタイトルを"Headline mobile"にして、themeに以下ののように記述し、全てのページに表示させている。

<{if $xoops_showrblock == 1}>
	<{foreach item=block from=$xoops_rblocks}>
		<{if $block.title == "Headline mobile"}>
			<{$block.content}>
		<{/if}>
	<{/foreach}><br>
<{/if}>

marqueeも良いが、スペースを入れないと、一つのタイトルを表示している間に次のタイトルが表示されるので、かなりスペースを入れないと間抜けな感じになったり、スマートフォンでは表示が崩れる。
フリッカー表示すれば問題ないが、何を利用したら良いか?

コンテンツをフリックできるようにするjQueryプラグインjquery-jcflick.jsを利用する方向で検討する。

jQueryプラグインは、「カルーセルパネル(Carousel Panel)」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。
カルーセル(Carousel=回転木馬)は、メリーゴーラウンド(merry-go-round)のことで、パネルが自動で次の画像を表示を繰り返し最初の画像に戻ります。矢印(→)画像をクリックすると、次の画像や前の画像を表示する事が出来たりもします。
画像でなくても、文字のみでも表示が可能であるが、一定文字数以下でないと問題もあるかもしれない。


funnythingz / jcflick
プリンタ用画面
友達に伝える
投票数:18 平均点:10.00
前
website(ウェブサイト)にtwitterのツイートを表示する方法
カテゴリートップ
web一般(html&cgi)

メインメニュー
検索
テーマ選択

(5 テーマ)

(旧)仕様・環境

当サイトの仕様・環境

ServerQueen】仮想専用(VPS)サーバー QV-03

 CPU:  Quad Core Xeon
 OS:  CentOS 5
 データ転送量:  無制限
 独自SSL:  あり(無料)
 リモートログイン:  SSH
 Webサーバー:  Apache
 メールサーバー:  Qmail
   
 独自CGI  設置可能
 SSI:  設置可能
 Perl:  5.8.8
 PHP:  5.1.6
 SendMail:  ○
   
   
   
   
   
   
   

アクセスカウンタ
今日 : 112112112
昨日 : 126126126
総計 : 178689178689178689178689178689178689
検索
XOOPS Cube PROJECT
YuChiKo Create Company© 2001-2013