-1

I would like to impliment a flex grid in my solution. If you look at this grid: http://tympanus.net/Development/GammaGallery/

You can see that it works fine, now what I would like to achieve is put random white squares between the pictures, so no white pictures but white squares/rectangles.

I would load the images from contentitems so that's why i can't use white images.

If anyone would have an idea how to accomplish this it would be great!

user1359023
  • 33
  • 5

1 Answers1

0

try this.Hope that helps.

randomElements = $('.masonry-brick').get().sort(function(){ 
  return Math.round(Math.random())-0.5
}).slice(0,1)
$(randomElements).html('<div></div>');

inspired from here.for div keep the css whatever you want, like white background etc.check out the screen shots.

before div after div

Community
  • 1
  • 1
Aameer
  • 1,366
  • 1
  • 11
  • 30
  • I've tried: but the error is: TypeError: randomElements.html is not a function – user1359023 Apr 11 '14 at 11:52
  • try $(randomElements).html('
    '); It will work. Dont forget to accept the answer.     – Aameer Apr 11 '14 at 16:17
  • Then the window just keeps loading, infinite loop? the source is here: http://tympanus.net/codrops/2012/11/06/gamma-gallery-a-responsive-image-gallery-experiment/ – user1359023 Apr 12 '14 at 09:13
  • I'm sorry, i'm a complete jq noob, how should i put the script exactly in my html file? – user1359023 Apr 12 '14 at 10:36
  • I have updated the answer you just have to copy it and use it as per your needs for example you can put it on a button click, on-load or any other event. In-case you face any problems you always have stackoverflow. Please don't forget to accept the answer. – Aameer Apr 12 '14 at 10:42
  • ok, used window.onload, thanks a lot!!!, last question, is this code replacing one of the images or just adding one, also, it only puts one empty one, how can i get more? – user1359023 Apr 12 '14 at 10:48
  • you can put this code in a function and run that function number of times.Moreover I would recommend you to go through jquery docs so that it will help you learn this stuff very quickly.hope this answers all of your queries.check this post on functions(http://www.jquery4u.com/jquery-functions/5-ways-declare-functions-jquery/), please don't forget to accept the answer if it helped. – Aameer Apr 12 '14 at 10:54
  • ok, i've put in 3 in the slice number and now i have 3 empty spaces, it seems it only works on the last list, how can i put spaces in all of the lists? – user1359023 Apr 12 '14 at 10:58
  • sorry misunderstood your previous comment.It is random. – Aameer Apr 12 '14 at 10:59