壁一面に写真を並べたようなギャラリーに黒く塗りつぶした箇所をバラバラに

質問

壁一面に写真を並べたようなギャラリーに黒く塗りつぶした箇所をバラバラに貼り付けたい

画像のようにバラバラに黒く塗りつぶした箇所を付けるにはどうすればよいのでしょうか？
宜しくお願いします。
フォトギャラリーデモ
http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/
ダウンロード
http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/

回答No.2

fujillin · ベストアンサー

No1です。
最初の質問には動作に関しては何も指定が無かったので、「表示をしたい」という意味の質問と思いました。
添付でご提示のスペースが開いているサイトが、どのようにしているのかを覗いてみればよいのではないでしょうか？

スペースを空けるものをimg要素以外にすれば、無視してくれるのではないかと思い、
　<div class="spacer"> </div>
を任意の位置にいれて実験してみたところ、当然ながら表示はできますが、拡大表示時の「<」「>」で示されている「次の要素」がうまく取得できていないようです。
仕組みを見てみると、jqueryを利用してそのまま書いてありますので、前後の要素を割り出すところを、img以外はスキップするように修正することで、ご質問およびNo1の補足のような動作になりました。

もとの作者が（そのつもりだったのだかも知れませんが）、要素を割り出すのに　（例として次（next)の場合）
　$('#content img:nth-child('+parseInt(current+2)+')')
としていますが、どうやらjqueryのnth-childが、「#content img」の集合からnthを選択してするわけではないみたい。
（jqueryはよく知らないのでわかりませんが、nth-childでimgのものを選択するということらしい＝divだと拾わない）

選択方法をeqに変えれば「要素集合でindex番目」となるみたいなので、
　$('#content img:eq('+parseInt(current+1)+')')
に変更してみると問題なく（div要素を飛ばして）動作するようになりました。
（eqとnthではindexが1ずれるようなのでご注意を。「次（next)」と「前(prev)」の2箇所あります）

＜参考＞
　http://semooh.jp/jquery/api/selectors/

お礼

なんとか、なりそうですね。
じっくり分析してみます。どうもありがとうございました。

回答No.1

fujillin

<img ～>を順に並べてくれるというもののようですから…

黒ベタの画像を1枚用意しておいて、<img～><img～>・・・の中に適当にその黒ベタの画像を入れておくというだけじゃダメなんでしょうか？

補足

返答をありがとうございます。
この案は私も考えておりましたが、画像と同じくリンクとして反応してしまいます。無反応でいきたいのですが、<div>で囲んだりして、なかなかうまくいきません。
無理のような気がしますが、何か他の方法でもあるかな、と思いまして…。