清水北山好会ホームページ作成支援ツール 改修

清水北山好会のホームページ作成支援ツールを改修した。今までは自動チェンジのスライドショー・ページを別に作成していた。画像を一覧表示するページ(index.html)とスライドショーページ(slide.html)の2枚を作成し、それらをチェンジボタンで切替表示する方式にしていたが、このを同じく私が作成した『美しき日本の風景』の画像の表示方式に変更した。
これによって縦サイズ横サイズの画像が自由に使えるようになると共にスライドショーが切替なしで行えるようにもなった。

この表示方法は『Justified-Gallery』というもので、Miro Mannino 氏が開発したものだ。彼のLICENSEページを表示するようにしておけば使っても差し支えないようだ。(英語のページをGoogleの自動翻訳で読んでみたところ・・・?)
ということで、『美しき日本の風景』の画像表示に初めて使わせてもらったところ非常に優れていることが分かった。その後、この私のホームページの最近の記事(野反湖のシラネアオイと八間山)にも使わせてもらっている。

縦/横画像が混在しても、ページ幅にぴったり納まるように自動計算する機能は素晴らしい!!
しかも、ページ1枚で一覧表示もスライドショー表示もできる上に、表示には JavaScript を使っているために 「list.txt」 を書き換えるだけで、画像の追加/削除が非常に簡単にできる点も優れている。

このことは『美しき日本の風景』のような何百枚もの画像を展示しているギャラリーのページではとくに重要である。
新しく撮影した画像を追加する場合、最後の画像の後ろに追加するのは簡単だが、それでは訪問者に新しい画像を追加したことを気付いてもらうことはほとんど期待できない。ページのトップに追加してこそ意味がある。
しかしこの場合、トップに追加した分は、今までの画像を順次後方に繰り下げて行く並び替えをしなければならない。
これを今までのHTMLに直接書き込む方法では作業がとても困難である。例え自動処理をするプログラムを作成しても、かなり面倒になることは間違いない。
『Justified-Gallery』はこの並び替えを「list.txt」のトップに画像ファイル名とキャプションを追加するだけで、並び替えはブラウザ自身が行うという優れモノだ。HTMLには画像情報を一切書く必要がないためにHTMLも非常に簡単になる。

画像表示用HTMLファイルに下記の Script を書く。
(A)は拡大表示およびスライドショー用。(B)はぴったりサイズの一覧表示用。
具体例は 清水北山好会のホームページの記事ページ のページソースを参照。

(A)の colorbox フォルダの CSS および JS ファイルは、[colorbox]で検索するとたくさんヒットします。そこからダウンロードできます。

(A) 拡大表示およびスライドショー用(ヘッダー部に書く)
    ・・・・・・・・
    ・・・・・・・・
<link rel="stylesheet" href="../../common/colorbox/justifiedGallery.css" type="text/css" media="all" />
<link rel="stylesheet" href="../../common/colorbox/colorbox.css" type="text/css" media="all" />
<script type="text/javascript" src="../../common/colorbox/jquery.min.js"></script>
<script type="text/javascript" src="../../common/colorbox/justifiedGallery.js"></script>
<script type="text/javascript" src="../../common/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="../../common/colorbox/csv.js"></script>
<script>
  $(document).ready(function () {
    $("#gallery").each(function (i, el) {
      $(el).justifiedGallery({rel: 'gal' + i}).on('jg.complete', function () {
        $(this).find('a').colorbox({
          maxWidth : '100%',
          maxHeight : '100%',
          opacity : 0.8,
          transition : 'elastic',
          current : '',
          slideshow : 'true',
          slideshowSpeed : 3000
        });
      });
    });
  });
</script>
</head>

更に、画像を表示する箇所に、下記を挿入します。これはぴったりサイズの表示用です。(<id="gallery"></div>の位置に画像が表示される)

(B)の justifiedGallery 用 CSS および JS ファイルは、Miro Mannino 氏のサイト(英語)からダウンロードできます。使い方やカスタマイズも同サイトに詳しく解説しています。

(B) ぴったりサイズの一覧表示用(表示位置に書く)
<div id="gallery">
</div>
<script>
  var lstData = csv2Array("list.txt")
  var j = 0;
  function addSomeImages(limit) {
    for (var i = 0; i < limit; i++) {
      $('#gallery').append('<a href="./slide/' + lstData[j][0] + '" title="' + lstData[j][1] + '">' +
                     //上のslideは拡大表示用画像のフォルダ
        '<img alt="' + lstData[j][1] + '" src="./album/' + lstData[j][0] + '" />' +
                     //上のalbumは一覧表示用画像のフォルダ
        '</a>');
      j++;
    }
    $('#gallery').justifiedGallery('norewind');
  }
  $('#gallery').justifiedGallery({
    rowHeight:150,
    lastRow : 'nojustify',
        // nojustifyは、画像の最後の行で枚数が足りない場合ぴったりサイズにしない
    margins : 2
  });
  addSomeImages(nnnn);     // nnnnは画像の枚数
</script>

上記のTHMLファイルを作成するホームページ作成支援ツールは、この日記の6月25日の「GPS軌跡を描いた地図を自動作成するツール 2」の記事のコードに下記のリストファイル生成用サブプロシージャを追加する。
最後から2行目の jpgNum は画像枚数用変数で、グローバル変数として宣言しておきます。この値を上の addSomeImages(nnnn); の nnnn の部分に読み込む。

'-----------------------------------------------
'リストファイル生成     list.txt
'-----------------------------------------------
Sub subListCreate()
  shinFile = uplPath & "\report\" & dateFolder & "\list.txt"    'リストファイル
  txOut = ""
  j = 0
  For i=0 To 59
    If jpgData(i,0) <> "" Then                          '画像ファイルが入力してあったならば
      txOut = txOut & jpgData(i,1) & "<>" & jpgData(i,5) & vbCrLf  'txOut に1行ずつ追加して行く
      j = j+1
    End If
  Next
  jpgNum = j                                     'jpeg画像の枚数
  Call WriteUTF8(txOut, shinFile)                        'list.txt をUTF-8で書込む
End Sub

上記の txOut = ・・・・・・・ の部分は画像ファイル名とキャプションを1行とした CSV ファイルを作成する部分です。
ファイル名とキャプションの区切り文字(デリミタ)は <> に変更してあります。カンマ(,)ではキャプションの中に使われる可能性があるからです。このため colorbox フォルダの csv.js ファイルの中のデータを切り出す区切り文字(デリミタ)の設定も <> に変更する必要があります。

現在位置: ホームなんでも日記メニュー > このページ