不動産物件情報更新ツールの詳細ページの画像表示について (No. 1873)

質問

お世話になります。
不動産物件情報更新ツールでお尋ねします。

詳細ページのサムネイル画像をクリックしたときに、別ウィンドウ（別窓）で画面いっぱいに画像を表示させ、前後の写真へも飛べるようにする事は可能でしょうか。

どうぞよろしくお願いいたします。

回答

「すぐ使えるCGI」のご利用誠にありがとうございます。

■製品の確認

ご質問いただいた「不動産物件情報更新ツール」は以下のページからダウンロードできるものですね。

「不動産物件情報更新ツール」
http://sugutsukaeru.jp/support/386/

「詳細ページ」は以下のページの表示ですね。
http://sugutsukaeru.jp/sample/221-thumbnail-animation/webdir/2.html


■ご希望の確認

> 別ウィンドウ（別窓）で画面いっぱいに画像を表示させ、前後の写真へも飛べるようにする事は可能でしょうか。

まず、この表示自体に付いて検討したいと思います。

ブラウザで本当に別ウィンドウ（または別のタブ）が開くように表示して、なおかつ前後移動するというと、画像用に別のページを設けなければならないので、「すぐ使えるCGI」の範囲では対応できません。

一方、CSSを使って表示する疑似的別ウィンドウ（＝つまり、いわゆるライトボックス）であれば、（ほぼ）画面いっぱいに表示し、なおかつ前後移動が可能です。

この表示は、「すぐ使えるCGI」のサイトでは「レスポンシブWebデザインのライトボックス」という事でご紹介しています。表示のサンプルは下記URLをご覧下さい。

「レスポンシブWebデザインのライトボックス」（表示デモ）
http://sugutsukaeru.jp/sample/397-responsive-lightbox/webdir/1.html
※右列にあるサムネイルをクリックして下さい。

ご覧になっているブラウザのウィンドウサイズによっては「画面一杯」にはならないかもしれません。これは、デモサイトでは表示があまりに遅くなるのを避けるために実画像サイズを幅800pxにしているためです。ウィンドウのサイズを変更してみると、ウィンドウサイズに伴い、画像のサイズが変わるのがご覧いただけます。なお、この時、ウィンドウ枠に padding （枠から画像までの距離）が取ってありますが、この幅は変更できます。

運用される際に、アップロード時の画像自動縮小のサイズを大きめに設定すれば、そのサイズまでは画面上で表示されます。デモサイトではどんな大きな画像をアップロードしても800pxまで縮小されてしまいますので、動作確認される場合はページ右上のリンクからダウンロードして、設定変更してからお試し下さい。


■ご希望に沿うものだった場合

上記の拡大画像表示がご希望に沿うものだった場合は、上記ページからリンクしている「解説」にあるように、この拡大表示をページに組込んでいただくことで表示が実現できます。

「レスポンシブWebデザインのライトボックス」解説
http://sugutsukaeru.jp/support/397/

ただ、ご覧になっている「不動産物件情報更新ツール」は、サムネイル表示とクリックの動作がすべてセットになった JavaScript ライブラリを使用しているので、このライブラリの動作を停止した上で、新たに画像表示サイズの設定もしていただく必要があります。

設定方法は下記の通りですので、調整して見て下さい。
( ファイル名はtemplates/article/ 配下を指します。)

○ライブラリの動作停止

article.html の末尾に以下のような部分がありますので、これを削除して下さい。

------------
<script type="text/javascript" src="js/jquery-pikachoose-full.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(
    function (){
        $("#pikame").PikaChoose({
        　：（省略）
        });

    });
</script>
------------

○画像サイズの設定
上記の「ライブラリの停止」を行うと、画像がすべて実サイズで表示されます。表示サイズを調整するには、下記ページの方法を使って下さい。

「縦横比の違う画像を同じサイズで揃えて並べる方法」
http://sugutsukaeru.jp/support/335/


○ライトボックスの設定
画像のサイズが希望通りになったら、下記の方法でライトボックスを設定して下さい。

「レスポンシブWebデザインのライトボックス（画像拡大表示）」
http://sugutsukaeru.jp/support/397/