ZX Slideshow support thread

Great! thankx, that was the culprit. After I removed it the slides are shown properly! Many thanks!

Hi.

I have been reading the "multi lingual banners" thread, and it is addressed that the banners can be identified by languages. Here is an explanation of how to do that: http://www.zen-cart.com/showthread.php?77636-multi-lingual-banners/page7

The link refers back to Post #22 in that multi lingual banner thread, which is here: http://www.zen-cart.com/showthread.php?77636-multi-lingual-banners&p=866806#post866806.

I think I could figure out how to do that if I understood how to make a banner group in this very easy to use ZX Slideshow module. Since I am not using the usual Zen Cart Banner Groups, I am not sure how to transfer the instructions to the banner groups for Slide1 through Slide10.

May one use this module with more than one language? If so, what is the beat way to configure it?

Thanks.
Notageek

notageek:

Hi.

I have been reading the "multi lingual banners" thread, and it is addressed that the banners can be identified by languages. Here is an explanation of how to do that: http://www.zen-cart.com/showthread.php?77636-multi-lingual-banners/page7

The link refers back to Post #22 in that multi lingual banner thread, which is here: http://www.zen-cart.com/showthread.php?77636-multi-lingual-banners&p=866806#post866806.

I think I could figure out how to do that if I understood how to make a banner group in this very easy to use ZX Slideshow module. Since I am not using the usual Zen Cart Banner Groups, I am not sure how to transfer the instructions to the banner groups for Slide1 through Slide10.

May one use this module with more than one language? If so, what is the beat way to configure it?

Thanks.
Notageek

I don't feel like explaining so I just attached a file. Upload that file to your includes/templates/YOUR_TEMPLATE/templates/ directory. This will give you multilingual support. **WRONG: **Then, when in Banner Manager, just assign your banner to slide1_1 group for English, slide1_2 for language with ID 2 etc. Notice the part in red - this is the language identifier. You can see this in action on the last site in my sig (only FI and EN banners created).

EDIT: This file is actually slightly different and perhaps more user friendly. :smile: All you need to do is add a banner to slide1_en for English, slide1_fr for French etc. - it's using language code instead of language ID. So, just add the underscore and language code and that's it.

Hi.

Thanks for the multi-lingual zx_slideshow.php file. I substituted it in for the monolingual file after renaming the monolingual file, and added the banners in the Admin, Banner Manager as Slide1_en and Slide1_es, and both English and Spanish banners work perfectly after re-uploading the banners previously uploaded into the monolingual version.

