Mootools oder Adobe Spry für Joomla?

Mootools oder Adobe Spry für Joomla?

Wir kommen mit beidem klar, obwohl das sogenannte “Spry” von Adobe einfacher zu handhaben ist. Da im Joomla schon das Mootool eingebaut ist ist die Kombination von beiden gar nicht schlecht. Wir nehmen zum Beispiel auf unserer Seite auch beides. Beim Mootool ist uns jetzt schon öfter aufgefallen das sich manche Joomla Module die darüber verfügen, nicht wirklich zusammen Funktionieren.

Mal davon abgesehen das viele Module auch nicht W3C konform gestrickt sind, kosten viele davon auch Geld, entweder für den Beitritt in einen dem Entsprechendem “CLUB”  im das Modul runterzuladen oder über einen Direkten kauf. Obwohl man es doch auch selbst einbauen könnte.  Bei uns laufen zum Beispiel sogar zwei verschiedene Spry´s einmal das Spry-Sliding-Panel und das Spry-Collapsible-Panel. Beide sind eigentlich nur ein wenig modifiziert wurden, bzw. auf unsere Bedürfnisse zugeschnitten. Das man auch Spry einfügen und Pflegen kann wie ein Normales Joomla Modul ist prinzipiell ganz einfach.

Die “if” Funktion sollte ja schon bekannt sein. Das man damit auch komplette Div Container abschalten kann auch. Wer sich nun entschließt sein Joomla auch mit Spry auf zu Pimpen. Sollte wie folgt vorgehen. Ich beschreibe es euch wie es mit dem Sliding-Panels funktioniert.

Was Ihr als erstes machen solltet, ist von euerm Laufenden Templates eine Kopie erstellen damit Ihr sie nicht komplett zerschießt. Wenn Ihr das erledigt habet können wir mit dem eigentlichem Einbau des Sliding Panels beginnen.

Wie gesagt es gibt mehrere Variationen dieses Panels, wir nehmen das was wir verbaut haben.

Wir benötigen, um alles ordentlich zum Laufen (Sliden) zu bringen 3js. Dateien eine CSS und die entsprechenden Bilder. (Download). Als erstes solltet Hier den Bereich <”head”> andern. da müssen die entsprechenden Pfadanweisungen für den Js. und Css Dateien rein.

Könnte wie folgt aussehen:

<head>
<jdoc:include type=“head“ />…………………

<script src=“<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/slidingpanels/SpryDOMUtils.js“ type=“text/javascript“></script>
<script src=“<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/slidingpanels/SprySlidingPanels.js“ type=“text/javascript“></script>
<script src=“<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/slidingpanels/sp_withTabs.js“ type=“text/javascript“>></script>

……………</head>

Dem aufmerksamen Leser, ist nun aufgefallen das die CSS Angabe fehlt. Diese importieren wir mit der Standard Css Datei. Die Angabe für diesen Import sieht so aus:

/* tabs */
@import url(/templates/euer-Template/slidingpanels/sliding_panels.css);

Nun ist unser Template schon Mal klar das es die Spry Daten aus den entsprechenden Pfaden holen soll. Das Ihr den Pfad entsprechend eurer Joomla Installation abändern könnt ist klar. Wir haben das Päckchen gleich im Template Verzeichnis. Ist einfach sauberer.

Ihr solltet nun den Slider in eurem Template einbauen. Dafür schreibt Ihr aber erst die Funktion “IF” so könnt Ihr das Teil steuern auf welcher Seite es angezeigt wird oder ausgeblendet ist.

Das sollte dann so aussehen.

<?php if( $this->countModules(‚user1‘) ): ?>
<div class=“slidingTabPanelWrapper“>

<ul class=“slidingTabPanel“>
<li><a href=“#“ id=“tab1″ class=“tabActive“ title=“Hier den Title bei Mouse over z.b. Tab1″></a></li>
<li><a href=“#“ id=“tab2″ class=“tab“ title=“Hier den Title bei Mouse over z.b. Tab2″></a></li>
<li><a href=“#“ id=“tab3″ class=“tab“ title=“Hier den Title bei Mouse over z.b. Tab3></li>
<li><a href=“#“ id=“tab4″ class=“tab“ title=“Hier den Title bei Mouse over z.b. Tab4″></a></li>
</ul>
</div>
<div id=“slidingPanel“>
<div>

<div id=“tab1Panel“ class=“p1″>
<jdoc:include type=“modules“ name=“user1″ />
</div>
<div id=“tab2Panel“ class=“p2″>
<jdoc:include type=“modules“ name=“user2″ />
</div>
<div id=“tab3Panel“ class=“p3″>
<jdoc:include type=“modules“ name=“user3″ />
</div>
<div id=“tab4Panel“ class=“p4″>
<jdoc:include type=“modules“ name=“user4″ />
</div>
<div class=“tabsfooter“></div>
</div>

<?php endif; ?>

Wie Ihr nun sehen könnt sind die einzelnen Modul Positionen schon angegeben. Achtung!! Normalerweise ist Modul 3 (<jdoc:include type=“modules“ name=“user3″ />) das Obere Menü im Joomla, solltet Ihr natürlich ändern. Auch zu sehen ist das wenn, Modul1 aktiv ist. ist das ganze sichtbar, auf eine Seite auf der das Modul nicht aktiviert ist ist das Panel weg. Dies wird durch den Befehl

