[GELÖST] JavaScript Slideshow einbauen - wie?

jester · 05. Februar 2012 14:27

Hallo!

Jetzt stehe ich vor der nächsten Hürde. Ich möchte im Kopfbereich der Seite eine JavaScript-basierte Slideshow einbauen. Die Slideshow habe ich mit Wowslider generiert.

Da eine einfache HTML-Datei ausgeworfen wird, außerdem die Javascript-Dateien und ein zusätzliches Stylesheet in separaten Ordnern, dachte ich mir, ich kopiere einfach die relevanten Codeschnipsel ins Template, lade die Javascript-Dateien hoch, ändere die Pfade und voilà!

Leider nein. sad Wäre wahrscheinlich auch zu einfach gewesen ...

Zuerst wurden alle 6 Bilder untereinander angezeigt. Nachdem ich die Pfade angepasst und die Scripte hochgeladen hatte, wurde die Slideshow an der richtigen Position und nur das erste Bild angezeigt. Was nicht passiert, ist dass die Slideshow auch durchläuft. Es bleibt beim Standbild.

Nach den ausgeworfenen Fehlermeldungen vermute ich, dass hier irgendwie ein handgemachtes Smarty-Tag erstellt werden muss. Da stehe ich allerdings auf dem Schlauch.

Hier nun die relevanten Code-Schnipsel im Template.

Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<!DOCTYPE html> 
<html>  
<head>  
<title>{sitename} - {title}</title>  {cms_stylesheet} {metadata}  

<!-- Start WOWSlider.com HEAD section --> 	
<link rel="stylesheet" type="text/css" href="uploads/engine1/style.css"/> 	
<style type="text/css">a#vlb{display:none}</style> 	
<script type="text/javascript" src="uploads/engine1/jquery.js"></script> 	
<script type="text/javascript" src="uploads/engine1/wowslider.js"></script> 
<!-- End WOWSlider.com HEAD section -->   

<link rel="shortcut icon" href="favicon.ico" />  
</head>  
<body>  
<div id="container">  
<div id="preheader">  </div>  
<div id="header"> 

<div id="wowslider-container1"> 	
<div class="ws_images"> 
<span><img src="uploads/images/1.jpg" alt="1" title="1" id="wows0"/></span> 
<span><img src="uploads/images/2.jpg" alt="2" title="2" id="wows1"/></span> 
<span><img src="uploads/images/3.jpg" alt="3" title="3" id="wows2"/></span> 
<span><img src="uploads/images/4.jpg" alt="4" title="4" id="wows3"/></span> 
<span><img src="uploads/images/5.jpg" alt="5" title="5" id="wows4"/></span> 
<span><img src="uploads/images/6.jpg" alt="6" title="6" id="wows5"/></span> 
</div> 
<a style="display:none" href="http://wowslider.com">Picture Gallery In Javascript by WOWSlider.com v2.0</a> 	
<div class="ws_shadow"></div> 	
</div> 	
<script type="text/javascript" src="engine1/script.js"></script> 
</div>   

{* Start Navigation *}
usw. ...

Falls hilfreich, kann ich natürlich auch noch die Codes der Scripte und des Stylesheets hier einstellen. Vielleicht reicht aber schon, was ich oben reinkopiert habe.

Ich weiß nicht, wo ich anfangen muss zu suchen, oder wie man so ein Smarty-Tag selbst schreibt. Vielleicht bin ich auch auf der völlig falschen Spur.

Danke!

Dickie · 05. Februar 2012 15:31

Versuchs mal damit:

http://www.cmsmadesimple.de/forum/viewtopic.php?id=1373

Ich habe das Showtime-Modul im einsatz, dass ist einfach zu handhaben !

Gruss Dickie

jester · 05. Februar 2012 16:49

Dickie schrieb:

Versuchs mal damit:
http://www.cmsmadesimple.de/forum/viewtopic.php?id=1373
Ich habe das Showtime-Modul im einsatz, dass ist einfach zu handhaben !

Gruss Dickie

Ich schau mir das jetzt gleich an! Danke!

jester · 05. Februar 2012 17:35

OK, ein tolles Tutorial, wenn man Ahnung hat.

Ich bin momentan bei Aristoteles angelangt: "Ich weiß, dass ich nichts weiß!" sad

Ich beschreibe mal, was ich verstanden und gemacht habe und wo ich nicht weiter weiß:

