ZX Slideshow support thread

[ideasgirl]

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?

[balihr]

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?

Interesting request. :) Take a look at stackoverflow solution. Adding

background-size:contain;
background-position:center;

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...

[ideasgirl]

Interesting request. :) Take a look at stackoverflow solution. Adding

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.

You might consider some @media max-width rules to improve it...

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?

[balihr]

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.


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?

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...

.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;
}

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.

Regards,
Leonard

[hflsales]

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?

[DivaVocals]

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?

Suggest using FTP and removing the first set of images you uploaded from your servers.. I'm pretty sure that the delete function form the admin doesn't always remove the file from the servers..

[hflsales]

Suggest using FTP and removing the first set of images you uploaded from your servers.. I'm pretty sure that the delete function form the admin doesn't always remove the file from the servers..

Yes, I deleted all of my images with filezilla, renamed them, uploaded them again with the new names. It still uses the original image sizes. The original pics were all different heights, the ones I resized & renamed all have the same height. heels4less .com