Mootool Slider im Joomla

Mootool Slider im Joomla

Die zur Zeit sehr populären Mootools in eine Seite einzubauen scheint für manche Leute „laut einigen Foren“ das leichteste der Welt zu sein !?
Richtig! Es wird auch sehr oft beschrieben wie es geht. Leider zu 90 % auf englisch und nur selten für eine Joomla Seite . Darum nun mal das deutsche Tutorial, wie es gemacht wird

Wir fangen mit dem Original FX.Slide an. Den könnt Ihr hier runterladen http://demos.mootools.net/Fx.Slide

moo

Als erste nehmt Ihr euch eure „index.php“ aus dem Templates Ordner vor. Dort muss ein Java Script in den Head Bereich eingefügt werden.

Code:
<head>……..Informationen der Seite
<link rel=“stylesheet“ href=“/<?php echo $mosConfig_live_site;?>/templates/euer Templates Ordner/demo.css“ type=“text/css“ />
<script type=“text/javascript“ src=“/<?php echo $mosConfig_live_site;?>/templates/euer Templates Ordner/mootools.js“></script>
<script type=“text/javascript“ src=“/<?php echo $mosConfig_live_site;?> /templates/euer Templates Ordner/demo.js“></script>
…… (hier kann noch mehr stehen das für euer Templates wichtig ist.)
</head>

Wenn ihr diesen Code eingefügt habt solltet Ihr die Dateien in das entsprechende Verzeichnis hochladen. Es müssen drei Dateien  sein.

1.       Die Demo .css Datei
2.       Die  mootools.js Datei
3.       Und die demo .js Datei

Wenn alle drei Dateien auf euren Server geladen sind müsst Ihr nur noch die Funktion in die Seite einbinden.  Das wird wie folgt vorgenommen.

Ich nutze für dieses Beispiel die Original Datei von Mootools.

Der nachfolgende Code sind die Knöpfe, wie Raus, rein, schleißen etc.

<div class=“marginbottom“>
<a id=“v_slideout“ href=“#“>slide out</a>|
<a id=“v_slidein“ href=“#“>slide in</a>|
<a id=“v_toggle“ href=“#“>toggle</a>|
<a id=“v_hide“ href=“#“>hide</a>|
<a id=“v_show“ href=“#“>show</a>|
<strong>status</strong>:
<span id=“vertical_status“>open</span>
</div>

Ab hier ist die eigentliche Slide Funktion also das auf und zuklappen / fahren des Frames.

<div id=“vertical_slide“>
Hier könnt Ihr ein Modul Positionieren das im Slider erscheinen soll, z.b. Newsflash oder Login. Das könnt Ihr machen wie Ihr es möchtet. Zb.  <?php mosLoadModules ( ‚user4‘, -1 ); ?>
</div>

Im Grunde ist damit schon das Mootool in das Joomla eingebaut.
Wenn Ihr alles richtig gemacht habt dürftet Ihr auf der Seite nun den geöffneten Slider sehen. Wem es so gefällt, kann es so lassen.  Wem nicht, der muss weiter lesen.
Da das Mootools den richtigen Effekt erst erhält wenn es beim laden der Seite geschlossen bleibt, haben wir es auch im geschlossenen zustand eingebaut.  Nun wird das Ganze etwas Kompliziert wenn man sich nicht mit den Funktionen von den einzelnen Dateien auskennt.
Die schritte zwei und drei bleiben gleich. Also die script code´s in den Header Bereich eurer Seite einfügen und die eigentliche Funktion in die Seite einfügen. Wenn Ihr das getan habt nehmt Ihr euch die „demo.js“ vor , hier geht wie folgt vor.Im Bereich des Vertical Slide (myVerticalSlide) habt Ihr die einzelnen Funktionen der Buttons stehen.

Original Code:

window.addEvent(‚domready‘, function() {

var status = {
‚true‘: ‚open‘,
‚false‘: ‚close‘
};

//-vertical
var myVerticalSlide = new Fx.Slide(‚vertical_slide‘);
$(‚v_slidein‘).addEvent(‚click‘, function(e){
e.stop();
myVerticalSlide.slideIn();
});
$(‚v_slideout‘).addEvent(‚click‘, function(e){
e.stop();
myVerticalSlide.slideOut();
});
$(‚v_toggle‘).addEvent(‚click‘, function(e){
e.stop();
myVerticalSlide.toggle();
});
$(‚v_hide‘).addEvent(‚click‘, function(e){
e.stop();
myVerticalSlide.hide();
$(‚vertical_status‘).set(‚html‘, status[myVerticalSlide.open]);
});
$(‚v_show‘).addEvent(‚click‘, function(e){
e.stop();
myVerticalSlide.show();
$(‚vertical_status‘).set(‚html‘, status[myVerticalSlide.open]);
});
// When Vertical Slide ends its transition, we check for its status
// note that complete will not affect ‚hide‘ and ’show‘ methods
myVerticalSlide.addEvent(‚complete‘, function() {
$(‚vertical_status‘).set(‚html‘, status[myVerticalSlide.open]);
});

Diesen Code solltet Ihr nun bearbeiten.

Die Funktion die für das geschlossene erscheinen zuständig ist, ist die „Toggle“.

Nehmt also diesen und ersetzt Ihn mit dem Folgendem :

window.addEvent(‚domready‘, function() {

var status = {
‚true‘: ‚open‘,
‚false‘: ‚close‘
};

//-vertical
//var myVerticalSlide = new Fx.Slide(‚vertical_slide‘);
var myVerticalSlide = new Fx.Slide(‚vertical_slide‘).hide();
$(‚v_toggle‘).addEvent(‚click‘, function(e){e = new Event(e);
myVerticalSlide.toggle();e.stop();});
// When Vertical Slide ends its transition, we check for its status
// note that complete will not affect ‚hide‘ and ’show‘ methods
myVerticalSlide.addEvent(‚complete‘, function() {
$(‚vertical_status‘).set(‚html‘, status[myVerticalSlide.open]);
});

Nun sollte der Slider beim laden der Seite geschlossen bleiben.
Wenn die demo.js dem entsprechend bearbeitet ist. Wird diese wieder mit den dazugehörigen Dateien auf euern Server geladen.
Die beschriebene Funktion ist für den Vetikalen Slider.
Wenn Ihr mehrere Slider auf der Seite einfügen wollt müsst Ihr natürlich die entsprechenden Funktionen in der Demo.js und in der Demo.css sowie in der index.php des Templates  ein fügen .
Funktioniert aber auch ohne größere Probleme

Tags: Java | Joomla | Lösung | Mootool

Teile uns

KOMMENTARE (1) “Mootool Slider im Joomla”

  • Tobi sagt:
    19. Oktober 2010 in 17:42 Antworten

    Vielen Dank für den Artikel!
    Ich bin verrückt geworden, um die Demo unter Joomla zum Laufen zu kriegen. Jetzt hat’s geklappt. 😉

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