Und täglich grüsst der Slider :-(

Diskussionen rund um die Templates (incl. Smarty)
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Und täglich grüsst der Slider :-(

Beitrag von Kopernikus »

Seit bald 2 Jahren versuche ich sporadisch einen Slider auf meiner Seite einzubauen. Bisher endeten die stundenlangen Einbauversuche jedes Mal in der Sackgasse. Seit rund 4-Tagen versuche ich jedoch - bis jetzt leider erfolglos - einen solchen Slider auf meiner Seite einzubauen. Doch ich schaffe es einfach nicht, diesen korrekt einzubinden. Ich weiss nicht mehr wo ich den Fehler noch suchen könnte, denn ein ähnliches Modul welches ebenfalls eine dynamische Bildabfolge ermöglicht, konnte ich ohne weitere Probleme auf einer normalen html Seite einbinden. Deshalb meine grosse Bitte. Könntet Ihr kurz mal einen Blick auf meine Gebastel werfen? Ich bin sicher, ich mache nur einen kleinen Fehler.

Ich beginne zunächst mit dem Slider auf der html Seite. Dieser funktioniert hervorragend, solange dieser nicht im Shop direkt verbaut ist.

Hier der Link zum funktionierenden Slider: http://www.engelis-naturshop.ch/test2/
Und so sieht dieser aktuell in meinem Testshop aus: http://www.engelis-naturshop.ch/test

Interessant ist, dass das Bildkarusell welches ich nahezu identisch eingebaut habe, im Gegensatz zum Slider funktioniert.

Hier also kurz der Einbaubeschrieb und Code auf meiner normalen html Seite:

index.html (Hauptcode)

Code: Alles auswählen



	<link rel="stylesheet" href="stylesheets/skeleton.css">
	<link rel="stylesheet" href="stylesheets/style.css">
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/sequence.jquery-min.js"></script>	
	<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>


<div id="wrapper"> <!-- Main Navigation -->

	
		
	
	<!-- Sequence Slider --><script type="text/javascript">	
			var preloader = ($.browser.msie) ? false : true ;
			
			$(document).ready(function(){
				var options = {
					autoPlay: true,
					autoPlayDelay: 5000,
					nextButton: true,
					prevButton: true,
					preloader: preloader,
					animateStartingFrameIn: true,
					transitionThreshold: 500,
					fallback: {
			        	theme: "slide",
			        	speed: 500
			        }
				};
				
				var sequence = $("#sequence").sequence(options).data("sequence");
	
				sequence.afterLoaded = function(){
					$(".info").css('display','block');
					$("#sequence").hover(
					        function() {
					        	$(".prev, .next").stop().animate({opacity:0.7},300);	            
					        },
					        function() {        
					        	$(".prev, .next").stop().animate({opacity:0},300);
					        }
					);
					
					$(".prev, .next").hover(
					        function() {
					        	$(this).stop().animate({opacity:1},200);	            
					        },
					        function() {        
					        	$(this).stop().animate({opacity:0.7},200);
					        }		
					);
				}
			})
		</script>
	
	
	<div class="row no_bm">
		<div id="slider_holder" class="sixteen columns">
			<div id="sequence">
				<div class="prev" ><span></span></div>
				<div class="next" ><span></span></div>
	
				<ul>
					<!-- Layer 1 -->
					<li>
						<div class="info animate-in">
							<h2>Clean Design</h2>
							<h3>Clear Message</h3>
							<p>Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring</p>
							<p><a class="link" href="services.html">View Services &raquo;</a>
					    </div>
						<img class="slider_bgr animate-in" src="images/1.jpg"/>
						<img class="slider_img animate-in" src="images/1_1.png"/>
				    </li>
						
					<!-- Layer 2 -->
					<li>
						<div class="info">
							<h2>Slick & Smart</h2>
							<h3>Rich Admin Options</h3>
							<p>Fantasy is a necessary ingredient in living! Imagination is more important than knowledge. Knowledge is limited.</p>
							<p><a class="link" href="portfolio.html">View Portfolio &raquo;</a>
					    </div>
						<img class="slider_bgr" src="images/2.jpg"/>
						<img class="slider_img" src="images/2_2.png"/>
				    </li>
						
					<!-- Layer 3 -->
					<li>
						<div class="info">
							<h2>White ain't bad</h2>
							<h3>Fully Customizable</h3>
							<p>Fantasy is a necessary ingredient in living! Imagination is more important than knowledge. Knowledge is limited.</p>
							<p><a class="link" href="blog.html">Read Our Blog &raquo;</a>
					    </div>
						<img class="slider_img" src="images/3.jpg"/>
				    </li>					
			    </ul>
		    </div>
	    </div>
		<!-- Sequence Slider::END-->
    </div>
	
  </div>

Und folgende Ordner werden dafür benötigt:

/img (Bildordner)
/css (Stylesheets)
style.css
skeleton.css
/js (Javascript Files)
sequence.jquery-min.js
jquery.flexslider-min.js
jquery-1.7.2.min.js


Ok soweit der funktionierende Slider ausserhalb des Shops

Und so habe ich diesen derzeit im Shop verbaut:

In der main_content.html habe ich den code wie folgt integriert:

Code: Alles auswählen

{config_load file="$language/lang_$language.conf" section="index"}

<!-- BEGIN Slider -->  
{literal}<script type="text/javascript">	
			var preloader = ($.browser.msie) ? false : true ;
			
			$(document).ready(function() { 
				var options = {
					autoPlay: true,
					autoPlayDelay: 5000,
					nextButton: true,
					prevButton: true,
					preloader: preloader,
					animateStartingFrameIn: true,
					transitionThreshold: 500,
					fallback: {
			        	theme: "slide",
			        	speed: 500
			        }
				};
				
				var sequence = $("#sequence").sequence(options).data("sequence");
	
				sequence.afterLoaded = function(){
					$(".info").css('display','block');
					$("#sequence").hover(
					        function() {
					        	$(".prev, .next").stop().animate({opacity:0.7},300);	            
					        },
					        function() {        
					        	$(".prev, .next").stop().animate({opacity:0},300);
					        }
					);
					
					$(".prev, .next").hover(
					        function() {
					        	$(this).stop().animate({opacity:1},200);	            
					        },
					        function() {        
					        	$(this).stop().animate({opacity:0.7},200);
					        }		
					);
				}
			})
		</script>
        {/literal}
	<div class="row no_bm">
		<div id="slider_holder" class="sixteen columns">
			<div id="sequence">
				<div class="prev" ><span></span></div>
				<div class="next" ><span></span></div>
	
				<ul>
					<!-- Layer 1 -->
					<li>
						<div class="info animate-in">
							<h2>Clean Design</h2>
							<h3>Clear Message</h3>
							<p>Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring</p>
							<p><a class="link" href="services.html">View Services &raquo;</a>
					    </div>
						<img class="slider_bgr animate-in" src="{$tpl_path}img/1.jpg"/>
						<img class="slider_img animate-in" src="{$tpl_path}img/1_1.png"/>
				    </li>
						
					<!-- Layer 2 -->
					<li>
						<div class="info">
							<h2>Slick & Smart</h2>
							<h3>Rich Admin Options</h3>
							<p>Fantasy is a necessary ingredient in living! Imagination is more important than knowledge. Knowledge is limited.</p>
							<p><a class="link" href="portfolio.html">View Portfolio &raquo;</a>
					    </div>
						<img class="slider_bgr" src="{$tpl_path}img/2.jpg"/>
						<img class="slider_img" src="{$tpl_path}img/2_2.png"/>
				    </li>
						
					<!-- Layer 3 -->
					<li>
						<div class="info">
							<h2>White ain't bad</h2>
							<h3>Fully Customizable</h3>
							<p>Fantasy is a necessary ingredient in living! Imagination is more important than knowledge. Knowledge is limited.</p>
							<p><a class="link" href="blog.html">Read Our Blog &raquo;</a>
					    </div>
						<img class="slider_img" src="{$tpl_path}img/3.jpg"/>
				    </li>					
			    </ul>
		    </div>
	    </div>
		<!-- Sequence Slider::END-->
    </div>
{eval var=$text}
{new_products}
{main_specials}
{* upcoming_products *}
{*live_shopping*}
Und in der template_defaults.php sitzen die jeweiligen Verweise zu den css und javascript Dateien. Natürlich sind die oben genannten Dateien auch in den jeweiligen Ordnern untergebracht.

Wo könnte der Fehler stecken? Habt Ihr mir vielleicht einen Tipp?
Xantiva
Beiträge: 948
Registriert: Mo 10. Mai 2010, 16:26
Shop Version: 1.0.10 [dev]
Kontaktdaten:

Re: Und täglich grüsst der Slider :-(

Beitrag von Xantiva »

Vielleicht solltest Du erst mal den HTML Code valide machen?!

Code: Alles auswählen

<li><span class="navcontainer"><h3>
....
<a href="service_item.html"><img src="templates/webs/img/th1.jpg" alt=""/><div class="img_overlay"></div></a>
Ein H3 innerhalb von einem SPAN ist nicht zulässig, ein div in einem a ist nicht zulässig, usw.

Wenn ich mir die /test/ mit FireBug ansehe, dann gibt es auch noch Fehler in der JavaScript Verarbeitung. Das könnte eine Folge des nicht validen Codes sein.
JSON.parse: unexpected non-whitespace character after JSON data
...
JSON.parse: bad control character in string literal
Ciao,
Mike
Mein Shop: http://www.basteln-selbermachen.de
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Re: Und täglich grüsst der Slider :-(

Beitrag von Kopernikus »

Hallo Mike

Super, herzlichen Dank für Deine Antwort. Stimmt, das javascript scheint tatäschlich die Ursache zu sein. :(

Mein Editor meldet, dass diese Zeile fehlerhaft ist

Code: Alles auswählen

var options = {
Falls Du nicht gerade eine Idee hast, was an diesem Code falsch ist, werde ich mal ein Javascript Forum aufsuchen. Denn leider verstehe ich von dieser Sprache noch weniger als von php - und das will was heissen ;)

Danke auch für den Hinweis betreffend H3!

Liebe Grüsse
Patrik
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Re: Und täglich grüsst der Slider :-(

Beitrag von Kopernikus »

Hmmm, jetzt verstehe ich aber gar nichts mehr.

Soeben fand ich die folgende Dokumentation:

http://www.sequencejs.com/developers/documentation/

Dort wird aber auch

Code: Alles auswählen

var options = {
verwendet. Ich glaube das mit dem Slider auf meiner Seite soll einfach nicht sein :( Schon vor über 2 Jahren habe ich es mit dem Nivo-Slider versucht und bin gescheitert. Auch Anläufe danach endeten stehts im Frust. Nun klappts auch mit diesem Skript hier nicht, obwohl es auf einer normalen html Seite funktioniert. Offenbar mag Webs keine Slider oder diese mögen mich nicht ;)
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Re: Und täglich grüsst der Slider :-(

Beitrag von Kopernikus »

Ok, das Problem kann nicht bei diesem Script liegen. Ich habe nun das hier frei erhältliche Script (http://www.sequencejs.com/themes/modern-slide-in/) installiert. Ergebnis: Die Bilder werden zwar angezeigt, doch das Script bleibt tot. Ich nehme daher an, dass irgend ein anderes Script die Slider (egal von welchem Hersteller/Programmierer) behindert. :(
yogi
Administrator
Beiträge: 292
Registriert: Do 6. Mai 2010, 14:16
Shop Version: die aktuelle
Wohnort: Köln
Kontaktdaten:

Re: Und täglich grüsst der Slider :-(

Beitrag von yogi »

Hi,

im Seitenquelltext steht folgendes:

Code: Alles auswählen

<script type="text/javascript">
				$(document).ready(function() {
						$('#featured_services_carousel').jcarousel({
				...
</script>
und weiter unten kommt dann

Code: Alles auswählen

<script type="text/javascript" src="templates/webs/javascript/jquery.js"></script>
Dummer weise wird aber $() von jquery.js implementiert - und somit ist die Ausführungsreihenfolge falsch.

Du könntest den initalcode in template.js "verlegen" - dann wird es auch nach dem laden von jquery.js ausgeführt.
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Re: Und täglich grüsst der Slider :-(

Beitrag von Kopernikus »

Hi Jörg

Besten Dank für Deine Antwort. Zunächst mal die erfreuliche Nachricht - Es funktioniert :D

Und zwar wenige Sekunden vor Deiner Antwort. Ich vermute, dass genau Dein Hinweis für den Fehler verantwortlich war. Denn im neuen Script steht zuoberst folgende Zeile:

Code: Alles auswählen

{literal}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
{/literal}
Kaum habe ich diese Eingebaut, lief das Script. Damit lade ich nun wohl jquery.min.js vor dem anderen Script, weil ich es ja von Extern hole. Nun möchte ich aber gerne Deine Lösung umsetzen und würde natürlich sehr gerne den gesamten Javascript Code in die Datei template verschieben. Mein Problem ist, dass ich die Logik dieser Datei noch nicht begriffen habe. Denn anstatt mit dem gwohnten {script} .... beginnen dort ja alle Scripts mit function fbs_click() oder wie auch immer. Da ich die javascript Sprache nicht behersche, finde ich leider auch nicht den Schlüssel wie ich die jeweiligen Scriptdateien für die template.js formatieren muss. Deshalb binde ich derzeit alle js Dateien mit {literal} direkt in den html code ein. Das zerstörrt natürlich auch das suchmaschinen relevante Text/Code Verhältnis. Vielleicht hast Du mir da einen Tipp?

Im Weiteren fällt mir auf, dass ich nun irgendwie die css Struktur des Content Textes zerstörrt habe. Denn der Text ist nun plötzlich zusammengedrückt. Mal sehen ob ich diesen Fehler auch noch finde.

DANKE!!! :-)
yogi
Administrator
Beiträge: 292
Registriert: Do 6. Mai 2010, 14:16
Shop Version: die aktuelle
Wohnort: Köln
Kontaktdaten:

Re: Und täglich grüsst der Slider :-(

Beitrag von yogi »

Hi,

richtig, aber das funktioniert nur wenn der User kein "noscript" laufen hat oder darin die googleapis.com Domain freigegeben hat...

Nun versuchst Du auch die jquery.js drei mal zu laden.
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Re: Und täglich grüsst der Slider :-(

Beitrag von Kopernikus »

Ok, das hat nun geklappt. Könntest Du nochmals kurz sehen, ob nun alles korrekt geladen wird?

https://www.engelis-naturshop.ch/test/
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Re: Und täglich grüsst der Slider :-(

Beitrag von Kopernikus »

Hi Jörg oder Mike

Ich mache derzeit noch einige Versuche mit einem anderen Slider. Dort wird das benötigte javascript wie folgt aufgerufen:

Code: Alles auswählen

<script type="text/javascript">
				jQuery(document).ready(function() {
					   jQuery('.tp-banner').revolution(
						{
							delay:9000,
							startwidth:1170,
							startheight:500,
							hideThumbs:10
						});
				});
			</script>
Da bis jetzt jegliche Versuche fehlgeschlagen sind (der Slider lässt sich nicht animieren), meine Frage an Euch:

Könnte es sein, dass dieses Script wegen dem Aufruf

Code: Alles auswählen

jQuery(document).ready(function() {
nicht korrekt funktioniert? Normale javascripts beginnen ja meistens mit $(document).ready(function() {.

Liebe Grüsse
Patrik
Antworten