回答日： 2016-07-26
質問
お世話になります。添付ファイル付ウェブページ更新ツールの不動産物件情報更新ツールでお尋ねします。
http://sugutsukaeru.jp/sample/221-thumbnail-animation/webdir/2.html
を表示したときのメイン画像をクリックすると、オリジナルな画像(ファイルアップ時の画像)を表示させたいのですが、可能でしょうか。
もしも可能な場合、その変更箇所を教えていただけないでしょうか。
投稿日時： 2016-07-26 17:28
回答
「すぐ使えるCGI」のご利用ありがとうございます。■製品の確認
ご覧頂いている製品は、下記からダウンロードできるものですね。
http://sugutsukaeru.jp/support/386/
■対応可否
ご覧いただいているサンプルですが、この表示は JavaScript ライブラリを使っていて一連の動作がセットになってしまっているので、さらに画像を拡大するような動作を追加する事はできません。
■他の対応方法
表示が近いものとしては、下記URLの「サムネイル画像表示とライトボックス拡大機能付きブログ」としてご案内しているツールの画像部分の表示を切り張りした後、後述の変更を加えるものですがいかがでしょうか？
「サムネイル画像表示とライトボックス拡大機能付きブログ」
http://sugutsukaeru.jp/support/225/
○制限
自動のスライドショー機能が無くなります。
○変更概要
1. 記事ページの画像構成変更（画像部分の切り張り）
article.html でメイン画像とサブ画像が別々に表示されるように調整。サイズ調整の用のCSSやJavaScript設定もありますので適宜調整して下さい。
例）
------------
<div>
%_article_image_1_%
</div>
<ul id="gallery">
%_file_list_%
</ul>
------------
2. メイン画像に拡大画像へのリンクとID属性を付ける
article_image_1.txt を編集。<a> タグを追加し、拡大画像が別窓で開くようにする。
<a> タグには id="main-image" などのID属性を付けて下さい。
3. サムネールクリックの動作を変更
現在はサムネイルクリック時にはライトボックスで画像が拡大されるようになっています。
これを、メイン画像が差し替えになるように変更します。
例えば、article.html に以下のようなJavaScript 関数を追加し、
------------
<script type="text/javascript">
function switchimage(SRC){
document.getElementById('main-image').href = SRC; //メイン画像のリンク先を書き換え
document.getElementById('main-image').firstChild.src = SRC; // メイン画像のsrcを書き換え
}
</script>
------------
article_file.txt にはリンクの動作としてこの関数を指定します。
例）
------------
<li>
<div class="imagewrapper"><a href="javascript:switchimage('%_d_%/%_filename_escaped_%')"><img src="%_d_%/%_filename_escaped_%" alt="%_filetext_%"></a></div>
</li>
------------
■実装に際して
実際にこの方法で実装する場合は、以下のような点をもう少し丁寧に検討する必要があります。
（上記はアイデアのご提案であり、動作確認はしておりません。）
- キャプションの表示
- 形の違う画像への対応（CSSの工夫）
- 画像が無い場合の措置
- 拡大画像の前後移動
弊社でテンプレート編集を承る場合は有料サービスとなりますので、御見積をお問合せ下さい。
回答日： 2016-07-26