Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Slideshow statt festes Headerbild

Begonnen von romanusko, 26. August 2013, 11:50:24

« vorheriges - nächstes »

romanusko

Hallo, ich bastel bereits eine Weile mit dem MoziloCMS herum und viele Dinge gefallen mir besser als bei einer statischen HTML Homepage. Allerdings bin ich noch nicht CMS fit!

Eine Frage am die Profis: Wie implementiert man eine Slideshow wie es viele Websiten oben in den Header haben statt dem vorhandenem statischem Headerbild.

Ich habe als Beispiel für das Headerbild im Templetscript style.css das betreffende Element herausgepickt.

/* Kopfbereich (Headerbild) */

      .tg-header {
         background-image:url('../grafiken/grafikname.jpg');
         background-repeat:no-repeat;
         height:240px;
      }

An dieser Stelle würde ich gern einen Slider wie zum Beispiel WOWslider ablaufen lassen und scheiter. Im HTML bekomme ich es gebacken, im CMS leider nicht.

viele Grüße romanusko

djr

Willkommen im Forum!

Wie bindest Du die Slideshow denn in der statischen HTML-Seite ein? Und wie im CMS?
Gibt 's Links?

Grüße!
djr

romanusko

Der Slider liegt in einem Ordner, er auf mehreren Unterordnern besteht. In diesem Ordner befindet sich eine index.html. Diese Index habe ich mittels Iframe

<iframe src="./index.html" width="750" height="300" name="Galerie"></iframe>

eingebunden. Geht.

Bestimmt ist das total einfach im CMS System, weiß nur nicht wie. Wichtig, ich möchte es oben im Header haben und nicht als Slidegalerie mittels Slidebox in einer Inhaltsseite.

HPdesigner

Generell gilt: Wenn du Elemente global (also nicht inhaltsseitenspezifisch) einbinden möchtest, wie z.B. im Header, dann kannst du das am einfachsten in der template.html des von dir genutzten mozilotemplates machen. Das liegt unter /layouts/dein-template/template.html.
Im Prinzip ist das auch nur eine HTML Datei, die von Mozilo geparst wird. Da kannst du in den Header deine Slideshow einfügen.

Du weißt, dass es auch mozilo Plugins für slideshows gibt? -> schöner als ein iframe...

lg, HPdesigner
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

romanusko

slimbox und wsslider kenn ich als mozilocms Plugin. Diese implementiert man ja auf einer Inhaltsseite. Ich möche es oben im Header haben. Wie es auf vielen Businessseiten heute üblich ist, fliegen dort 4, 5, 6 Banner ein mit kurzer Beschreibung. So möchte es es haben. Ich versuche es mal im genanntem template.html

HPdesigner

Zitat von: romanusko am 30. August 2013, 11:52:26Diese implementiert man ja auf einer Inhaltsseite.
Du kannst sie auch in der template.html implementieren. Was theoretisch auch möglich ist, dass du dein Sliderplugin auf einer versteckten Inhaltsseite (zB mit dem Namen "Header") implementierst, und dann im Template im Header Container [include|Kategorie:Header] setzt. Damit sollte das Plugin dann im Header eingebunden sein und du kannst es zusätzlich noch übers Backend bearbeiten.
Check my website devmount.de
and find me on Twitter, Medium, GitHub, StackOverflow, Codepen and Slack

supercat

Da ich ewig nicht mehr hier war, frage ich lieber mal nach, ob sich das mit der Slideshow inzwischen erledigt hat. Ansonsten hätte ich da ein schlankes Script und die entsprechende Mozilo-Anpassung. Zu sehen ist das hier: http://www.motourist.de Bei Interesse würde ich das Ganze mal posten.

Nachtrag: Ich arbeite immer noch problemlos mit moziloCMS 1.12.beta3. Alle Nachfolger haben mir nur die Seite zerschossen. Wahrscheinlich hatte ich schon zuviel geschraubt  ;)
Frage nicht nach meinem Alter. Ich kann doch nicht alles wissen ;-)

Rainer

Servus Supercat,