Ich habe unter Menü "Erweiterungen" über den Modulmanager das Modul "Advanced Content" installiert.

Dann habe ich in uploads/images den Ordner "Header" angelegt und dort meine Bilder hochgeladen.

Jetzt komme ich zu einem Problem. Im Tutorial steht:

Andiministrator schrieb:

Zunächst legen wir die Felder für die Dateneingabe fest. Das könnt Ihr irgendwo nach {process_pagedata} im Seiten-Template machen:

Ich habe in meinem Seiten-Template kein {process_pagedata} - somit weiß ich nicht, wohin mit dem Code. In den Header, in den Body? Wo genau?

function.fieldsearch.php habe ich heruntergeladen und in den Ordner "plugins" kopiert.

jQuery und CrossSlide habe ich heruntergeladen und in einen Ordner /uploads/js hochgeladen. Ich habe beide Dateien so umbenannt, dass die Dateinamen den Dateinamen im Script entsprechen. Ich habe die Codezeilen ebenso wie die nachfolgend angegebenen Codezeilen im <head></head> Bereich eingefügt.

Im Body-Bereich im passenden div-Bereich habe ich den Code

Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<div id="slideshow" style="width:730px;height:230px;">
{if !$header1image && !$header2image && !$header3image && !$header4image && !$header5image}
<img src="/images/noheaderimage.jpg" width="730" height="230" />{/if}</div>

eingebaut und natürlich auf die Größe meiner Bilder angepasst.

Noch wird natürlich nichts angezeigt, weil mir ja ein Teil fehlt. Wer kann mir helfen?

Außerdem: Die Ansicht, die hier http://www.cmsmadesimple.de/forum/img/m … r_test.png dargestellt ist, sehe ich nach Installation des Moduls nicht. Gehe ich recht in der Annahme, dass das nicht automatisch erscheint, sondern dass ich das auch irgendwo einstellen und konfigurieren müsste? Das ist nicht Bestandteil des Tutorials, oder?

Danke!

Beitrag geändert von jester (05. Februar 2012 17:41)

NaN · 05. Februar 2012 18:05

jester schrieb:

Ich habe in meinem Seiten-Template kein {process_pagedata} - somit weiß ich nicht, wohin mit dem Code. In den Header, in den Body? Wo genau?

Ganz oben. Noch bevor <head>.

jester schrieb:

Außerdem: Die Ansicht, die hier http://www.cmsmadesimple.de/forum/img/m … r_test.png dargestellt ist, sehe ich nach Installation des Moduls nicht.

Das siehst Du erst, wenn Du das Seiten-Template entsprechend dem Tutorial mit den {content ... } Blöcken angepasst hast.

Dickie · 05. Februar 2012 18:18

Zur Erläuterung:

Quelle: http://www.cmsmadesimple.de/news/48/173 … licht.html

ein vollständig neuer Weg, die Seiten-Templates zu verarbeiten:

Wir haben das Template in drei Teile geteilt
a) den Text oberhalb des eigentlichen Templates
b) den head-Bereich
c) dem Rest des Templates (body)
Zunächst wird der obere Abschnitt, dann den body- und zuletzt der head-Bereich durch Smarty verarbeitet. Anschließend wird alles wieder zusammengefügt. Dadurch ist es möglich, Variablen, die im Seiteninhalt oder in verschiedenen Modul-Templates gesetzt wurden, im head-Bereich z.B. für Meta-Tags oder Seiten-Titel zu verwenden.
Im Reiter "Optionen" einer Inhalts-Seite erlaubt ein neuer Textbereich das Setzen von seiten-spezifischen Daten (ähnlich dem Setzen von seiten-spezifischen Daten in den Metadaten). Diese Daten werden durch ein neues Plugin {process_pagedata} via Smarty verarbeitet. Es sollte am Anfang der Seiten-Templates eingefügt werden.
Bei einer frischen Installation findet sich {process_pagedata} am Anfang eines jeden Seiten-Templates.
Dies könnte jedoch Seiten stören, die einige meiner Tricks einsetzen, um News-Überschriften oder anderen Modul-Inhalte als Seitentitel zu verwenden. Daher ist es standardmäßig ausgeschaltet.

Gruß Dickie

jester · 05. Februar 2012 18:27

Habe jetzt den Code hinter <html> und vor <head> eingefügt.

