Responsive image gallery using Masonry

StackOverflow https://stackoverflow.com/questions/22652198

Question

I am trying to implement this responsive image gallery http://creative-punch.net/2014/01/full-screen-image-gallery-using-css-masonry/

The example however uses the entire viewport but I am using HTML5 boilerplate with bootstrap and my image gallery is only showing two columns which are spaced out instead of having the default 5 column display as the demo shows here http://demos.creative-punch.net/masonry-gallery/

This is what I get with a 1200+ px width container enter image description here

I have placed the entire gallery within a container class. But I am not sure what CSS properties I have to adjust to have the images fill the entire div.

How can i do this ?

I have created a jsfiddle but I can't seem to replicate the issue without including the entire project but hopefully someone finds this helpful and can demonstrate what is happening. http://jsfiddle.net/CVU3r/ 

    <div class="grid-sizer"></div>

    <div class="item">
        <img src="http://placekitten.com/650/450" class="image">
        <a class="overlay" href="#">
            <h3 class="title">Some title</h3>
            <div class="description">
                <p>
                    Lorem ipsum dolor sit amet, <br>
                    consectetur adipisicing elit.
                </p>
            </div>
        </a>
    </div>


$(window).load( function() {

$('#container').masonry({
    "itemSelector": ".item",
    "columnWidth": ".grid-sizer",
});

});
Was it helpful?

Solution

So the fiddle wasnt a whole lot of help but thanks for posting what code you could...

  1. using class naming conventions that are defaults in CSS such as class="image" is a bad idea.
  2. I couldnt do much with the fiddle... But i went to the demo and made this how i think you want.

Your going to want to add a wrapper div around all of the gallery

HTML

<body>
 <div class="galleryContainer">
   //this is where all the code in the gallery goes including the container on the     gallery because it is dynamically changed
 </div>
</body>

CSS

.galleryContainer{
   width: 50%;   //or whatever you would like
   height: 600px;   //or whatever you would like
   margin: 0 auto; //center the gallery horizontally
   overflow: auto; //allows you to scroll the gallery when some pictures cant be displayed
}

the previous code also allowed all re sizing and mobile compatibility to work fine. Hope this helped

Finished Gallery

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top