als ich das Gesicht gesehen hab, war der erste Gedanke: schon lange nicht mehr gesehen  :D
Eine Slideshow im Header oder sogar als Hintegrund komplett geht, zumindest unter moziloCMS 2.0 mit dem jQbackstretch Plugin sowie mit dem coinSlider Plugin, welches in der template.html eingebunden werden kann. Auf gleiche Art wie zwei Posts weiter oben beschrieben:
Zitat von: HPdesignerDu kannst sie auch in der template.html implementieren. Was theoretisch auch möglich ist, dass du dein Sliderplugin auf einer versteckten Inhaltsseite (zB mit dem Namen "Header") implementierst, und dann im Template im Header Container setzt. Damit sollte das Plugin dann im Header eingebunden sein und du kannst es zusätzlich noch übers Backend bearbeiten.
[include|Kategorie:Header]

Grüße Rainer
moziloCMS über Facebook bekannt machen
•• moziloCMS auf GitHub
••• Nichts ist einfacher, als das, was uns fremd ist, zu verachten.
•••• Mein moziloCMS

supercat

jQbackstretch und coinSlider hatte ich mir schon angeschaut. Ohne Frage schöne Sachen, aber halt nicht ganz das, was ich wollte. Mein kleines Script reicht da. Ist womöglich ein total abgespeckter coinSlider  ;) Das Einbinden ist auch nicht der Hammer. Was mich verzweifeln lässt ist, dieser Slide-Show-Header soll nur auf der Startseite laufen. Auf den Unterseiten soll wieder ein schlichtes Top-Bild erscheinen. Ich komme da einfach nicht voran und habe jetzt mal einen Thread dazu aufgemacht. Ein Template - zwei Header  8)
Frage nicht nach meinem Alter. Ich kann doch nicht alles wissen ;-)

glory

Hallöchen!
Nachdem ich nun auch mal ein Headerbild mit einer Slideshow ersetzen wollte, versuchte ich das wie oben beschrieben mit jQbackstretch zu erreichen. Aber leider klappt es nicht auf Anhieb, die Slideshow ist als Hintergrund zu sehen und nicht im Header.
Ich hatte das Plugin installiert, die Galerie angelegt, dann eine versteckte Seite angelegt und dort das Plugin eingetragen:
{jQbackstretch|@=header=@}

In der template.html habe ich es so reingesetzt:
  <!-- Kopfgrafik, Logo, Slogan -->
  <header>
  [include|@=Willkommen=@:Header]   
<!-- beginn Seitentitel, Logo   -->
   <div id="sb-titel">
     <img src="{LAYOUT_DIR}/grafiken/logo.png" width="329" height="100" alt="Logo" />
   </div>
   <!-- ende Seitentitel -->
  </header>

Was habe ich da wieder falsch gemacht, dass es nicht im Header erscheint?

Viele Grüße!
Wer aufhört zu lernen, hört auf zu leben!

supercat

Ein kleiner Spitz. Ich bin hin und weg :D Das Bild muss ich gleich meinen zwei Wolfsspitzen zeigen.

Aber zur Frage: Womöglich machst Du Dir es viel zu kompliziert. Ich habe einmal im Header der Template-Datei stehen:
<!-- Slideshow-Banner -->
<link rel="stylesheet" href="layouts/ein_verzeichnis/css/slideshow.css">
<script type="text/javascript" src="layouts/ein_verzeichnis/css/slideshow.js"></script>
<!-- /Slideshow Banner -->


Und dann habe ich im Body zwischen Maincontent und Mainmenu Folgendes eingebaut:
<div class="main">
<div class="maincontent">
<div class="banner_a">
<div class="banner_b">
<div id="slideshow">
<img class="start" src="layouts/ein_verzeichnis/bilder/image-001.jpg" /></div><br />
</div>
<div class="banner_logo">
<img src="layouts/ein_verzeichnis/grafiken/banner.png" alt="banner"><br>
</div>
</div>
<div class="mainmenu">...


"ein_verzeichnis" steht natürlich für das entsprechende Layout-Verzeichnis. Der Aufbau des Bodys kann sich je nach genutztem Layout etwas unterscheiden. Um die Slide-Bilder im Bedarfsfall schnell austauschen zu können, habe ich das Verzeichnis "Bilder" angelegt. Das Verzeichnis "Grafiken" ist ehedem schon da. Der hier beschriebene Weg ist halt der einfache Weg.

