ZX Slideshow support thread

[balihr]

It's impossible to help you without a link to your site...

[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]

Attachment 10642Attachment 10643

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

[balihr]

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

Yes, you can, although it won't be very simple. You only have 10 banner positions to use. If you use 5 of those positions for homepage, you're left with only 5 more for category pages. So, first of all, you'd need to add more banner positions depending on how many you really want. Then, you'd have to hard code which positions are used on a specific category.

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

A slideshow on every category page? IMHO, not at all user friendly and personally I would hate a site doing this. But, it's your choice.

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

It's quite a lot of work and thus beyond my free forum support, sorry. Perhaps someone else would like to step in and explain it in details for you...