2

Here is a responsive image grid I've made;

http://jsfiddle.net/robflate/kMnJH/

When the grid resizes (upon browser resize) or when there are a certain number of images in the grid, it leaves empty gaps. I want to know if there is anything I can do, perhaps using jQuery, to fill in the gaps with an image of my choosing. See the image below for what I mean, it shows a holder image with a diagonal line through it. This is purely for aesthetic reasons.

http://cl.ly/Dql6

Here is the code from the jsfiddle;

<!doctype html>
<head>

<style type="text/css">
ul { margin: 0; padding: 0; }
figure { margin: 0; padding: 0; }
#page { 
    margin: 0 auto;
    max-width: 1000px;
}
.item {
    display:block;
    position:relative;
    float:left;
    overflow:hidden;
    width: 20%;
}
img {
    max-width:100%  !important;
    height:auto     !important;
    width: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}
.name a {
    display:inline;
    text-decoration: underline;
    position:relative;
}
@media (max-width: 800px) { .item { width: 25%; } }
@media (max-width: 600px) { .item { width: 33.33%; } }
@media (max-width: 400px) { .item { width: 50%; } }
</style>

</head>

<body>
<div id="page">
    <div id="gallery">
        <a href="http://google.com/">
            <figure class="item">
                <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200">
            </figure>
        </a>
        <a href="http://google.com/">
            <figure class="item">
                <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200">
            </figure>
        </a>
        <a href="http://google.com/">
            <figure class="item">
                <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200">
            </figure>
        </a>
        <a href="http://google.com/">
            <figure class="item">
                <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200">
            </figure>
        </a>
        <a href="http://google.com/">
            <figure class="item">
                <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200">
            </figure>
        </a>
    </div>
</div>
</body>
</html>
robflate
  • 177
  • 1
  • 1
  • 9

1 Answers1

0

From what I understand you want to get the number of empty areas within the gallery so you can then place something else in that gap.

It is a very rough example but I want to make sure that this is what you want to achieve, and from that point if you have any questions we could always improve it.

The way it works is by displaying the number of empty gaps remaining within the gallery every time you click on it.

Please, have a look at the example: http://jsfiddle.net/jYGPV/1/

xapu
  • 166
  • 3