This module is incredibly easy to use. Thank you. (My site is not live yet, but eventually you will see the slider at w w w.g o k a r a o k e m a c h i n e . c o m (spaces added so this thread will not come up on a search for my website).

Hi.

I downloaded the patch from page 21, post 210, but I now realize it wasn't necessary because the slider was already showing even though my categories were set to show on the main page, so I believe your module was upgraded to allow that feature.

I was actually trying to center the slideshow. I had downloaded the earlier tpl_index_categories.pho at page 9 post 85, and copied to includes/templates/YOUR_TEMPLATE/templates file.

Neither file had any effect in centering the slideshow. It is justified to the left.

As a matter of curiosity, there was no such file in existence in my downloaded module, so I am wondering if I need that file or can just delete it. I guess I will delete it and see what happens.

My actual question is how theslideshow may be centered. Is there CSS coding that needs to be changed to center the slideshow?

Notageek

I did note a reply to Post 75 which gave this advice about centering the slideshow:

I will assume that you want to center the slider. Edit index_home.css at line 93 and change to margin: 0 auto;
This is how that block should look like:
Code:
.theme-default .nivoSlider {
position:relative;
background:#fff url("../images/loading.gif") no-repeat 50% 50%;
margin: 0 auto;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}

I do see that in the includes/templates/YOUR_Template/templates/css/index_home.css file.

However, the line 93 states not just "margin," but rather "margin-bottom:50px;"

In my .css file, farther down, at lines 109 to 113, it says:

.theme-default .nivo-controlNav {
position:absolute;
left:50%;
bottom:-42px;
margin-left:-40px; /* Tweak this to center bullets */

It seems like centering left to right should be controlled by the "margin-left:-40px;" code, especially given the comment: "Tweek this to center bullets." I'm not centering bullets, just the slider, but I don't think the margin-bottom is safe to play with.

I suppose I should just try to change line 93 to see what happens, and perhaps I will summon the courage or effort to do so, but if someone could explain why it is safe to take out the "-bottom" and make the changes discussed as to line 93, I would be able to understand what is happening better.

Thanks for any CSS assistance by way of explanation.

Notageek

notageek:

I did note a reply to Post 75 which gave this advice about centering the slideshow:

I do see that in the includes/templates/YOUR_Template/templates/css/index_home.css file.

However, the line 93 states not just "margin," but rather "margin-bottom:50px;"

Margin is just shortened syntax, nothing else. I suggest reading the detailed explanations at w3schools.

So, just do what you read about in post 75 and you should be fine. If you want to keep the bottom margin, you can always replace the line mentioned with

margin:0 auto 50px auto;

Have fun.

Hi. An immense thank you for the reference. So above and beyond the call of duty and it really helps me for the future.

Thanks again for this trouble-free, brilliant module.

Notageek

Hi,
Fantastic job you have done, and I am pleased to be one of the many who will be/are using your slideshow.

My question is: Is there any way to change the transitions? JQuery has a slide effect I would like to use but I do not know how to implement it in your code.

Thank you in advance.

day-o:

Hi,
Fantastic job you have done, and I am pleased to be one of the many who will be/are using your slideshow.

My question is: Is there any way to change the transitions? JQuery has a slide effect I would like to use but I do not know how to implement it in your code.

Thank you in advance.

Glad to hear you like the module. :smile:

The module comes with 16 transition effects built in. If you don't like any of the 16 transitions available and want to add your own custom effects, you'll have to modify the jquery code used by the slider (includes/templates/YOUR_TEMPLATE/jscript/jquery.nivo.slider.pack.js)
Since the module is based on Nivo Slider, you'll have to figure out how to create custom transition effects and how to use it. I'm afraid I can't help you with that.

Hi.

I want to report that this module works well with the Zencart_zen template. As that template has an extensive includes/templates/Zencart_zen/css/index_home.css file, I was concerned and puzzled at how I would "merge" the two files, but I simply pasted the ZX Slideshow code at the end of that file, and that was successful. I had overwritten that file on first installation, and of course, the only problem was that the Zencart_zen CSS code was then not operational until I made this change.

I also merged one other file very easily with WinMerge, but with that file it was very obvious what to do in WinMerge. Just thought another "Merge" beginner could benefit from this information.

Notageek

Hi.

I might be having the same problem as Roseniko described in Post 217:> Even though I put Banner URL on Banner Manager page, the hyperlink does not work.

(only the first slide image has the link on when it loads, but after the image gets replaced with others, it just is not working - No more link - it's gone)

In my slideshow at www. go karaoke machine dot com, which works amazingly well, I find that, although I put in a separate link for each slide, the only link that works for each slide is the link of the first slide. Every slide, when clicked, goes to that link.

I did put in 3 extra slides which rotate in. Maybe that threw everything off.

Or, the problem could be in my index_home.css file, because I added the ZX Slideshow code to the bottom of the file I already had for the Zencart_zen template. That code is here:

h3 {
	font-size:1.2em;
	font-weight: bold;
	line-height: normal;
}
.boxLeft {
	margin: 10px auto;
	padding: 5px 0 15px 10px;
   background: #eaeaea;
	border: solid #B6ABD5;
	border-width: 2px 0 1px 0;
	width: 310px;
	float: left;
	height:290px;
	}
#CustomSlideshow {
	 margin:15px 20px 0 0;
	 padding:10px 20px 0 0;
    -webkit-transform: rotate(-3deg) scale(0.9);
    -moz-transform: rotate(-3deg) scale(0.9);
    transform: rotate(-3deg) scale(0.9);
}

label.inputLabelMailchimp{width: 8em;float: left;line-height:normal;}

form#news {

	counter-reset: fieldsets;	
}
form#news fieldset {
	margin-bottom: 10px;
display:block;
	background:#FFEDCF;
	border:1px solid #6F675A;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}
form#news fieldset:last-of-type {margin-bottom: 0;}
form#news legend {
	padding: 0.3em;
	font-size: 1.1em;
	color: #000;
	font-weight:bold;
	text-shadow: 0 1px 1px #ACADB0;
}
form#news > fieldset  > fieldset > legend:before {
	content: "Step " counter(fieldsets) ": ";
	counter-increment: fieldsets;
	}
