-
Notifications
You must be signed in to change notification settings - Fork 45
Using FooGallery for Masonry Grid Slider Layout
I wanted to Share what I'm doing to use FooGallery in the hopes of encouraging FooGallery to add a Masontry Grid Slider extension.
So here's the website it's running right now https://akuatreatmentprograms.com/ If you scroll down to the middle of the page under "MOST INSURANCE ACCEPTED" you'll see the FooGallery Carousel-Anything concoction I've created.
Right now I place FooGallery Shortcodes into Carousel-Anything (Visual Composer plugin) Here's what I did to achieve this Masonry Grid Slider In FooGallery I've made 3 variations of thumbnails.
Thumbnail 1. size 360 x 165 Enable Deeplinking? - No thanks! Enable Stage Break Points? - Yes Please!
Thumbnails 2. size 170 x 175 Enable Deeplinking? - No thanks! Enable Stage Break Points? - Yes Please! `@media screen and (min-width: 1030px) and (max-width: 1220px) { #foogallery-gallery-4981 img { width: 135px !important; height: 135px !important; } }
@media screen and (max-width: 1025px) { #foogallery-gallery-4981 img { width: 130px !important; height: 130px !important; } }
@media screen and (max-width: 960px) { #foogallery-gallery-4981 img { width: 125px !important; height: 125px !important; } } @media screen and (max-width: 840px) { #foogallery-gallery-4981 img { width: 105px !important; height: 105px !important; } } @media screen and (max-width: 480px) { #foogallery-gallery-4981 img { width: 85px !important; height: 85px !important; } } @media screen and (min-width: 320px) and (max-width: 470px) { #foogallery-gallery-4981 img { width: 65px !important; height: 65px !important; } }` Thumbnail 3. size 350 x 350 same settings as Thumbnail 1
So I copied and pasted the @media breaks to all Thumbnail 2 size images in the slider and changed the number at the end of '#foogallery-gallery-4981' to the correct CSS to target.
Then Once I uploaded all the images to foogallery and then decided which images I was going to size up. I then made this layout in Carousel Anything
What I would like to see is the responsive FooGallery being able to have an extension with OwlCarousel so it can make a Masonry Grid Slider like this or any combination of sizes to work together without having to use the visual composer plugin of Carousel Anything which many have said causes slower page times.
Regards, Brendan Copley about.me/brendancopley