関東以西は寒気が入り最高気温で21℃くらいだという。
こちらは梅雨が明けて3日、カッーとした暑い日が続き始めたが、湿度は下がり梅雨時の蒸し暑さよりはずっと過ごしやすい。
裏山のクマゼミの鳴き声がけたたましい。
--- 2016年7月21日 (木) ---
--- 2016年7月13日 (水) ---
--- 2016年7月4日 (月) ---
まず [lightbox] をダウンロードし 圧縮ファイルを展開すると、いくつかのフォルダとファイルが解凍される。基本的に、使用するのは「js」フォルダの中にある[lightbox.js]と、「css」フォルダの中にある[lightbox.css]、それと「img」フォルダの中の、ベースとなる4つの画像(close.png、loading.gif、next.png、prev.png)だ。
手順
(1)まず html ファイルの <head>〜</head> 内の任意の場所に、以下のコードを記述する。
各ファイルへのパスは環境に合わせて書き換えること。
(2)続いて <body>〜</body> 内の[Lightbox]を組み込みたい箇所のアンカー要素に「rel=”lightbox”」を追加し、さらに、「href」プロパティでは拡大表示させたい画像を指定。具体的には以下のような記述になる。
<a href=”images/img-1.jpg” rel=”lightbox”><img src=”images/thumb-1.jpg” alt=”” /></a>
また、[Lightbox]には画像をグループ化して前後の画像とリンクさせることも可能で、この場合は、通常「rel=”lightbox”」と記述するところを、「rel=”lightbox[sample-group]”」と書き換えればOK。[sample-group]の文字は自分で適宜決める。
ほとんどのサイトが以上の様に設置方法を紹介している。ところが、これでは動かなかった。で、探し回っているとここに解決方法があった。
<script src=”js/lightbox.js” type=”text/javascript”></script>
この一行を </body> の直前に入れる。これで動いた!! ありがとう!