form#payment fieldset fieldset legend {
	color: #000;
	font-size: 1.2em;
	font-weight: normal;
	padding-bottom: 0;
	}	
form#news fieldset fieldset {
	border:none;
}
/*form#news ol {  
padding: .5em .5em 0 .5em;  
list-style: none;
}*/
form#news ol li {
	margin-bottom: 2px;  
	padding: 5px 10px .5em;
	background: #FFF2DD;
	background: rgba(255,255,255,.3);
	border-color: #EDF6FF;
	border-color: rgba(255,255,255,.6);
	border-style: solid;
	border-width: 2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	line-height: 30px;
	list-style: none;
}
form#news fieldset:first-of-type {margin-top: 0;}




.boxLeft p {
	margin: 0;
	padding: 0 3px 3px 5px;
	line-height: 1.3em;
	}
.boxLeft p:first-of-type {margin-top: 5px;}		
.boxLeft p span {
	color: #000080;
	font-family:Georgia,serif;
	font-weight: bold;
	font-size:.8em;
	text-transform:uppercase;
	letter-spacing:2px; 
}	
.boxLeft p a {
	text-decoration: underline;
}
.boxLeft p a:hover {
	text-decoration: underline;
	background:#EDA93A;
}	
.boxLeft h2 {
	margin: 0 0 1em 0;
	padding: 0;
	font-weight: bold;
	line-height: 1.3em;
	text-align: center;
	color: #000080;
	border-top: 1px solid #d3d0c2;
	border-bottom: 1px solid #d3d0c2;
	font-variant: small-caps;
	}
.boxLeft h3 a{
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000080;
	}

	.boxRight {
	margin: 10px auto;
	padding: 5px 8px 5px 8px;
   background: #eaeaea;
	border: solid #B6ABD5;
	border-width: 2px 0 1px 0;
	width: 49%;
	float: right;
	}
.boxRight .centerBoxWrapper {
	margin: 0;
	border: 1px solid #DFDFDF;
	border-width: 0 0 1px 0;
	width:100%;
	}
.boxRight .centerBoxContentsNew	{
	margin: 0;
	padding:0;	
}	
.boxRight p {
	margin: 0;
	padding: 3px 3px 3px 5px;
	line-height: normal;
	}
.boxRight p:first-of-type {margin-top: 5px;}	
.boxRight p span {
	color: #000080;
	font-family:Georgia,serif;
	font-size:.8em;
	font-weight: bold;
	text-transform:uppercase;
	letter-spacing:2px; 
}
.boxRight p a, .greeting a {
	background:none;
}
.boxRight p a:hover, .greeting a:hover {
	background:none;
}	
.boxRight h2 {
	margin: 0;
	padding: 0;
   background: #eaeaea;
	font-weight: bold;
	line-height: 1.3em;
	text-align: center;
	color: #000080;
	border-top: 1px solid #d3d0c2;
	border-bottom: 1px solid #d3d0c2;
	font-variant: small-caps;
	}
		
.box {
	padding: 0 .5em;
	border: 2px solid #B6ABD5;
	background: #F9F4EC;
	}	
.box p {font-style: normal;}
 
.boxtwoText {margin:0 0 0 40px;padding:0;float:left;width:45%;}
.boxtwoText ul li {font-size: 0.9em;}
.boxtwoText p {font-style: normal;}

.edit {
	text-decoration: line-through;
	color: red;
}
.continueReading {
padding: .3em;
	float: right;
	font-size:.9em;
}

