Why the slide show disappear in another language?

4 Dec 2011, 7:05 PM

#1

Zen Follower

Join Date:: Sep 2011
Location:: Toronto, Ontario, Canada
Posts:: 290
Plugin Contributions:: 0

Why the slide show disappear in another language?

Hi folks,

My website is: ibnest, there are English and Chinese version: in English version, you can see the slide shows works fine in home page, but when you switch language to Chinese, the slide show disappear!

Can someone tell me how to get it working in both languages?

Thank you very much.

4 Dec 2011, 7:39 PM

#2

webstar59

New Zenner

Join Date:: Jun 2011
Location:: California
Posts:: 63
Plugin Contributions:: 0

Re: Why the slide show disappear in another language?

I think your language file for Chinese is not installed right. Did it work befor you added the slideshow?

4 Dec 2011, 8:50 PM

#3

webstar59

New Zenner

Join Date:: Jun 2011
Location:: California
Posts:: 63
Plugin Contributions:: 0

Re: Why the slide show disappear in another language?

Create a directory in the root of your store (ibnest) called myscripts put all the jscript_jquery.js files for the slideshow in the new directory.

Also to make things more clean make a file named myslideshow.js copy the code below and paste it in myslideshow.js. Put this file in the new directory myscripts.

Now in includes/templates/Yourcustomtemplate/common/html_header.php add this link instead of having the JavaScript in the head. Yourcustomtemplate is the name of your template

Make sure you put this link just below the link to jscript_jquery.js

Also you my have to make some changes to the style sheet for the slideshow to reflect the new directory
You created.

PS I did not test this script to see if it works so make some test first
Thanks

// My Jquery Slideshow Document


