Re: Gnaviモジュールの地図表示の復帰

このトピックの投稿一覧へ

なし Re: Gnaviモジュールの地図表示の復帰

msg# 1.1.1
depth:
2
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2019/6/27 20:56
タツ  管理人   投稿数: 2006
Gnaviモジュールでマーカーをクリックし情報ウィンドウ(infoWindow)を出すとどうしても上下左右にスクロールが表示されとても見にくい。また、多分スマホなんかでは大きすぎるのではとこの情報ウィンドウを編集することにしました。

この編集に関し、前提としてサイトがCSSにて画像が幅によって拡縮できることが条件です。因みに本サイトでは"image"というCSSが使われています。

取り敢えず幅は180pxとして決め打ち
html/modules/gnavi/js/map.jsを編集してみた330行目辺り
gn_desc[lid]="<div style='width:250px;'><a href='"+gn_url+"/index.php?lid="+lid+u+"'>"+name+"</a><br />"+description+"</div>";
これを単にwidth:250px→width:180pxに変更
gn_desc[lid]="<div style='width:180px;'><a href='"+gn_url+"/index.php?lid="+lid+u+"'>"+name+"</a><br />"+description+"</div>";
これだけだと写真はレスポンシブのcssによって適当なサイズに縮められるがどうもうまく上下左右のスクロールが消えない。そこで

xoops_trust_path/modules/gnavi/main/kml.phpを編集。146行目辺り
$h = $y>0 ? "style='height:".$y."px;margin:5px;'" : "" ;
$desc = "<div align='center' $h><a href='$mod_url/index.php?lid=$lid$op_link'><img src='$imgsrc_photo' /></a></div>".$desc;
これをheight→max-height さらに"image"というCSSを追加して
$h = $y>0 ? "style='max-height:".$y."px;margin:5px;'" : "" ;
$desc = "<div align='center' $h><div class='image'><a href='$mod_url/index.php?lid=$lid$op_link'><img src='$imgsrc_photo' /></a></div></div>".$desc;
と変更すればうまく収まりましたが、縦の写真については長さが長いためかやはり上下左右にスクロールが表示されてしまう。従って写真が縦長の場合は幅を94pxと制限するようにこの部分をさらに編集しました。
if ($y>0 && $rs['res_x'] > $rs['res_y']){
            $h = "style='max-height:".$y."px;margin:5px;'" ;

        } elseif ($y>0 && $rs['res_x'] < $rs['res_y']){
            $h = "style='width:94px;margin:5px 43px 5px 43px;'" ;

        } else {
            $h ="";
        }

$desc = "<div align='center' $h><div class='image'><a href='$mod_url/index.php?lid=$lid$op_link'><img src='$imgsrc_photo' /></a></div></div>".$desc;

現時点では各Gnaviモジュール(ソロツーリングと旅の地図、世界の旅と地図、明石観光と全国宿特集)の情報ウィンドウでは写真の縦横に関係なくスクロールが消えています。ただ、写真の縦横の比率があまりにも違う特殊な場合は不具合が発生するかも知れません。
 
投票数:0 平均点:0.00

投稿ツリー

  条件検索へ


旅と気ままなフォーラムメニュー

旅と気ままなフォーラム新着投稿

欲しい商品が必ず見つかるメジャーなネットショップ

このサイト内の検索

オンライン状況

25 人のユーザが現在オンラインです。 (2 人のユーザが 旅と気ままなフォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 25

もっと...

Facebook,RSSリンク表示


RSSicon 最新記事のRSS