mihoji 使ったもの：アプリ編
Shupapan
http://sunsky3s.s41.xrea.com/shupapan/download/index.html
写真のファイル名がバラバラだったので連番にしたく。なにこれすごい便利。
image_01.jpg みたいに連番に出来る上、image_01_s.jpg とか、サムネイル用に末尾に文字足したりもOK。
これで一括でファイル名を整えた。
Picasa
http://picasa.google.co.jp/intl/ja/
写真の一括リサイズはこれ。
Photoshopのバッチ処理とかでもいいのかもしれないけど、Picasaで一気に写真を読み込んで、使うものだけ選んで、必要なサイズに一気にエクスポートが便利だと思う。
使ったもの：js編
jQuery masonry
http://masonry.desandro.com/
写真が縦横バラバラだったのだけど、トリミングするのもめんどうなので、これ使ってタイルに並べることにした。
Lightbox2
http://lokeshdhakar.com/projects/lightbox2/
hover時のシンプルな矢印などがいいですね。
スムーススクロール用JavaScript
http://www.coolwebwindow.com/weblife_column/coolweb/000301.php
いつも使ってるスムーズスクロールがなぜか動かなかったのですが、こちらを使って、外部jsにせずhtmlに直接書いたら大丈夫でした。
ソースもシンプルで嬉しい。
[html]
$(function(){
// #で始まるアンカーをクリックした場合に処理
$(‘a[href^=#]’).click(function() {
// スクロールの速度
var speed = 400;// ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? ‘html’ : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$($.browser.safari ? ‘body’ : ‘html’).animate({scrollTop:position}, speed, ‘swing’);
return false;
});
});
[/html]
※あと注意点
画像を並べるときにwidthとheightをきちんと入れておかないと、Chromeでレイアウトが崩れてしまった。
なんか上のほうで写真がクシャってだんごみたいになってしまうのです。
参考にした記事：http://www.db.gs/article/312290104.html