人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Google+ のアルバムで使用されているような
javascriptが配布されているサイトを教えて下さい。
(出来れば無料でお願いします)

縦横の写真をランダムに表示するものです。

グーグルではマウスオーバーで拡大しますが、
出来ればクリックで拡大が希望です。

スクロールする際にマウスが重なるだけで拡大されるのがイヤなので。

よろしくお願いします。

●質問者: worldtravel
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●30ポイント

クリックで拡大はHighslide JSでどうでしょう。

ランダムに配置するのはこの辺を参考にググる

画像を収まりよく並べるのはこの辺


worldtravelさんのコメント
ありがとうございます。 なかなかいいですね。 ただ、画像で使う事が前提なのですが Google+のと違って隙間が多いのがかなり気になります。 Google+だと勝手に画像のサイズを変更して びっちりと埋めてくれるのがいいんですよね〜 なかなか無いですかね〜 まだまだ情報お待ちしてます。 よろしくお願いします。

Cherenkovさんのコメント
>隙間が多いのがかなり気になります。 どれを指しておっしゃっていますか? ランダムにDOMを組んだ後、可変グリッドレイアウトで好きな間隔で並べて、あとはHighslide JSのメソッドを叩けばクリックに反応するようになるのですが。

Cherenkovさんのコメント
画像サイズをビッチリと埋めるだけならCSSでサイズ指定すればいいと思います。

worldtravelさんのコメント
教えて頂いたjQuery Masonry のページを開いてみてください。 右側に「After: Masonry」と書かれている例がありますよね。 この「7」の下に正方形のスペースがありますよね。 このスペースが沢山できてしまうと言うことです。 Google+の場合、画像のサイズを全く気にせずアップするだけで こういったスペースが出ませんよね。 例えば、上記の例の場合、Google+だと 「9」「11」「12」を「7」の下に入るサイズに縮小してしまうか 他の画像を拡大してこの隙間が無くなるように並べてくれます。 無茶な希望かもしれないのですが.....苦笑 (一番下は別です)

worldtravelさんのコメント
あ〜でもGoogleのは縮小だけではなく 画像自体をカットしているんですね..... ん〜〜〜 となると隙間が出来てもjQuery Masonryの方がいいかな......

Cherenkovさんのコメント
外枠のサイズを決めて、サムネイルのサイズをきれいに等分できる値を指定すればいいでしょう。 google+のアルバムの仕様をほぼクローンしたサンプルがほしい感じでしょうか。 Closure Library(google謹製のJSライブラリ)を探してみたけどよくわからない… [http://code.google.com/p/closure-library/:title=closure-library - Closure Library - Google Project Hosting]

2 ● a-kuma3
●70ポイント ベストアンサー

画像をぴちっと並べる jQuery プラグイン。

Automatic Image Montage with jQuery
http://tympanus.net/codrops/2011/08/30/automatic-image-montage/

デモがこちら。
http://tympanus.net/Development/AutomaticImageMontage/


先のプラグインは、画像をつついたときのアクションが何もないので、
これに、lightbox のようなプラグインを組み合わせて、使えば良いんじゃないでしょうか?
http://leandrovieira.com/projects/jquery/lightbox/

こっち (colorbox) の方が、ちょっと軽い感じがします。
http://jacklmoore.com/colorbox/


worldtravelさんのコメント
これですこれ! こんな感じのを求めていました。 ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