Hello all,
Don’t ask why, I just fall in love with this image gallery, probably because it was the easiest to implement, I tried to search google for responsive galleries but couldn’t find anything that I really like.
So I decided to try this: I added the image gallery and I want to try and make it responsive, any ideas what changes should I make? http://petpal.co.il/pet-3124
Yeah, I’d say go with one that already has responsiveness built in. (It can be a real poo to adapt a fixed width slider to be responsive.) bxSlider is a good option too:
As you can see, no matter on which image you click on the image navigation, its always the same image that shows, only the arrows work for changing images, what did I do wrong?
I still couldn’t get it to be responsive, when i zoom in the size of the gallery doesnt change, ideas?
Responsive web design is about the layout adapting the to the size of the viewing device but in your example above you just have a fixed width site which is not responsive at all. Zoom has nothing to do with responsiveness although usually a responsive site will zoom better because its not a fixed width.
hey Paul, the site is not fixed width, maybe you see a cached version of my old site for some reason?
and I say zoom because i’m testing on desktop first, because if i zoom in and I get horizontal scrollbar at some point then something is wrong, all site so far is responsive besides of these pages I posted, and its because the slider isn’t responsive for some reason although it should.
I tried but it has no point anyway.
I already got by default:
slidesToShow: 1,
slidesToScroll: 1
these settings are only to make space for images to be larger on smaller screens, it doesn’t actually change plugin size which should be done automatically as far as i can understand it.
He’s examples are really aweful, using h3 tags instead of actuall images for the examples
I belive ryan can be the best answer as he said he is using this plugin but he doesn’t seem to be around the last day @RyanReese
That script doesn’t seem to work inside table-cells. If you remove the display:table, display:table-row and display:table-cell from the rules in that page then the slider starts working again.
That page is pretty tall anyway so you don;t really need a sticky footer approach so I would add a class to the body on that page and use it to modify the rules I mentioned to display:block instead (and heights on rows to auto) .
Paul seems to have given you the answer. When I compare the CSS classes and CSS code, it all matches. However upon resize, Javascript was working for demos but NOT for your example. This made me conclude the Javascript is faulty. I’m not sure why table cells are cuasing it to break but that’s another question for another day.
Well wanted to try out ralphm slider suggestion and what do I find out, that it doesn’t work when using table-cell either! sigh http://petpal.co.il/pet-3124
Guess i’ll just pass on and make that page display block like paul suggested, although I don’t like such workarounds
Edit* actually, it just doesn’t work when zooming in, when viewing on my mobile or refreshing the page on desktop when screen is already zoomed in, the plugin is responsive, so ill just leave it like that ^^.
I do have a really tiny horizontal scrollbar appearing for some reason when for example im loading the page when the browser is fully zoomed or on mobile, I don’t see any margins on the plugin thought, any ideas?