$(document).ready(function () {

(function($) {

	$.fn.easySlider = function(options){
	  
		// default configuration properties
		var defaults = {			
			prevId: 		'prevBtn',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			controlsShow:	true,
			controlsBefore:	'',
			controlsAfter:	'',	
			controlsFade:	true,
			firstId: 		'firstBtn',
			firstText: 		'First',
			firstShow:		false,
			lastId: 		'lastBtn',	
			lastText: 		'Last',
			lastShow:		false,				
			vertical:		false,
			speed: 			2000,
			auto:			false,
			pause:			3000,
			continuous:		false, 
			numeric: 		false,
			numericId: 		'controls'
		}; 
		
		var options = $.extend(defaults, options);  
				
		this.each(function() {  
			var obj = $(this); 				
			var s = $("li", obj).length;
			var w = $("li", obj).width(); 
			var h = $("li", obj).height(); 
			var clickable = true;
			obj.width(w); 
			obj.height(h); 
			obj.css("overflow","hidden");
			var ts = s-1;
			var t = 0;
			$("ul", obj).css('width',s*w);			
			
			if(options.continuous){
				$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
				$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
				$("ul", obj).css('width',(s+1)*w);
			};				
			
			if(!options.vertical) $("li", obj).css('float','left');
								
			if(options.controlsShow){
				var html = options.controlsBefore;				
				if(options.numeric){
					html += '<div id="control_div"><ol id="'+ options.numericId +'"></div></ol>';
				} else {
					if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
					html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
					html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
					if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';				
				};
				
				html += options.controlsAfter;						
				$(obj).after(html);										
			};
			
			if(options.numeric){									
				for(var i=0;i<s;i++){						
					$(document.createElement("li"))
						.attr('id',options.numericId + (i+1))
						.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
						.appendTo($("#"+ options.numericId))
						.click(function(){							
							animate($("a",$(this)).attr('rel'),true);
						}); 												
				};							
			} else {
				$("a","#"+options.nextId).click(function(){		
					animate("next",true);
				});
				$("a","#"+options.prevId).click(function(){		
					animate("prev",true);				
				});	
				$("a","#"+options.firstId).click(function(){		
					animate("first",true);
				});				
				$("a","#"+options.lastId).click(function(){		
					animate("last",true);				
				});				
			};
			
			function setCurrent(i){
				i = parseInt(i)+1;
				$("li", "#" + options.numericId).removeClass("current");
				$("li#" + options.numericId + i).addClass("current");
			};
			
			function adjust(){
				if(t>ts) t=0;		
				if(t<0) t=ts;	
				if(!options.vertical) {
					$("ul",obj).css("margin-left",(t*w*-1));
				} else {
					$("ul",obj).css("margin-left",(t*h*-1));
				}
				clickable = true;
				if(options.numeric) setCurrent(t);
			};
			
			function animate(dir,clicked){
				if (clickable){
					clickable = false;
					var ot = t;				
					switch(dir){
						case "next":
							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
							break; 
						case "prev":
							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
							break; 
						case "first":
							t = 0;
							break; 
						case "last":
							t = ts;
							break; 
						default:
							t = dir;
							break; 
					};	
					var diff = Math.abs(ot-t);
					var speed = diff*options.speed;						
					if(!options.vertical) {
						p = (t*w*-1);
						$("ul",obj).animate(
							{ marginLeft: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);				
					} else {
						p = (t*h*-1);
						$("ul",obj).animate(
							{ marginTop: p }, 
							{ queue:false, duration:speed, complete:adjust }
						);					
					};
					
					if(!options.continuous && options.controlsFade){					
						if(t==ts){
							$("a","#"+options.nextId).hide();
							$("a","#"+options.lastId).hide();
						} else {
							$("a","#"+options.nextId).show();
							$("a","#"+options.lastId).show();					
						};
						if(t==0){
							$("a","#"+options.prevId).hide();
							$("a","#"+options.firstId).hide();
						} else {
							$("a","#"+options.prevId).show();
							$("a","#"+options.firstId).show();
						};					
					};				
					
					if(clicked) clearTimeout(timeout);
					if(options.auto && dir=="next" && !clicked){;
						timeout = setTimeout(function(){
							animate("next",false);
						},diff*options.speed+options.pause);
					};
			
				};
				
			};
			// init
			var timeout;
			if(options.auto){;
				timeout = setTimeout(function(){
					animate("next",false);
				},options.pause);
			};		
			
			if(options.numeric) setCurrent(0);
		
			if(!options.continuous && options.controlsFade){					
				$("a","#"+options.prevId).hide();
				$("a","#"+options.firstId).hide();				
			};				
			
		});
	  
	};

})(jQuery);

});

4 Dec 2011, 8:51 PM

#4

mdivk

Zen Follower

Join Date:: Sep 2011
Location:: Toronto, Ontario, Canada
Posts:: 290
Plugin Contributions:: 0

Re: Why the slide show disappear in another language?

webstar59:

I think your language file for Chinese is not installed right. Did it work befor you added the slideshow?

The Chinese language support works just fine even now (I have been doing some treaking, not sure if you encountered issue when I was doing it), it's just the slide show seems not installed or need translated in Chinese version.

4 Dec 2011, 8:56 PM

#5

mdivk

Zen Follower

Join Date:: Sep 2011
Location:: Toronto, Ontario, Canada
Posts:: 290
Plugin Contributions:: 0

Re: Why the slide show disappear in another language?

I found where is the problem: after installing the second language, you need to create the page in Admin->Tool->Define Page Editor

4 Dec 2011, 8:57 PM

#6

mdivk

Zen Follower

Join Date:: Sep 2011
Location:: Toronto, Ontario, Canada
Posts:: 290
Plugin Contributions:: 0

Re: Why the slide show disappear in another language?

webstar59:

Create a directory in the root of your store (ibnest) called myscripts put all the jscript_jquery.js files for the slideshow in the new directory.

Also to make things more clean make a file named myslideshow.js copy the code below and paste it in myslideshow.js. Put this file in the new directory myscripts.

Now in includes/templates/Yourcustomtemplate/common/html_header.php add this link instead of having the JavaScript in the head. Yourcustomtemplate is the name of your template
<script type="text/javascript" src="myscripts/myslideshow.js"></script>
Make sure you put this link just below the link to jscript_jquery.js

Also you my have to make some changes to the style sheet for the slideshow to reflect the new directory
You created.

PS I did not test this script to see if it works so make some test first
Thanks

// My Jquery Slideshow Document

$(document).ready(function () {

(function($) {

$.fn.easySlider = function(options){
  
	// default configuration properties
	var defaults = {			
		prevId: 		'prevBtn',
		prevText: 		'Previous',
		nextId: 		'nextBtn',	
		nextText: 		'Next',
		controlsShow:	true,
		controlsBefore:	'',
		controlsAfter:	'',	
		controlsFade:	true,
		firstId: 		'firstBtn',
		firstText: 		'First',
		firstShow:		false,
		lastId: 		'lastBtn',	
		lastText: 		'Last',
		lastShow:		false,				
		vertical:		false,
		speed: 			2000,
		auto:			false,
		pause:			3000,
		continuous:		false, 
		numeric: 		false,
		numericId: 		'controls'
	}; 
	
	var options = $.extend(defaults, options);  
			
	this.each(function() {  
		var obj = $(this); 				
		var s = $("li", obj).length;
		var w = $("li", obj).width(); 
		var h = $("li", obj).height(); 
		var clickable = true;
		obj.width(w); 
		obj.height(h); 
		obj.css("overflow","hidden");
		var ts = s-1;
		var t = 0;
		$("ul", obj).css('width',s*w);			
		
		if(options.continuous){
			$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
			$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
			$("ul", obj).css('width',(s+1)*w);
		};				
		
		if(!options.vertical) $("li", obj).css('float','left');
							
		if(options.controlsShow){
			var html = options.controlsBefore;				
			if(options.numeric){
				html += '<div id="control_div"><ol id="'+ options.numericId +'"></div></ol>';
			} else {
				if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
				html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
				html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
				if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';				
			};
			
			html += options.controlsAfter;						
			$(obj).after(html);										
		};
		
		if(options.numeric){									
			for(var i=0;i<s;i++){						
				$(document.createElement("li"))
					.attr('id',options.numericId + (i+1))
					.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
					.appendTo($("#"+ options.numericId))
					.click(function(){							
						animate($("a",$(this)).attr('rel'),true);
					}); 												
			};							
		} else {
			$("a","#"+options.nextId).click(function(){		
				animate("next",true);
			});
			$("a","#"+options.prevId).click(function(){		
				animate("prev",true);				
			});	
			$("a","#"+options.firstId).click(function(){		
				animate("first",true);
			});				
			$("a","#"+options.lastId).click(function(){		
				animate("last",true);				
			});				
		};
		
		function setCurrent(i){
			i = parseInt(i)+1;
			$("li", "#" + options.numericId).removeClass("current");
			$("li#" + options.numericId + i).addClass("current");
		};
		
		function adjust(){
			if(t>ts) t=0;		
			if(t<0) t=ts;	
			if(!options.vertical) {
				$("ul",obj).css("margin-left",(t*w*-1));
			} else {
				$("ul",obj).css("margin-left",(t*h*-1));
			}
			clickable = true;
			if(options.numeric) setCurrent(t);
		};
		
		function animate(dir,clicked){
			if (clickable){
				clickable = false;
				var ot = t;				
				switch(dir){
					case "next":
						t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
						break; 
					case "prev":
						t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
						break; 
					case "first":
						t = 0;
						break; 
					case "last":
						t = ts;
						break; 
					default:
						t = dir;
						break; 
				};	
				var diff = Math.abs(ot-t);
				var speed = diff*options.speed;						
				if(!options.vertical) {
					p = (t*w*-1);
					$("ul",obj).animate(
						{ marginLeft: p }, 
						{ queue:false, duration:speed, complete:adjust }
					);				
				} else {
					p = (t*h*-1);
					$("ul",obj).animate(
						{ marginTop: p }, 
						{ queue:false, duration:speed, complete:adjust }
					);					
				};
				
				if(!options.continuous && options.controlsFade){					
					if(t==ts){
						$("a","#"+options.nextId).hide();
						$("a","#"+options.lastId).hide();
					} else {
						$("a","#"+options.nextId).show();
						$("a","#"+options.lastId).show();					
					};
					if(t==0){
						$("a","#"+options.prevId).hide();
						$("a","#"+options.firstId).hide();
					} else {
						$("a","#"+options.prevId).show();
						$("a","#"+options.firstId).show();
					};					
				};				
				
				if(clicked) clearTimeout(timeout);
				if(options.auto && dir=="next" && !clicked){;
					timeout = setTimeout(function(){
						animate("next",false);
					},diff*options.speed+options.pause);
				};
		
			};
			
		};
		// init
		var timeout;
		if(options.auto){;
			timeout = setTimeout(function(){
				animate("next",false);
			},options.pause);
		};		
		
		if(options.numeric) setCurrent(0);
	
		if(!options.continuous && options.controlsFade){					
			$("a","#"+options.prevId).hide();
			$("a","#"+options.firstId).hide();				
		};				
		
	});
  
};

})(jQuery);

});


Thank you.