<?php if( $this->countModules(‚user1‘) ): ?> bis <?php endif; ?> bewirkt. Alles was zwischen diesen Befehlen steht wird je nach ansteuern des Moduls gezeigt oder auch nicht.

Sollten die Positionen schon vergeben sein, schreibt einfach eine oder mehrere neue in die Datei “templateDetails.xml”  Sollte wie folgt aussehen. Zum Beispiel die Position “User159”  fügt Ihr so in die “templateDetails.xml” ein:

<position>user159</position>

Nachdem Ihr das eingefügt und auf euren Server hochgeladen habt, steht euch nun in den Modulen diese Position zur Verfügung. Nun habt Ihr den Slider, Positionen und die entsprechenden Scipte auf eurer Seite. (Hochgeladen vorausgesetzt) natürlich wollt ihr jetzt auch noch einen Inhalt in den Slider bringen. Dazu sollte man erwähnen das, das  Joomla 1.5.x über eine sehr gute Funktion in den Modulen verfügt, das Kopieren der Module. Wir haben um den Inhalt in die Tabs zu bringen eigentlich nur das Modul “mod_newsflash” ein paar mal Kopiert. Vorher solltet Ihr natürlich in den Bereichen einen Anlegen entsprechenden Bereich anlegen, in dem Ihr dann einzelne Kategorien packt.

Könnte dann wie folgt sein:

  • Bereich>Tabpanel
  • Bereich>Tabpanel>Kategorie>Tab1
  • Bereich>Tabpanel>Kategorie>Tab2
  • Bereich>Tabpanel>Kategorie>Tab3
  • Bereich>Tabpanel>Kategorie>Tab4

spry1

Nun müsst Ihr nur noch bei den Kopierten Newsflash Modulen die Ausgabe an die Position und Kategorie bringen. Schon habt Ihr einen eleganten TabsSlider mit, über Joomla , änderbaren Inhalt.

spry2

Die Beispiel Dateien bekommt Ihr Hier.

Teile uns

Schreibe einen Kommentar

Über WAM

Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

-
Das Archiv
Werbung
Haendlerbund_Leistungen_265x221_animiert
Datenschutz-Übersicht
logo_wam_gray

Hier können Sie einstellen welche Cookies unsere Webseite auf Ihrem Endgerät speichern „Local Storage“ darf. Diese werden beim nächsten besuch auf unserer Webseite reaktiviert. Diese Einstellungen können Sie jederzeit wieder ändern. Dazu klicken Sie unten Links auf das Zahnradsymbol.

Sie können die Cookies nach dem Besuch unserer Webseite natürlich auch bedenkenlos löschen. Dazu müssen Sie die entsprechenden Einstellungen in Ihrem Browser vornehmen.

Unbedingt notwendige Cookies

Unbedingt notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können.

  • pll_language .

Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr

  • reCAPTCHA ist ein CAPTCHA-System,

das es Webhostern ermöglicht, zwischen menschlichen und automatisierten Zugriffen auf Websites zu unterscheiden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten:
KlickpfadSichtbarkeit von Anzeigen messenMausbewegungZeitstempelKlicks auf Anzeigen verfolgenConversion-TrackingIPUhrzeit und Datum verfolgenVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.
Cookies, die in Ihrem Browser gesetzt werden Cookiename Beispielwert Ablaufzeit Typ Domain rc::a MjNxdWs3M2o5ZGt­x Persistent Funktion www.google.com

  • Google Fonts

ist ein Dienst, der es Websites ermöglicht, bestimmte Schriftarten für ihre Gestaltung zu verwenden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

  • Google Maps

ist ein von Google entwickeltes Web-Mapping-Produkt.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten
Betrugserkennung und -präventionSichtbarkeit von Anzeigen messenZeitstempelIPUhrzeit und Datum verfolgenVerfolgen des BenutzergerätsVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.

Drittanbieter-Cookies

Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher der Website zu sammeln.

Betreibergesellschaft der Google-Analytics-Komponente ist die Google Inc., 1600 Amphitheatre Pkwy, Mountain View, CA 94043-1351, USA.

Name des Cookies: _ga
Inhalte: GA1.2.1970440283.1622365906
Ablaufdatum des Cookies : 1 Jahr - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gat_gtag_UA_1602708_1
Inhalte: 1
Ablaufdatum des Cookies : 1 Minute - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gid
Inhalte: GA1.2.1949554392.1622365906
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Name des Cookies: chimpstatic
Inhalte: E-Mail Adresse bei Newsletter anmeldung
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Zusätzliche Cookies

Diese Website verwendet die folgenden zusätzlichen Cookies:

Name des Cookies: pll_language
Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr - Nur bei sicheren Verbindungen zur gleichen Website

Name des Cookies: moove_gdpr_popup
Cookie zur Speicherung der Funktion der Cookieseinstellung - Ablaufdatum 1 Jahr - Nur bei Verbindungen zur gleichen Website