サムネイル画像からの表示

[KAIRI]

色々考えては見たのですが、方法すらわからずこちらでお知恵を頂こうかと
書き込みいたしました。

スキーマにて、「日付」「タイトル」「画像」「コメント」を定義
　うち「画像」と「コメント」をリスト定義しました。

デザイン定義で
左に「タイトル一覧（リスト）」
右上部にエントリ1件内にある画像を縮小したサムネイル表示
右下部にサムネイル画像をクリックしたときにオリジナルの大きさの画像が表示
といったようにしたいのですが、
左のタイトル一覧、右上部のサムネイル表示はなんとか出来たのですが、
右下部のサムネイルをクリックしたときに画像1枚を表示させる方法が思い
つきません。

もし上記情報でわからなければその旨お伝えください。
よろしくお願いいたします。

[webmaster]

　webmasterです。
　KAIRIさん、ご質問ありがとうございます。
　KAIRIさんのされようとしていることは理解できたと思います。
　（間違っていたらご指摘ください）

　現在、左に「エントリ一覧（タイトルのみ）」が表示されていて、右上部に現在
選択されているエントリ内の「画像リスト」の一覧が、サムネイルで表示されて
いる状態と認識しています。

　そして、画像リストのサムネイルをクリックすると、その下にその画像一枚
だけが元の大きさで表示される、と・・・。

　この、最後の部分なのですが、CMSDの機能としてはサポートしておりません。

　具体的に言うと、CMSDに対して「エントリ一覧のページ番号やエントリＩＤ」は
渡すことができるのですが、「１エントリ内のリスト項目のｎ番目の項目」を
指定する機能がないのです。

　ご期待に沿えず申し訳ありません。

　現状としましては、そのようなデザインはjavascriptと併用することで実現させる
事ができるかと思います。

　つまり、サムネイルのonclickイベントハンドラとして、

コード: 全て選択

　<a href="#" onclick="changeLargeImage('{photo}');return false;"><img src="{photo}&w=100" /></a>

　のようにします。changeLargeImage は自分で定義する必要があります。
　HTML中の特定のimgタグのsrcを、渡されたURLに変更するだけでOKだと
思います。

　javascriptの案のサンプルは、アイデアをお伝えするためのもので実際に
試していないので、もしうまく動作しなかったら申し訳ありません。m(_ _)m

　ご不明な点は再度ご連絡いただければ幸いです。

[ゲスト]

早々のお返事ありがとうございます。

機能がないのですね。
大まかな考え方自体はあっていたようです。

javascriptと併用とのことですが、勉強不足でjavascript自体を書く能力がなく
今回、この方法は見送ろうかと思っています。
追々javascriptを勉強し、今回教えていただいた方法を試してみたいと思います。

お忙しい時間を割いてのご回答ありがとうございました。

[KAIRI]

上記書き込みは私です。
申し訳ありません。

[KAIRI]

教えていただきました方法と類似したjavascriptを探し、
見よう見まねで試したところ無事動作しました。

助言いただいた結果です。
本当にありがとうございました。

次の段階へと思った矢先、またもやつまずいてしまいました。
コメントを表示する際は画像と違って参照するURLがないため、
表示する方法が見つかりません。

度々申し訳ありません。
CMSDからは離れてしまった質問かと思うのですが、出来ましたら
またお力添えいただければと思っております。
よろしくお願いいたします。

[webmaster]

　webmasterです。
　KAIRIさんがされようとしていることはAjax的で非常に興味深く、詳しく
解決策を提示させて頂きたいところなのですが、現在なかなかサポートに
時間を取ることが難しく、概念的な話でしか情報を提示できないことを
お許しください。m(_ _)m

　それにしても、javascriptにお詳しくないとのことですが、見よう見まねでも、
あれだけの情報で例の方法を実現されたのは凄いと思います。

　今回の件ですが、概念的な話のみ書かせて頂きます。m(_ _)m

　まず、以下のようなリスト項目がある事を前提に話を進めます。

コード: 全て選択

<data name="photolist" type="list" caption="画像リスト" >
  <listitem caption="画像">
    <data name="photo" type="img" caption="画像" />
    <data name="photocomment" type="text" caption="画像のコメント" />
  </listitem>
</data> 

　元画像の下に、「画像のコメント」も一緒に表示したい、というご用件と
認識しております。

　考え方としては、

　　・常に全てのコメントをHTMLとして出力しておき、
　　・画像クリック時に、必要なコメントのみ、表示させる。
　　　（その歳、元のコメントは非表示にする）

　という方法になります。
　コメント１つ１つをdivタグで囲み、そのdivタグのidにリスト項目のIDをつけます。
　そして、そのdivタグをjavascriptを使って「表示／非表示」させます。

コード: 全て選択

<xsl:for-each select="photolist/listitem">
  <div id="cmt{@id}" class="comment"><xsl:value-of select="photocomment" /></div>
</xsl:for-each>

　こう書くことで、各listitemに振られたリスト-IDを、コメントのdivのidと
関連付けることができます。（この例では、単純にid="00000001"ではなく、
id="cmt00000001" のように頭に"cmt"と付けました。）

　CSSにて、div.comment を非表示にします。
　例えば、 display : none; を指定することで非表示にできます。