Nun nur noch eine Fehlermeldung:

Hier klicken, um den Code zum Kopieren zu markieren

Fatal error: Call to a member function GetOne() on a non-object in 
L:\xampp\htdocs\fimgg\plugins\function.fieldsearch.php on line 63

???

Das hier ist der Inhalt von Zeile 63:

Hier klicken, um den Code zum Kopieren zu markieren

[== PHP ==]
$tmp = $db->GetOne('SELECT content_id FROM '.cms_db_prefix().'content 
WHERE content_alias = ?', array($pagealias));

NaN · 05. Februar 2012 18:59

Öffne mal die Datei function.fieldsearch.php und ändere oben die folenden Zeilen:

Hier klicken, um den Code zum Kopieren zu markieren

function smarty_cms_function_fieldsearch($params, &$smarty) {

	// get db object
	global $gCms;
	$db = &$gCms->db;
	$smarty = &$gCms->GetSmarty();

in

Hier klicken, um den Code zum Kopieren zu markieren

function smarty_cms_function_fieldsearch($params, &$smarty) {

	// get db object
	$db = &cmsms()->GetDb();

jester · 05. Februar 2012 19:07

NaN, danke, jetzt wird die Seite wieder angezeigt. Von einer Slideshow allerdings keine Spur.

Dickie · 05. Februar 2012 19:31

Erstell mal eine neue Seite und gib unter Inhaltstyp "Advanced content" oder "Erweiterter Inhalt" oder so ähnlich an.

Dann sollte der Inhalt so aussehen wie auf dem Beispiel !

Ich bin mir nicht sicher, ob der genannte Code im Template oder im Seiten-Template Anwendung finden soll ?
Test es doch mal aus ?

Gruß Dickie

jester · 05. Februar 2012 19:44

Dickie, gut, dass Du diesen Hinweis gemacht hast!

AAAAARggghghhhfffff! mad

Jetzt werden bei einem Klick auf "Neue Seite hinzufügen" nur noch die drei Tabs

Hauptmenü
Optionen
Vorschau

angezeigt, keine Möglichkeit, irgendetwas anzuklicken oder einzugeben. Ich dreh am Rad!

Nachtrag: Wenn ich eine Seite bearbeiten will, erscheint nun nicht mehr die gewohnte Oberfläche mit dem TinyMCE, sondern folgende Fehlermeldung:

Hier klicken, um den Code zum Kopieren zu markieren

Fatal error: Cannot break/continue 1 level in L:\xampp\htdocs\fimgg\lib\classes\contenttypes\Content.inc.php on line 793

Beitrag geändert von jester (05. Februar 2012 19:49)

Dickie · 05. Februar 2012 21:08

Also ich weiß nicht warum Du so rumschreist ?

Ich will helfen und du meckerst rum ?

Ich habs mal nachgebaut und ich habe keinerlei Probleme, bei mir läuft es !!!

Der Tip mit dem "erweiterten Inhalt" ist richtig, ich bekomme die Optionen angezeigt !!!

Also machst Du was falsch !

Gruß Dickie smile

NaN · 05. Februar 2012 21:59

Gaaanz entspannt bleiben wink
Jester hat bestimmt vergessen ein Modul zu installieren.
Im Tutorial wird das Modul GBFilePicker leider nicht erwähnt.
Aber es wird verwendet (siehe Template {content_module module=GBFilePicker ... })
Dummerweise gibt es einen Programmierfehler im Standard-Inhaltstyp (Inhalt).
Wenn im Template ein Modul über den {content_module} Tag aufgerufen wird, welches nicht installiert ist, dann kommt es beim Erstellen/Bearbeiten von Seiten zu dem von Jester bemerkten Fehler. (wer vorher schon im Backend unter "Webseiten Administration -> Seitenvorgaben" AdvancedContent als Standard-Inhaltstyp eigestellt hat, der wird diesen Fehler bisher nicht bemerkt haben.)

Also installiere einfach den GBFilePicker und probiere es nochmal.

jester · 05. Februar 2012 22:32

Dickie schrieb:

Also ich weiß nicht warum Du so rumschreist ?
Ich will helfen und du meckerst rum ?
Gruß Dickie

Ups, ich hatte Dich doch nicht gemeint. Ich habe mich einfach nur geärgert weil es nicht klappt. Da gebe ich niemandem hier die Schuld (außer vielleicht mir, dass ich nicht mehr weiß)! Was ich vor allem gemeint habe war, dass es gut war, dass Du mir gesagt hast, ich solle eine neue Seite anlegen. Nur so habe ich bemerkt, dass da was im argen war!

Also sorry, dass mein Ausbruch falsch angekommen ist!

Beitrag geändert von jester (05. Februar 2012 22:34)

jester · 05. Februar 2012 22:42

NaN schrieb:

Gaaanz entspannt bleiben
Jester hat bestimmt vergessen ein Modul zu installieren.
Im Tutorial wird das Modul GBFilePicker leider nicht erwähnt.
Aber es wird verwendet (siehe Template {content_module module=GBFilePicker ... })
Dummerweise gibt es einen Programmierfehler im Standard-Inhaltstyp (Inhalt).
Wenn im Template ein Modul über den {content_module} Tag aufgerufen wird, welches nicht installiert ist, dann kommt es beim Erstellen/Bearbeiten von Seiten zu dem von Jester bemerkten Fehler. (wer vorher schon im Backend unter "Webseiten Administration -> Seitenvorgaben" AdvancedContent als Standard-Inhaltstyp eigestellt hat, der wird diesen Fehler bisher nicht bemerkt haben.)
Also installiere einfach den GBFilePicker und probiere es nochmal.

Hapuhh, sieht schon besser aus. Also, GBGilePicker ist installiert.

Allerdings stimmt da was noch nicht ganz. Wenn ich jetzt eine Seite editieren will, tauchen da massig TinyMCE Fenster auf mit den Werten aus dem Script, also Anzeige-Dauer:, Zoom:, Von unten: usw. In jedem TinyMCE Fenster steht dann ein Wert. Ganz unten ist dann ein TinyMCE Fenster, über dem "Inhalte*:" steht, dort ist der Text, den ich zuvor eingegeben habe, noch da.

WEnn ich mir die Seite anschaue, ist das Layout soweit ok (keine Fehlermeldung), aber eine Slideshow ist auch nicht zu sehen.

Also, wenn ich hier "abdampfe", meine ich nicht Euch! ops

jester

NaN · 06. Februar 2012 23:06

So, und jetzt, wo alles läuft, musst Du natürlich bei den Seiten als Inhaltstyp "Erweiterter Inhalt" wählen. (Du kannst den auch als Standard-Inhaltstyp für neue Seiten einstellen.)

jester · 06. Februar 2012 23:21

Fein, die vielen TinyMCE Fenster sind nun weg, nur noch ein Inhaltsfenster ist zu sehen. Auf der Website allerdings immer noch keine Slideshow...

Halt, Stop! Jetzt sehe ich gerade, dass ich erst die Fotos zuweisen muss. Ich probier das erst aus und melde mich dann nochmal!

Beitrag geändert von jester (06. Februar 2012 23:22)

jester · 06. Februar 2012 23:24

Hmm, der Pfad weist nun ein doppeltes "uploads" auf, darum findet er keine Bilder. Das schaue ich mir morgen in der Mittagspause genauer an, dafür bin ich nun doch zu müde.

Vielen Dank für Eure Hilfe - ich wär sonst wirklich zwischendurch komplett aufgeschmissen gewesen!

jester

jester · 06. Februar 2012 13:18

So, da bin ich wieder...

Ich habe im Template die Pfade jetzt so geändert, dass im Backend die Fotos für die Slideshow angezeigt werden. Ich habe jetzt für die Startseite die zu zeigenden Fotos für die Slideshow festgelegt. Das klappt prima und ist auch wirklich komfortabel.

Wenn ich aber die Startseite anzeige, wird immer noch keine Slideshow angezeigt. Ich habe auch mal den Cache geleert, bringt aber auch nichts. Was kann es denn nun noch sein?

Danke,

jester

NaN · 06. Februar 2012 13:32

Sind die Javascripts auch auf dem Server und im Template verlinkt?

jester · 06. Februar 2012 13:39

Ja, gerade noch mal kontrolliert (und dabei noch einen falschen Pfad entdeckt, den ich inzwischen aber auch korrigiert habe).

Hier klicken, um den Code zum Kopieren zu markieren

[== html ==]
<script type="text/javascript" src="/uploads/js/jquery.min.js">
</script> <script type="text/javascript" src="/uploads/js/jquery.cross-slide.min.js"></script>

steht im Template im Head-Bereich. Und die Pfade stimmen jetzt auch.

Noch eine potenzielle Fehlerquelle, die ich prüfen kann?

nockenfell · 06. Februar 2012 13:49

Was du machen kannst:

Nimm das ganze raus aus CMSMS und baue eine Demo mit einer "normalen", einfachen HTML Seite. Wenn es dort läuft, baust du es wieder in CMSMS ein. Ich hatte auch schon mal so ein Problem. Am Schluss lag es an einer CSS Klasse oder sowas ähnlichem (weiss es nicht mehr so genau). Irgend ein Schreibfehler.

Du musst einfach von einer lauffähigen Konstellation ausgehen können. Dann kannst du auch allfällige Unterschiede suchen und beheben.

jester · 06. Februar 2012 13:55

Okay, mache ich - mal sehen, wann ich den Fehler auftreiben kann. Danke!

jester · 06. Februar 2012 19:57

Hi,

also nachbauen bringt mich auch nicht weiter. Vor allem, weil mir da wirklich die Javascriptkenntnisse fehlen, so dass ich das nicht wirklich funktionierend lokal nachbauen kann.

Meine Vermutung geht dahin, dass irgendwo über eine Variable andere Pfade gesetzt werden, als tatsächlich vorhanden sind. Ich habe allerdings (versucht) alles 1:1 aus dem Tutorial zu übernehmen.

Im Javascript habe ich noch versucht, den Pfad mal testweise in einem Block von

Hier klicken, um den Code zum Kopieren zu markieren

[== Javascript ==]
{/literal}src:'/uploads/{$header1image}'

Hier klicken, um den Code zum Kopieren zu markieren

[== Javascript ==]
{/literal}src:'/uploads/images/{$header1image}'

zu ändern. Brachte aber keine Besserung. Ich weiß noch nicht einmal, ob ich da überhaupt an der richtigen Stelle bin.

Noch eine Idee? Ich bin gern bereit, alles was ich kann, auszuprobieren.

jester

jester · 06. Februar 2012 20:07

Zwischenstand:

Hatte noch weitere Ideen, die es aber leider auch nicht gebracht haben:

1) zunächst dachte ich, dass der Apache-Server etwas dagegen haben könnte, dass der Ordner für die Fotos "Header" mit großem H heißt. Ich habe noch meinen Sysadmin von vor 15 Jahren im Ohr: immer nur Kleinschreibung, das gibt sonst komische Effekte.

Nunja, das war es nicht. Ich habe den Ordner in "header" umbenannt und auch testweise einen Teil der Pfade im Template angepasst. Brachte aber keine Slideshow.

2) Dann kam mir die Idee, dass es vielleicht zu unglücklichen Effekten kommen könnte, weil das DIV in dem ich die Slideshow positionieren will, auch "header" heißt. Also habe ich das mal vorsichtshalber in "header1" umbenannt. Leider gleichfalls kein Erfolg für die Slideshow.

Ich suche weiter. Tipps weiterhin willkommen!

Forum für CMS/made simple

#1 05. Februar 2012 14:27

[GELÖST] JavaScript Slideshow einbauen - wie?

#2 05. Februar 2012 15:31

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#3 05. Februar 2012 16:49

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#4 05. Februar 2012 17:35

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#5 05. Februar 2012 18:05

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#6 05. Februar 2012 18:18

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#7 05. Februar 2012 18:27

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#8 05. Februar 2012 18:59

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#9 05. Februar 2012 19:07

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#10 05. Februar 2012 19:31

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#11 05. Februar 2012 19:44

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#12 05. Februar 2012 21:08

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#13 05. Februar 2012 21:59

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#14 05. Februar 2012 22:32

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#15 05. Februar 2012 22:42

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#16 06. Februar 2012 23:06

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#17 06. Februar 2012 23:21

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#18 06. Februar 2012 23:24

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#19 06. Februar 2012 13:18

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#20 06. Februar 2012 13:32

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#21 06. Februar 2012 13:39

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#22 06. Februar 2012 13:49

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#23 06. Februar 2012 13:55

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#24 06. Februar 2012 19:57

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

#25 06. Februar 2012 20:07

Re: [GELÖST] JavaScript Slideshow einbauen - wie?

Fußzeile des Forums