匿名質問者

写真集を手作りアルバム風に掲載する為のjqueryやCSSの手法はないですか?


ジャンルなし説明もなしでただただ写真がずらっとあるページをつくろうと思います。perlで指定フォルダの画像を一覧表示させるプログラムを利用するので、画像には基本手を加えません。(デジカメサイズをweb要サイズに縮小するだけ)
また、写真の縦横比が固定ではないので、サムネイル作成にMyThumbnail.js(http://kwski.net/jquery/813/)を利用、さらに拡大表示にLightbox系拡大jqueryを利用します。

これを踏まえて・・・

画像一覧を並べるときに、<ul><li>でただ羅列するのではなく、手作りアルバム風だったり画像を回転させたりして可愛く表示するのになにか良い方法はないでしょうか?

Androidのアプリですが、こういうのを見つけました。
http://appllio.com/android-tool-app/20120531-2167-million-moments-sony
この画像一覧(http://appllio.com/sites/default/files/million_moments_001.jpg)の感じも良いなぁと思いますが、こういうのをcgiやjQuery・CSSで表現できるでしょうか?
出来るようだったらその方法を教えて欲しいです。

他にもなにか良い方法があれば教えて下さい。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2014/06/16 11:55:04

回答1件)

匿名回答1号 No.1

イメージとしてこれなのかわかりませんが、リキッドレイアウトとか可変グリッドレイアウトとかっていうやつでしょうか。
http://www.mdn.co.jp/di/articles/2657/?page=16
これの5とか
http://webgaku.hateblo.jp/entry/2013/03/24/083440
とか
フォトギャラリーだと
http://coliss.com/articles/build-websites/operation/javascript/js-responsive-image-gallery-gamma-gallery.html
http://blog.creamu.com/mt/2012/10/jquery_responsive_tile_gallery.html
とか?

あと以下の真ん中付近とかjqueryのフォトギャラリーを探してみるとどうでしょう。
http://ideahack.me/article/713

匿名質問者

返答有難うございます!
私が考えていたのはこんなかんじです。
ただ、どれも「かっこいい!」という感じで可愛くはないですね。可愛くなるのかなぁって予想したんですが・・・w

可愛いっていうのを表現するのって難しいですね・・・

2014/06/09 23:43:47
匿名回答1号

全体の配置はjqueryで、背景や個々の画像の修飾をCSSでやれば良いんじゃないでしょうか。
バックグラウンドの小物とか、画像のフレームとか。
http://www.zzrock.net/archives/category/image/pretty
こういうのみると、ピンク系の小物とかリボンや花、レースっぽい装飾とかで演出してる感じ。
http://webdesignerwall.com/tutorials/css-decorative-gallery
これとかはかっこいい感じですけど、コルク風の背景じゃなくカーペット風にするとか、
木枠風じゃなくてリボン風とか。
http://webdesignrecipes.com/spice-up-web-design-with-css3/
こんなのとか。

2014/06/12 00:32:35

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません