CMS Designerユーザーズフォーラム

立て続けに質問すいません。

サムネイルをクリックすると拡大画像を表示するようにしたいのですが、
マニュアル5.5.3の方法ですと、原寸大で表示されてしまうため、
一定のサイズ（640pxなど）で表示させたいと思っています。

そこで、拡大表示用のデザインを定義し、エントリを作成したのですが、
この方法では、各画像ごとにエントリを作る必要があるため面倒です。

例えば、マニュアル6.3.12のエントリ項目の直接出力のように、
シンプルな形にすることは可能なものでしょうか？

もしくは、コンテンツマネージャーからアップロードする時点で、
画像サイズを指定してアップするようなことは可能でしょうか？

サムネイルはデザイン定義で指定して保存する際はスキーマでやる形がベストかと思います。

コード: 全て選択

<data name="xxx" type="img" width="640" caption="画像" />

縦横比は保持されるそうです。

ハズレでしたらごめんなさい。

tsuさま

なるほど！！
スキーマの設定で、アップロード時のピクセル数を指定できるのですね！
マニュアルにも書いてなかったので、できないものと思ってました。
ありがとうございます。試してみます。

なお、今回の質問の背景として、せっかくの画像を拡大表示しても、
ブラウザの仕様にて、画面内に収まるように縮小されてしまうため、
それを防ぐ意味でも、HTML内に入れる形にしようと思ったのです。
また、そのようにすることにより「印刷する」、「閉じる」といったボタンも
挿入できて便利になります。

そのため、もしHTMLに拡大画像を埋め込む形でも、
簡単な方法がありましたら、ご教授いただければと思います。

よろしくお願いいたします。

そういえばこれだと面倒ですか？

コード: 全て選択

<a href="{photo}&w=640" target="_blank"><img src="{photo}&w=240" /></a>

こんなかんじ。
http://cmsd.pdy.jp/sub_ba.php

tsuさま、ありがとうございます。

これですと、JPG画像単体を表示している形のため、ブラウザに収まりきれない場合、
ブラウザ側で自動縮小されてしまいますよね。それを防ぎたかったのです。
また、この形ですと<TITLE>タグの内容も指定できないかと思います。

そのため、HTMLとして、拡大画像を表示したいと考えた次第でした。
説明不足で失礼いたしました。

なるほどですね。よく読めてませんでした。すいません。

同一ページとなると、CMSDだけでは別デザインとなってしまいますよね。
CSSを切り替えるのも面倒ですし。a:hoverでやるのもしっくりきませんし。

Ajax風にJavaScriptで指定したdiv要素に表示させる方法しか思い浮かびません。。。

webmasterさんならCMSDで解決できる方法を知ってらっしゃるかもしれませんね。

　webmasterです。回答遅れまして申し訳ありません。

　ご質問内容は、

・あるスキーマに複数のimg項目を持っている。
・エントリ表示時に、画像のサムネイルを表示している。
・サムネイルクリック時に、その画像への直リンクではなく、HTMLを使って
　デザインされた別ページを開き、その中へ画像を幅指定で表示したい。

　という感じかとお見受けしました。

　tsuさんのご指摘どおり、現在のCMSDではそのままでは実現することが
できません。m(__)m

　一番簡単なのは、これもtsuさんの提案どおり、Ajaxライブラリを使って
表示することです。Lightbox.js というのが有名でお手軽かと思います。
　http://www.huddletogether.com/projects/lightbox/

　日本語解説も、"lightbox.js"などで検索するとたくさん出てくると思います。

　もう一つは、phpを使って、パラメータに画像URLを与えるとその画像を
HTML中に表示するようなページを作る事ですが、かなり敷居の高い方法に
なってしまいます。m(__)m

　いちおう、サンプルを提示しておきます。
　下記内容をEUC-JPで"showimage.php"とでも名づけて保存し、デザイン定義
側では、

<a href="showimage.php?title={title}&url={image}&w=640">
<img src="{image}&w=200" />
</a>

　という感じにします。
　タイトルと画像のURLを指定すると、それをHTMLに加工して表示するように
なっています。

　尚、このサンプルは非保証となります。ご利用者の責任の範囲内でお使い
下さい。m(__)m

コード: 全て選択

<?php
$action = new ShowImageInHTML();
$action->doAction();

function getGET( $key, $default='' )
{
	if ( isset( $_GET[ $key ] ) )
	{
		return $_GET[ $key ];
	}
	else
	{
		return $default;
	}
}

class ShowImageInHTML
{
	var $imageURL = '';
	var $title = '';
	
	function doAction()
	{
		$title = htmlentities( urldecode( getGET( 'title' )), ENT_QUOTES, 'EUC-JP' );
		$this->title = $title;
	
		$queryString = $_SERVER['QUERY_STRING'];
		$array = explode( 'url=', $queryString );
		
		$url = array_pop( $array );
		
		$url = htmlentities( $url, ENT_QUOTES, 'EUC-JP' );
		$this->imageURL = $url;
		
	}
}

?><html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
	<title><?php echo $action->title; ?></title>
</head>
<body>
<img src="<?php echo $action->imageURL; ?>" title="<?php echo $action->title; ?>" />
</body>
</html>

その方法ならJavaScriptが使えない環境でも見る事ができますね。
表示される部分の加工もHTMLさえ知ってれば簡単ですし。素敵です。

lightboxはお手軽さがいいですよね。
Spry壁にぶち当たったのでとりあえず組み込んでみました。http://cmsd.pdy.jp/ajax.php

webmasterさま、tsuさま、ありがとうございます。

なるほど、「lightbox」というのはおもしろいですね。
ただ、印刷ができない？のは不便です。

もう一方の方は、ソースの内容は理解できませんが、
このまま使えばよいのですよね？
試してみたいと思います。

どうもありがとうございました。

CMS Designerユーザーズフォーラム

サムネイルをクリックした際の拡大画像のサイズを一定にしたい

サムネイルをクリックした際の拡大画像のサイズを一定にしたい