ZX Slideshow support thread

[balihr]

OK, here's a solution on how to center ZX Slideshow for all those interested:

Go to includes/templates/YOUR_TEMPLATE/css/index_home.css and find lines 90-97. Originally, this is how it looks:

.theme-default .nivoSlider {
    position:relative;
    background:#fff url("../images/loading.gif") no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}

Now, simply change the code in red with margins of your choice. For those who don't know, the numbers represent "top right bottom left". Change it to something like this if you want the slideshow to be centered:

.theme-default .nivoSlider {
    position:relative;
    background:#fff url("../images/loading.gif") no-repeat 50% 50%;
    margin:0 auto 50px auto;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}

This is it, your slideshow should now be centered.

[muteyaar]

Hi,
Firstly thanks for this addon...
I am testing my store on my localhost.I was trying to move my slideshow container to under navigation bar.On home page everything is fine script works great but when click another links, I cant see buttons and images sliding to different position, it looks like something is missing or css problem. what am i doing wrong? could you help me about this issue please?

OK, here's a solution on how to center ZX Slideshow for all those interested:

Go to includes/templates/YOUR_TEMPLATE/css/index_home.css and find lines 90-97. Originally, this is how it looks:

.theme-default .nivoSlider {
    position:relative;
    background:#fff url("../images/loading.gif") no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}

Now, simply change the code in red with margins of your choice. For those who don't know, the numbers represent "top right bottom left". Change it to something like this if you want the slideshow to be centered:

.theme-default .nivoSlider {
    position:relative;
    background:#fff url("../images/loading.gif") no-repeat 50% 50%;
    margin:0 auto 50px auto;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}

This is it, your slideshow should now be centered.

I just tried to do it, but the slideshow remains in the left only.

kindly check my website.

[muteyaar]

It is working great now. Thanks a lot for your help...

[balihr]

It actually DOES work. The link you gave me (.com) is just an iframe. Try visiting your site on it's original URL. BTW, I hope you are aware that you shouldn't be using Zen Cart in iframe...

[rjc_nnc]

Hi Balihr,
I just installed the mod with no problems and it runs, however, there is a "line" around the image so that if I put it on top a background I see an outline. Almost like a drop shadow in a way. I have tried both .png and .jpg versions of the files. Any ideas on how to get rid of this "outline"?

[twistafix]

Hi Balihr,
I just installed the mod with no problems and it runs, however, there is a "line" around the image so that if I put it on top a background I see an outline. Almost like a drop shadow in a way. I have tried both .png and .jpg versions of the files. Any ideas on how to get rid of this "outline"?

Hi rjc

From my understanding of this, there is in the /includes/templates/YOUR_TEMPLATE/css/index_home.css file, a section of code looking something like this

.theme-default .nivoSlider {
	position:relative;
	background:#fff url("../images/loading.gif") no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;/*4a4a4a*/
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}

the shadow you are refering to is defined by the lines

-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;

change each of them, to look like

-webkit-box-shadow: 0px #4a4a4a;
-moz-box-shadow: 0px #4a4a4a;
 box-shadow: 0px #4a4a4a;

and that should set no shadow all the way around the slideshow.

[rjc_nnc]

Thanks so much twistafix!! That is exactly what I needed...now everything is looking good!

[muteyaar]

Hi Balihr,

Thanks for your help.

I have a question.

can I use the mod to show on a specific category page?

I mean, is it possible to have multiple slideshows, one for each category in my shop?

If possible, let me know how this can be done.

best regards

[djohanaa]

OK, here's a solution on how to center ZX Slideshow for all those interested:

Go to includes/templates/YOUR_TEMPLATE/css/index_home.css and find lines 90-97. Originally, this is how it looks:

.theme-default .nivoSlider {
    position:relative;
    background:#fff url("../images/loading.gif") no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}

Now, simply change the code in red with margins of your choice. For those who don't know, the numbers represent "top right bottom left". Change it to something like this if you want the slideshow to be centered:

.theme-default .nivoSlider {
    position:relative;
    background:#fff url("../images/loading.gif") no-repeat 50% 50%;
    margin:0 auto 50px auto;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}

This is it, your slideshow should now be centered.

I tried the above code to center the slideshow but it doesnt work. I have no idea what I am doing wrong.
My website is a is a "fluid" width site, meaning that its width changes as your customers' browser
width changes.

So on my laptop my slideshow looks center and looks fine but if I go to my desktop which wider screen the slideshow shows only to the left leaving a empty space on the right side.

Can anyone help me... I been at this for a week now and at this point don't know how to fix it. just in case website is secretofbelieving.com

[balihr]

I tried the above code to center the slideshow but it doesnt work. I have no idea what I am doing wrong.
My website is a is a "fluid" width site, meaning that its width changes as your customers' browser
width changes.

So on my laptop my slideshow looks center and looks fine but if I go to my desktop which wider screen the slideshow shows only to the left leaving a empty space on the right side.

Can anyone help me... I been at this for a week now and at this point don't know how to fix it. just in case website is secretofbelieving.com

Please replace the file includes/templates/cherry_zen/jscript/jquery.nivo.slider.pack.js with the one attached (unzip first), clear your cache and see if it works for you. Keep in mind that your images MUST have the same dimensions! Let us all know if it helps you.