Image Gallery for Bootstrap 3 that works with different sized images

HTML & CSS
1

I have been all over the Web looking for the right image gallery for my Bootstrap 3 site. The current site is setup with a table for the images and Fancybox is used. This, of course, is a WordPress site so the Fancybox plugin won’t work on a conventional site plus working with Bootstrap 3 is not easy.

I did get Fancybox to work but it doesn’t look good. When clicking on an image, the background jumps and the same thing happens when clicking to get out of the image. Spacing looks terrible. I don’t know if creating a responsive table would work better to hold the images.

The page I am trying to duplicate - http://www.sacramentgame.com/media/concept-art/
What I have now - http://sacramentgame.com/sacramentgame/concept-art.html

Any help or suggestions would be greatly appreciated.

2

I guess its something to do with the script removing the vertical scroll which means the background ‘cover’ has more ground to cover and stretches or moves to accommodate.

A quick fix for modern browsers could be to use vh for the background-position as that takes into account scrollbars.

e.g.

html{
background-position:-20vw 50%;
}

If you put that rule after your original then browsers that don’t understand vh will revert back to the original rule.

There probably are other fixes but I just couldn’t see them at the moment.

3

Thanks Paul. I will see if this works.

I was able to get the image gallery to work and be responsive. As I was fretting about it, I got an email from Project 7 Team. I had purchased a menu from them years ago and am still on the mailing list. It was a tutorial on images in a responsive table! I took their code and basically wrapped it around the Fancybox code and now I have a responsive, nice-looking image gallery with Bootstrap 3.

4

Update…it works!!! Thanks Paul!

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.