#centercolumnFooter {
margin: 0;
padding: 0;
border: solid #000;
border-width: 1px 0 0 0;
}
#holder {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px #666;
	width: 580px;
	height: 370px;
	float:right;
	margin :1em;
	background:url(../images/bg.png) right bottom no-repeat
}
/*
 * jQuery Nivo Slider v2.7.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:8;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:9;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}
.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;
}
.theme-default .nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.theme-default .nivoSlider a {
	border:0;
	display:block;
}

.theme-default .nivo-controlNav {
	position:absolute;
	left:50%;
	bottom:-42px;
    margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url("../images/bullets.png") no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.theme-default .nivo-controlNav a.active {
	background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url("../images/arrows.png") no-repeat;
	text-indent:-9999px;
	border:0;
}
.theme-default a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
.theme-default a.nivo-prevNav {
	left:15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}

The code is not gone from the banner manager. It's just being ignored.

I have searched Google and looked at banner information, but so far have not unearthed an explanation. I'm having some other problems which I will mention in the next post, so maybe they are related to the single URL problem.

Thanks for any help.

Notageek

May in connection with the above post about URLs being ignored for individual banners, I am seeing the following 3 problems.

1. When I first go to my website, I can see the slide name and 12345678910 at the top left of my slide, and they become bold when hovered on, but are inactive. Also, when Ii hoaver over that upper left corner, I see "next/prev" but that too is inactive. At the same time, the 10 slide dots under the slide do not appear.

I realize these disappear with changing the items in the configuration file (caption opacity at zero, show numbered navigation at false), but everything is generally set to true and the header opacity is at the 0.8, and these things do go away on the refresh.

2. I cannot select a banner by the dots 1-10 below the slideshow.

3. Hovering over the banner, I cannot use the arrows to go to next and previous. The arrows are inoperable.

Maybe the answer is in the index_home.css code in the post just above this one.

Any suggestions will be appreciated.

Notageek

Hi. In regard to the above two posts, I want to point out that I have not set a sort order for the banners. I assumed they would display in their numbered order. I am wondering if setting a sort order would affect or solve the URL problem. I guess I will test that out next and post if there is any change.

Notageek

notageek:

In my slideshow at www. go karaoke machine dot com, which works amazingly well, I find that, although I put in a separate link for each slide, the only link that works for each slide is the link of the first slide. Every slide, when clicked, goes to that link.

Argh... Another bug in the module. I really need to submit an updated version...

Just go to admin->Configuration->ZX Slideshow and change the effect from "true" to "fade" or something else. Thing is - there is no such effect as "true", that's just something I missed in the code. It should work after you change the effect...

Hi, and thanks.

1. You really made me laugh.

2. I didn't tell you I had it set to "true."

3. This module is a small miracle.

Notageek

Hi
Please can someone help me. I have this module installed on my one of my site site using 1.3.9 and it works wonderfully. I have just tried to install onto my newer site which is running zen 1.5.0 and it comes up with error messages when i try to install the SQL patch.
I uploaded a slide via banner manager to make sure the files were correct and the slider does show on the front of my site but i cant change any settings because ZX slideshow is not showing in my configuration menu. Any ideas??

Thanks in advance Kriss

Hi Could I just ask, does this slideshow work in the new ZenCart version 1.5.1?

getiton:

Hi
Please can someone help me. I have this module installed on my one of my site site using 1.3.9 and it works wonderfully. I have just tried to install onto my newer site which is running zen 1.5.0 and it comes up with error messages when i try to install the SQL patch.
I uploaded a slide via banner manager to make sure the files were correct and the slider does show on the front of my site but i cant change any settings because ZX slideshow is not showing in my configuration menu. Any ideas??

Thanks in advance Kriss

Try to manually register the page. I have no idea why, but some installs just don't accept the Page Registration directly from the sql patch...

dharrison:

Hi Could I just ask, does this slideshow work in the new ZenCart version 1.5.1?

Yup, works just fine with 1.5.1 - already tested on a few sites :smile: