I've been searching and twisting this slideshow and doesn't do what I want. I apologize if this has been asked before.
I have a slideshow on wfcomputerpr.com. As you can see I have a background image to accommodate the images inside. The issue here is that the background image is not adjusting as the others do in responsive environment. What should I do in this case?
IDEAS Girl
IDEAS Creative Group = Your image... our business!
Interesting request. :) Take a look at stackoverflow solution. Adding
to the first line in index_home.css does the trick, but some further styling WILL be required. You might consider some @media max-width rules to improve it...Code:background-size:contain; background-position:center;
Thanks! I tried that approach (your suggestion) but then each image will constrain differently, and it will throw off the padding created to make them center properly.Interesting request. :) Take a look at stackoverflow solution. Adding
I have max-width and height in place, not sure if changing to your suggestion will change the result to a successful display, will it?You might consider some @media max-width rules to improve it...
IDEAS Girl
IDEAS Creative Group = Your image... our business!
I'm not sure why you combined padding on parent div and margin on child, but that's what set you off on the wrong track. I got it working, but it still needs additional @media queries to make it work with different screen sizes...
Now, find your breakpoints and change 53px and 49px to whatever is necessary to get it properly aligned for those screen sizes. That's as far as I can go with this, don't have time to play with it some more, sorry.Code:.slider-wrapper.theme-default { background-image:url("../images/slider-bg.png"); background-repeat:no-repeat; background-size:contain; padding-left:53px; padding-top:49px; } .theme-default .nivoSlider { background:url("../images/loading.gif") no-repeat scroll 50% 50% #fff; max-height:300px; max-width:600px; position: relative; }
Regards,
Leonard
I absolutely love this mod! Exactly what I was looking for! One question. I put some pics in just to test out and everything works great. Then I resized the images, deleted the original images off my site and uploaded the resized images. My slideshow still shows the original sized images. I deleted the banners and made new ones , that didn't work. I renamed the pictures, that didn't work. Why is my slideshow using the incorrect image sizes? Is there some cache I need to clear?
My Site - Zen Cart & WordPress integration specialist
I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.
Last edited by hflsales; 27 Feb 2015 at 01:45 AM.
Okay, I figured it out. I guess all of the images have to be the exact width & height. Once I made all the pics the exact same size, it worked.
Sorry, could reply sooner...
You guessed it right! :) Yes, images should be same width and height, otherwise the responsive features come into action. You have a preset width, which is usually the parent container (mostly main content width). ZX Slideshow will take your image, resize it to fit the container and of course, keep aspect ratio. If your slides have different dimensions, it will look like it jumping up and down, but that's the downside of a responsive feature. If your slides are same width and height, it will look good.
Bookmarks