Responsive grid with zoom on items

321
November 21, 2016, at 6:21 PM

I'm havin trouble here. I need a responsive image grid that we can zoom on each image and all the other images should rearrange automaticaly on the empty spaces.

I've come to a solution wich works partialy:

$(document).ready(function () { 
    $("#wrapper div").click(function () { 
        if ($(this).siblings().hasClass('expanded')) { 
            $(this).siblings().removeClass('expanded'); 
        } 
        $(this).addClass('expanded'); 
    }); 
});
.wrapper { 
    width:100%; 
    margin:0 auto; 
} 
.wrapper div { 
    width:31%; 
    margin:1%; 
    float:left; 
    -webkit-transition: width 1s; 
    transition: width 1s; 
} 
.expanded { 
    width:64% !important; 
} 
img { 
    width:100%; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<div class="wrapper" id="wrapper"> 
    <div> 
        <img src="http://i.imgur.com/m9kLJMi.jpg"> 
    </div> 
    <div> 
        <img src="http://i.imgur.com/1fR1mQQ.jpg"> 
    </div> 
    <div> 
        <img src="http://i.imgur.com/CFf5bbM.jpg"> 
    </div> 
    <div> 
        <img src="http://i.imgur.com/3U2gd7I.jpg"> 
    </div> 
    <div> 
        <img src="http://i.imgur.com/N4pFnCE.jpg"> 
    </div> 
    <div> 
        <img src="http://i.imgur.com/q81AaCs.jpg"> 
    </div> 
    <div> 
        <img src="http://i.imgur.com/wjjhTtW.jpg"> 
    </div> 
    <div> 
        <img src="http://i.imgur.com/9fifhrM.jpg"> 
    </div> 
    <div> 
        <img src="http://i.imgur.com/gz5Qdv6.jpg"> 
    </div> 
</div>

But some items break the grid, only 1, 4 and 7 work properly. JSFiddle example

I've come to another solution wich is the gridly plugin. But I'm not able to make it responsive.

Does any one have a clue that I can follow.

Thanks

Answer 1

Working with percentages and relative positions is a mess for this example. Check isotope example

http://isotope.metafizzy.co/methods.html#layout

Click on the example on the right. It uses absolute position (and some calculation)

READ ALSO
How to select all cell starting, containing or ending with some word with JQuery/CSS?

How to select all cell starting, containing or ending with some word with JQuery/CSS?

I have some cells in table like that and want to select it with JQuery?.

240
Chrome Extension not finding jquery

Chrome Extension not finding jquery

We have had a chrome extension working for a while but for some reason it has suddenly stopped working - gives the error Uncaught ReferenceError: $ is not defined. .

346
passing an array of items to jquery function

passing an array of items to jquery function

I'm not entirely sure why this is not doing anything when attempting to pass an array of items to a function. Keeping in mind the reason for the for-loop is so i can change the status of the child ctrl to '+' or '-'.

314