スキップしてメイン コンテンツに移動

Javascriptで実装された画像ギャラリーライブラリ

Labels:
(2020年5月更新)
こちらの下記理由により、デモを非公開にしました。
  • picasaはもうGoogle Photosに統合されてAPIが変わった。
  • Gallerifficももうアクティブに開発されていない。JQueryのプラグイン化されたようです。
記録目的で記事は残してあります。

Javascriptで実装された画像ギャラリーのライブラリ集です。 試しにいくつか使ってみた中で実際に使えると思ったものを選びました。 他にもかっこいいものがいっぱいあるのですが、実際使うとなると、なかなか厳しい(=使いにくい)ものも多いです。
最近はブラウザのJavascriptエンジンの性能も上がっていますし、HTML5やCSS3も徐々に浸透してきていますので、 ブラウザでお手軽に見栄えのするものが作れるのが魅力かなと思います。

注意点をいくつか。
  • 上記のデモの場合、1つのオリジナル画像につき、「75px程度の正方形にクロップされた画像」と「幅が500px程度にサイズ変更された画像」の2つが必要です。
    • Picasaについては画像サイズを指定してクエリを投げられるので、ちょうどよい大きさの画像のクエリを作成して投げれば簡単にサムネイルが画像を取得できます。
      肝はデモで使っているURLの https://picasaweb.google.com/data/feed/api/all?alt=rss&kind=photo&thumbsize=72c,512&access=public&imgmax=1600&hl=en_US&max-results=50 のthumbsize=72c,512の部分です。
      簡単に説明しますと、サイズの後にcをつけると画像を正方形にクロップしてくれます。何もつけないとアスペクト比を固定して画像をリサイズしてくれます。 詳しく知りたい方はPicasa Data APIの公式ドキュメントを参照してください。
    • 自分で大量の画像のサイズ変更するのは面倒くさいと思います。私の場合はJavaやC#で画像サイズを変更するプログラムを書きました。バッチ処理が可能な画像処理用のソフトを使うのもいいかもしれません。
      C#のコードは簡潔で、実行性能もいいので載せておきます。画像を指定したサイズの正方形にクロップして返すメソッドです。(拡張メソッドが嫌いな人は、必要に応じてImage引数の前のthisを取り除いてください。) 
      public static Image TrimInMaxSquaredSize(this Image image)
{
    int width = image.Width;
    int height = image.Height;
    return image.TrimInSquaredSize(width < height ? width : height);
}

public static Image TrimInSquaredSize(this Image image, int destSize)
{
    int width = image.Width;
    int height = image.Height;
    bool wSmaller = width < height;
    int srcImageSize = wSmaller ? width : height;
    var squareImage = new Bitmap(destSize, destSize);
    using (var g = Graphics.FromImage(squareImage))
    {
        var destRect = new Rectangle(0, 0, destSize, destSize);
        if (wSmaller)
        {
            g.DrawImage(image, destRect, 
                        0, (height - srcImageSize) / 2, srcImageSize, srcImageSize, GraphicsUnit.Pixel);
        }
        else
        {
            g.DrawImage(image, destRect,
                        (width - srcImageSize) / 2, 0, srcImageSize, srcImageSize, GraphicsUnit.Pixel);
        }
    }

    return squareImage;
}
  • Gallerifficのコード自体は、Google Codeのここで公開されています。(2020年5月追記: Google Codeもすでにアーカイブ化されているのでいつまで残っているかわかりません。)
以下のものも時間があればデモを載せたいと思います。

コメント

コメントを投稿