7月に入ると、暑くて、関西では山歩きをする気になれない。六甲山は最高峰地点でも932m。六甲ケーブル山上駅が標高737.5m。神戸の街に比べて4度ほど低いぐらい。天気が悪くて風が吹けば体感温度はかなり下がるが、真夏で晴天ならかなり暑い。
近畿以西の最高峰を調べて見ると、四国の石鎚山が1,982mで、2000m以上の山が無い。
近畿地方：八経ヶ岳：1,915m
中国地方：大山：1,729m
四国地方：石鎚山：1,982m
九州本土：九重連山・中岳：1,791m
屋久島：宮之浦岳：1,936m
軽井沢や清里高原も1000m-1400m程度で夏は十分暑かった。やはり、北海道や東北北部を除けば2000mは超えないと夏涼しくはない。
乗鞍岳は3,026m。乗鞍山頂(畳平)バス停で2,702mもある。標高2716mというバス停もある。手軽に3000m近くまでいける。さすがに涼しい。2011年8月に行った時は天気が悪くて寒いぐらいだった。天気が悪くて大した写真は撮れなかったが、涼しさは伝わってくる。
でも、関西から行くには遠すぎる。関西にも乗鞍岳が欲しい。
無限スクロールを実現するJavaScript「Infinite Scroll」を「8cm×12cmの小さなアート」で試してみた。
https://ok2nd.sakura.ne.jp/art/infinite/
<div id="contents">
<div id="gallery">
<a class="img"><span style="background-image: url('../thumbs/a001.jpg')"></span></a>
<a class="img"><span style="background-image: url('../thumbs/a002.jpg')"></span></a>
.....
<nav id="page-nav" style="display:none;">
<a href="index.php?p=2"></a>
</nav>
</div>
</div>
<script>
$(function(){
var $container = $('#gallery');
$container.infinitescroll(
{
navSelector: '#page-nav',
nextSelector: '#page-nav a',
itemSelector: '.img, .popImg',
loading: {
finishedMsg: '',
img: ''
}
}
);
});
</script>
ローディング画像など、余分なものは出さないようにしている。
1点だけ問題があった。永久に無限ループしてしまう。
次々に読み込んでいくページを、次のようにPHPで自動生成している。
index.php?p=2
index.php?p=3
index.php?p=4
...
各ページのHTMLでは、次に読み込むページを、次のように指定する。
<nav id="page-nav" style="display:none;">
<a href="index.php?p=2"></a>
</nav>
最後のページでは、このナビゲーションを外すようにしても効果なし。PHPページの引数(?p=xxx)が最後のページを超えたら何もHTMLを返さないようにして解決。
<?php
if ($page_current > $page_end) {
exit();
}
?>
使っている「Infinite Scroll」は最新版ではない。version 2.0b2.110713を使用。
--------
合わせて、サムネイル画像クリックによる大きな画像のポップアップ機能追加で嵌まったので備忘録。
ポップアップ画像をdisplay:none;にしておいて、onclick()でdisplay:''にして画像表示するところはうまくいくが、そのポップアップ画像クリックでポップアップ画像をdisplay:none;で消すのが出来なかった。
<script>
var popupNo = '';
function popupImage(no) {
if (popupNo != '') {
$('#'+popupNo).css('display','none');
}
popupNo = no;
$('#'+no).css('display','');
}
function popupOff(no) {
$('#'+no).css('display','none');
popupNo = '';
}
</script>
Infinite ScrollのitemSelectorで指定する追加要素のセレクタclass="img"の内側にポップアップ画像を入れているとうまくいかない。セレクタ"img"の外側にポップアップ画像を出すことでうまくいく。この場合、itemSelectorで指定する追加要素を'.img, .popImg'と２つ指定してやる事。
【うまくいかない方法】
<a class="img" onclick="popupImage('001')">
<img class="popImg" id="001" src="../art/a001.jpg"
style="display: none;" onclick="popupOff('001')">
<span style="background-image: url('../thumbs/a001.jpg')"></span>
</a>
【うまくいく方法】
<a class="img" onclick="popupImage('001')">
<span style="background-image: url('../thumbs/a001.jpg')"></span>
</a>
<img class="popImg" id="001" src="../art/a001.jpg"
style="display: none;" onclick="popupOff('001')">
サムネイル画像クリックによる大きな画像のポップアップでは、
http://rgrg.blog61.fc2.com/blog-entry-593.html
のJavaScriptを使った別バージョンも作成。
https://ok2nd.sakura.ne.jp/art/infinite-b/
この場合のHTMLは以下。
<div id="contents">
<div id="gallery">
<a class="img" onclick="popupImage('../art/a001.jpg')">
<span style="background-image: url('../thumbs/a001.jpg')"></span></a>
<a class="img" onclick="popupImage('../art/a002.jpg')">
<span style="background-image: url('../thumbs/a002.jpg')"></span></a>
.....
<nav id="page-nav" style="display:none;">
<a href="index.php?p=2"></a>
</nav>
</div>
</div>>
【もう一つの備忘録】
ページをスクロールしても、ポップアップ画像を画面中央にするためには、CSSのpositionを'absolute'でなく'fixed'にする。
3年前に買ったシラサギカヤツリの花が咲いた。
陶器の鉢に水を入れて、買った時の株をそのまま入れているだけ。冬には一旦枯れたようになるが、枯れた葉を切っておくと、また緑の葉が出てきて、真ん中の軸が伸びて先端に白い可憐な花を咲かせる。肥料とかはやっていない。水のみ。
といっても、これは花では無いらしい。花茎の先の花穂の周りの苞（ほう）という部分が白くなって花に見えるらしい。
【後日追記】
5年目の2019年も花（苞）が咲いた。
6年目の2020年も花（苞）が咲いた。
7年目の2021年も花（苞）が咲いた。相変わらず、肥料とかは全くやっていない。水のみ。
Google Maps API V3を使って作成したギャラリーマップを少し改修。
後日追記：Googleの規約変更により以下の地図は表示されなくなっている。
マップを挿入する<div>の上に、ボタンなどのメニューエリア<form>が付いていると、マップ<div>の高さをheight:100%にした場合、ブラウザウインドウから上下が少しはみ出た状態になり、スマホで見る場合などマップが上にスクロールしてしまい、ボタンなどのメニューエリアが隠れて見えなくなってしまう不具合が生じていた。
ボタンなどのメニューエリア<form>を、マップを挿入する<div>に重ねて表示することで解決。
あわせて、マップ タイプ（地図、衛星写真）の切り替えに使うマップタイプコントロールの場所を左下に移動させるなど微調整。
mapTypeControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
マップタイプコントロールの配置については、以下を参照。
https://developers.google.com/maps/documentation/javascript/controls?hl=ja#ControlPositioning
神戸（三宮・元町） ギャラリー
https://ok2nd.github.io/tool/map/gallery-kobe.html
夙川・苦楽園 ギャラリー マップ
https://ok2nd.github.io/tool/map/gallery-shukugawa.html
京都 ギャラリー マップ
https://ok2nd.github.io/tool/map/gallery-kyoto.html
大阪（梅田） ギャラリー マップ
https://ok2nd.github.io/tool/map/gallery-umeda.html
酒蔵【灘五郷】 西郷・御影郷・魚崎郷・西宮郷・今津郷 マップ
https://ok2nd.github.io/tool/map/sakagura-nada.html
【新デザイン】
【旧デザイン】
