Search code examples
cssimagewidthgalleryresponsive

responsive thumbnail gallery with image preview

I want to ask how to make this kind of image gallery (by fcalderan),

codepen.io/anon/pen/OPMeXM

to be responsive. The reason why I wanted to make it responsive is so that when I need to add another item on the gallery it would line up with the rest of the thumbs/ or stacked when the viewport becomes too narrow. I can't do this alone , thanks to anyone who'll spare some time to help!

Update: I may not need the zoom/window preview to be responsive, rather make the whole gallery responsive when it comes to width so when adding images he thumb would stack and placed below.

Below is the link to the image that may help visualize what I'm trying to achieve.

https://drive.google.com/file/d/0B1FMADgebxAyQkszbkpuVk1PRjQ/view?usp=drivesdk

I'm very sorry guys, thanks Seiko85

Solution

  • I used your codepen example and added bootstrap as well as respective classes.

    See here: https://jsfiddle.net/hdqgeuqg/

    I added class="container" to the <dl id="simple-gallery"> and class="col-md-3" to all <dt> elements.

    Then some CSS adaptions needed to be made, like:

    dl.container {
    /*height: 488px;*/
    padding: 360px 5px 5px;
    /* ... */
}
dl.container:before { /* ... */ }
dt {
    /*height: 100px;*/
    /* ... */
}

    A more refined/responsive fiddle: https://jsfiddle.net/hdqgeuqg/3/