　次に、画像クリック時に呼び出していた changeLargeImage() の後に、
対応するコメントを表示させる呼び出しを加えます。

コード: 全て選択

　<a href="#" onclick="changeLargeImage('{photo}');showComment('cmt{@id}');return false;"><img src="{photo}&w=100" /></a>

　ここの showComment('cmt{@id}'); の部分がそれです。

　showCommentはご自分で定義する必要があります。
　この関数の中で行う必要がある処理は、以下の通りです。

　　(1) 現在表示されているコメントを非表示する。
　　(2) 引数で与えられたidを、javascript の getElementByIDで探し、
　　　表示する。（style の display : block;を指定する、など）
　　(3) 今表示したidを、グローバル変数に保存しておく。
　　　　（次回呼び出し時に(1)の処理で使う為）

　showComment の書き方として、もう一つ、非表示のコメント一覧以外に
「コメント表示用のdivタグ」を用意し、非表示のコメント一覧から必要なコメント
をinnerHTMLで引っ張ってきて、コメント表示用のdivタグにinnerHTMLで
コピーする、という手もあるかと思います。こっちの方が(1)と(3)の処理が不要な
分、楽かもしれません。

　以上、それなりにjavascriptに慣れた方でないと難しいかと思いますが、
ネットなどで「javascript　表示 非表示」などのキーワードで探すといろいろ
出てきますので、ご参考になさってください。
　例：　http://www.geocities.jp/monalipse/javas ... splay.html
　例：　http://hp.xrea.jp/m/link/38.html

　ご不明な点はまたご質問頂ければと思います。

[KAIRI]

お力添えありがとうございます。

頂いたご説明をざっと読んでみても分からない単語などが出てきて、
ちんぷんかんぷんです。
ですが、自分なりにできるところまでやってみようと思います。
時間がかかると思いますが、また結果を報告させていただきます。


ご多忙の中、本当にご丁寧にありがとうございます。

[webmaster]

　webmasterです。全然動作確認していないのですが、ちょっとサンプルコードを
書いてみました。
　後者の方法です。XSLT側は、前回投稿した内容のままいけると思います。

　何かのお役に立ちましたら幸いです。m(_ _)m

HTML：

コード: 全て選択

<div id="commentdisplay">[コメントをここに表示]</div>
<!-- 隠されたコメント一覧 -->
<div id="cmt00000001" class="comment">コメント１</div>
<div id="cmt00000002" class="comment">コメント２</div>
<div id="cmt00000003" class="comment">コメント３</div>

CSS：

コード: 全て選択

div.comment {
  display : none;
}

Javascript：

コード: 全て選択

// 指定されたコメントをコメント表示場所へ表示する。
function showComment( cmtID )
{
  comment = document.getElementById( cmtID ).innerHTML;
  document.getElementById( 'commentdisplay' ).innerHTML = comment;
}

[webmaster]

　webmasterです。
　HTMLのみですが、前回の投稿を元に動作するサンプルを作成しました。
　firefox1.0.7(win)と、IE6(win)にて確認しました。

　http://cms.al-design.jp/downloads/sampl ... mment.html

　このソースのCMS化については、4つほど前の書き込みを参考にされて
下さい。

コード: 全て選択

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=EUC-JP">
<title>コメント切替JSテスト</title>
</head>

<script LANGUAGE=javascript>
<!--
// 指定されたコメントをコメント表示場所へ表示する。 
function showComment( cmtID ) 
{ 
  comment = document.getElementById( cmtID ).innerHTML; 
  document.getElementById( 'commentdisplay' ).innerHTML = comment; 
}
//-->

</script>

<style type="text/css">
<!--
div.comment {
	display : none;
}

-->
</style>

<body>

<a href="#" onclick="showComment( 'cmt00000001' );return false;">cmt00000001</a>
<a href="#" onclick="showComment( 'cmt00000002' );return false;">cmt00000002</a>
<a href="#" onclick="showComment( 'cmt00000003' );return false;">cmt00000003</a>


<div id="commentdisplay">[コメントをここに表示]</div> 
<!-- 隠されたコメント一覧 --> 
<div id="cmt00000001" class="comment">コメント１</div> 
<div id="cmt00000002" class="comment">コメント２</div> 
<div id="cmt00000003" class="comment">コメント３</div>

</body>
</html>

[KAIRI]

細かくご指示いただきましてありがとうございますっ。

早速デザインを意識せず、大まかに試したところちゃんと動作いたしました。
今のところ不具合も見当たりません。
これからデザイン方面を細かく触りたいと思っております。

何もわからない素人にご親切にご指導頂き、本当にありがとうございました。
手のかかるユーザーですが今後ともよろしくお願いいたします。

[webmaster]

　webmasterです。
　こちらこそ、いろいろと試して頂き、ありがとうございました。m(_ _)m

　元々CMSDは様々な応用が可能なように設計していたのですが、なかなか
実証ができずにおりました。
　このような応用例を試して頂けるのは、本当に助かります。

　また問題など出ましたら、ご連絡頂ければと思います。

　この投稿をお読みになった他の皆さんも、CMSDはXMLをベースとしている為
様々な応用が効きますので、いろいろお試し頂ければ幸いです。