月別アーカイブ: 2016年7月

梅雨明け

--- 2016年7月21日 (木) ---

関東以西は寒気が入り最高気温で21℃くらいだという。
こちらは梅雨が明けて3日、カッーとした暑い日が続き始めたが、湿度は下がり梅雨時の蒸し暑さよりはずっと過ごしやすい。

21tsuyuake

21tsuyuake2

裏山のクマゼミの鳴き声がけたたましい。

湿度90%

--- 2016年7月13日 (水) ---

ベタッとした鬱陶しい日がつづく。今日も降ったりやんだりの天気。
13ame

植物は生き生きと・・・・・。
ユリツタ
13yuri13tsuta

ニチニチソウネジバナ
13nichinichisou13nejibana

 

13nani

lightboxの設置

--- 2016年7月4日 (月) ---

まず [lightbox] をダウンロードし 圧縮ファイルを展開すると、いくつかのフォルダとファイルが解凍される。基本的に、使用するのは「js」フォルダの中にある[lightbox.js]と、「css」フォルダの中にある[lightbox.css]、それと「img」フォルダの中の、ベースとなる4つの画像(close.png、loading.gif、next.png、prev.png)だ。

手順
(1)まず html ファイルの <head>〜</head> 内の任意の場所に、以下のコードを記述する。

<link rel=”stylesheet” href=”css/lightbox.css”>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/lightbox.js” type=”text/javascript”></script>

各ファイルへのパスは環境に合わせて書き換えること。

(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> の直前に入れる。これで動いた!! ありがとう!