Das Plugin habe ich noch nicht ausprobiert. Doch wie eigentlich fast jedes Plugin funktioniert es womöglich NUR in einer Inhaltsseite und nicht in der Template-Seite. Deshalb siehst Du es als Hintergrund. Die Template-Datei ist ja das Grundgerüst Deiner Seite. Dieses durch eine untergeordnete Inhaltsseite zerstören zu wollen, wäre unlogisch.
Frage nicht nach meinem Alter. Ich kann doch nicht alles wissen ;-)

dummwiebrot

Hi Marlis,

das Plugin jQbackstretch ist für ein Hintergrundbild bzw. eine Hintergrundslideshow gedacht.
Wenn Du eine Slideshow für den Header möchtest, dann ist das Plugin coinslider das richtige. Das fügst Du in der template.html ein:


  <!-- Kopfgrafik, Logo, Slogan -->
  <div id="header">
   {coinSlider|@=slider=@|980|250|8|3|6000|30|0.7|500|rain|true|false|false}
   <!-- beginn Seitentitel, Logo -->
   <div id="titel">
     <!-- Hier kann ein Bild oder Text (z.B. mit <h1>Seitentitel</h1>) eingefügt werden -->
     <img src="{LAYOUT_DIR}/grafiken/logo.png" width="329" height="100" alt="Logo" />
   </div>
   <!-- ende Seitentitel -->
  </div>
  <!-- ende Kopfgrafik, Logo, Slogan -->


Der <div id="titel"> schiebt sich dann unter die Slideshow. Du kannst diesen weglassen (auskommentieren oder löschen), oder Du platzierst ihn mit position:absolute; da wo Du ihn haben möchtest. In letzterm Fall solltest Du dem header noch ein position:relative; verpassen.

Den coinslider kannst Du über die css dann noch deinen Vorstellungen anpassen. Ein Beispiel mit dem coinslider im Einsatz ist traumhunde.bplaced.net/

Greetz dwb

glory

@ Supercat: Ich danke dir für deine Antwort und Hilfe. Ich würde es aber doch lieber mit einem Plugin hinbekommen. Für mich ist das dann irgendwie einfacher. Falls du noch mehr Zwergenbilder sehen möchtest, hier ist Glorys HP, natürlich auch eine mozilo-Seite: www.pomeranianzwergspitz.de

@ dummwiebrot: Ich danke auch dir wieder einmal mehr für deine Hilfe! Ich dachte, ich bekomme das mit  jQbackstretch hin, weil es ja auch in der Beschreibung stand. Ich habe es nun aber mit deiner Unterstützung mit dem Coinslider versucht und es klappt auch! Aber könntest du mir vielleicht bitte noch verraten, wie du die Punkte, die eigentlich immer unter der Show sind, hoch ins Bild verlegt hast? Denn drunter stören sie irgendwie. Eigentlich müsste man die gar nicht sehen.

Ganz liebe Grüße!
Wer aufhört zu lernen, hört auf zu leben!

glory

Ich habe nun den Teil mit der Bildbeschreibung und mit den ovalen Button aus der plugin.css entfernt und nun sind die Button ganz weg. Die werden ja auch da nicht gebraucht. Aber ich hatte die Stelle nicht gefunden, wo man sie weiter nach oben bekommt, naja, meine Unfähigkeit wieder, grins.
Wer aufhört zu lernen, hört auf zu leben!

supercat

Hallo Marlis und Dummwiebrot,

die Übung meines Sliders bestand bzw. besteht darin, dass er nur auf der Startseite erscheint. Der Coinslider ist nach der hier genannten Verfahrensweise auf jeder Seite zu sehen. Auf den Unterseiten würde mich ein Slider aber stören. Wer auf eine Unterseite geht, braucht dann diesen Hingucker nicht mehr. Der will bestimmte Informationen lesen. Ist zumindest meine Auffassung. Außerdem macht das die Web-Seite insgesamt "schwerer", wenn auf jeder Seite der Slider geladen wird. Aber das ist am Ende alles Geschmackssache  ;)

PS: Mann oh Mann, Dummwiebrot, wie kommt man denn auf so einen Nickname  :mrgreen:
Frage nicht nach meinem Alter. Ich kann doch nicht alles wissen ;-)