立て続けに質問すいません。
サムネイルをクリックすると拡大画像を表示するようにしたいのですが、
マニュアル5.5.3の方法ですと、原寸大で表示されてしまうため、
一定のサイズ（640pxなど）で表示させたいと思っています。
そこで、拡大表示用のデザインを定義し、エントリを作成したのですが、
この方法では、各画像ごとにエントリを作る必要があるため面倒です。
例えば、マニュアル6.3.12のエントリ項目の直接出力のように、
シンプルな形にすることは可能なものでしょうか？
もしくは、コンテンツマネージャーからアップロードする時点で、
画像サイズを指定してアップするようなことは可能でしょうか？
サムネイルをクリックした際の拡大画像のサイズを一定にしたい
tsuさま
なるほど！！
スキーマの設定で、アップロード時のピクセル数を指定できるのですね！
マニュアルにも書いてなかったので、できないものと思ってました。
ありがとうございます。試してみます。
なお、今回の質問の背景として、せっかくの画像を拡大表示しても、
ブラウザの仕様にて、画面内に収まるように縮小されてしまうため、
それを防ぐ意味でも、HTML内に入れる形にしようと思ったのです。
また、そのようにすることにより「印刷する」、「閉じる」といったボタンも
挿入できて便利になります。
そのため、もしHTMLに拡大画像を埋め込む形でも、
簡単な方法がありましたら、ご教授いただければと思います。
よろしくお願いいたします。
なるほど！！
スキーマの設定で、アップロード時のピクセル数を指定できるのですね！
マニュアルにも書いてなかったので、できないものと思ってました。
ありがとうございます。試してみます。
なお、今回の質問の背景として、せっかくの画像を拡大表示しても、
ブラウザの仕様にて、画面内に収まるように縮小されてしまうため、
それを防ぐ意味でも、HTML内に入れる形にしようと思ったのです。
また、そのようにすることにより「印刷する」、「閉じる」といったボタンも
挿入できて便利になります。
そのため、もしHTMLに拡大画像を埋め込む形でも、
簡単な方法がありましたら、ご教授いただければと思います。
よろしくお願いいたします。
そういえばこれだと面倒ですか？
こんなかんじ。
http://cmsd.pdy.jp/sub_ba.php
コード: 全て選択
<a href="{photo}&w=640" target="_blank"><img src="{photo}&w=240" /></a>http://cmsd.pdy.jp/sub_ba.php
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
ご質問内容は、
・あるスキーマに複数の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
表示される部分の加工もHTMLさえ知ってれば簡単ですし。素敵です。
lightboxはお手軽さがいいですよね。
Spry壁にぶち当たったのでとりあえず組み込んでみました。http://cmsd.pdy.jp/ajax.php