Eigenen J-Query Slider in Joomla

Eigenen J-Query Slider in Joomla

Mittlerweile gibt es Content und, oder, Bild-Slider auf jeder dritten Seite. Nicht nur das diese Slider sehr populär sind, sie können auch fast in jedes CMS intrigiert werden. Teilweise sogar so, dass sie über das CMS beschreibbar bleiben, so das man auch die Inhalte mal wechseln kann. In diesem kleinen Tutorial wir Euch beschrieben wie Ihr solch einen Slider, in das Content-Management-System Joomla 1.5.x einbauen könnt.


Sicherlich könntet Ihr auch in den verschiedenen Joomla-Clubs oder auf den Entwicklerseiten solch eine Extension kaufen.

intro_image_SliderforJoomla_new
Punkt 1. Sehen die immer gleich aus, egal welchen Inhalt Ihr rein, macht.

Punkt 2. Müsst Ihr dafür kein Geld ausgeben, geht nämlich ganz einfach.

Punkt 3. Es klappt mit fast jedem dieser Slider, also immer wieder anders.

Wir nehmen für dieses Tutorial, einen recht einfachen Slider, der Content und Bilder verarbeiten kann. Den AnythingSlider bekommt Ihr auf http://css-tricks.com/examples/AnythingSlider/ im Original.

Leider ist im Original, etwas zu viel Text, der einen nur durcheinander macht. Darum könnt Ihr am ende des Tutorial’s eine überarbeitete Datei laden.

Um den Slider sauber in Eurem Joomla intrigieren zu können, müsst Ihr 3 Dateien bearbeiten und drei / vier neu hinzufügen.

1. Die index.php eures Templates

2. Die templateDetails.xml

3. Die js Datei, falls diese vorhanden ist.

Zu Eurem Template hinzufügen müsst Ihr:

1. Die jquery.anythingslider.js

2. Die jquery.easing.1.2.js

3. Die bearbeitete CSS-Datei (mit @import url(slider.css);) in euere stamm CSS einfügen.

4. Solltet Ihr wiedererwartend, keine Js im Template haben, solltet Ihr dies auch einfügen.

Fangen wir als Erstes mit der Bearbeitung der index.php aus Eurem Template an. Macht Euch bitte bevor Ihr los legt eine Kopie des Originals, falls etwas schiefgehen sollte.

Damit der Slider auch auf den gewünschten Seiten sichtbar ist, verwenden wir ein den Befehl:

<?php if( $this->countModules(’slider1′) ): ?>
<!–……Platz für den Slider……–>
<?php endif; ?>

So habt Ihr die Möglichkeit den Slider z. B. auf der Startseite einzublenden, und auf den Unterseiten nicht.

Ihr solltet darauf achten das, das zugewiesene Modul, auch noch frei ist, am besten ist es, wenn Ihr dafür eine eigene Modul-Position anlegt, z.b. slider1. Auch die einzelnen Tabs, die im Slider laufen, könnt Ihr Manuel benennen. , z.b. slider2 , slider3 , slider4, ….

Der Slider sollte wie folgt aussehen:

<?php if( $this->countModules(‚~slider1~‘) ): ?>
<div class=“anythingSlider“>
<div class=“wrapper“>
<ul>
<li>
<div id=“textSlide“>
<jdoc:include type=“modules“ name=“slider1″ />
</div>
</li>
<li>
<div id=“textSlide“>
<jdoc:include type=“modules“ name=“slider2″ />
</div>
</li>
<li>
<div id=“textSlide“>
<jdoc:include type=“modules“ name=“slider3″ />
</div>
</li>
<li>
<div id=“textSlide“>
<jdoc:include type=“modules“ name=“slider4″ />
</div>
</li>
<li>
<div id=“textSlide“>
<jdoc:include type=“modules“ name=“slider5″ />
</div>
</li>
</ul>
</div>
</div>
<?php endif; ?>

Um im Joomla nun auch die Positionen nutzen zu können, solltet Ihr die templateDetails.xml bearbeiten.

Hier müssen die angegebenen Positionen wie folgend eingefügt werden.

<position>slider1</position>
<position>slider2</position>
<position>slider3</position>
<position>slider4</position>
<position>slider5</position>

Die Zuweisungen der Inhalte könnt Ihr auf einfachster Art und weise machen. Da Ihr nun die Positionen angegeben habt, könnt Ihr im Backend vom Joomla, unter den Modulen, das z.b. Newsflash, der Position „Slider1“ zuweiden. So könnt Ihr ganz individuelle Inhalte in den Slider einfügen.

Bisher sieht der Slider aber noch aus wie gewollt, aber nicht hin bekommen.

Nehmt Euch als Nächstes die CSS-Datei vor. Diese könnt Ihr natürlich auf Eurer Template anpassen.

{ width: 760px;
height: 360px;
position: relative;
margin: 0 auto 15px;
}
.anythingSlider .wrapper
{ width: 680px;
overflow: auto;
height: 341px;
margin: 0 40px;
position: absolute;
top: 0; left: 0;
}
.anythingSlider .wrapper ul
{ width: 32700px;
list-style: none;
position: absolute;
top: 0; left: 0;
background: #eee;
border-top: 3px solid #e0a213;
border-bottom: 3px solid #e0a213;
margin: 0;
}
.anythingSlider ul li
{ display: block;
float: left;
padding: 0;
height: 317px;
width: 680px;
margin: 0;
}
.anythingSlider .arrow
{ display: block;
height: 200px;
width: 67px;
background: url(../images/arrows.png) no-repeat 0 0;
text-indent: -9999px;
position: absolute;
top: 65px;
cursor: pointer;
}
.anythingSlider .forward
{ background-position: 0 0; right: -20px; }
.anythingSlider .back
{ background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover
{ background-position: 0 -200px; }
.anythingSlider .back:hover
{ background-position: -67px -200px; }

#thumbNav
{ position: relative; top: 323px; text-align: center; }
#thumbNav a
{ color: black;
font: 11px/18px Georgia, Serif;
display: inline-block;
padding: 2px 8px; height: 18px;
margin: 0 5px 0 0;
background: #c58b04 url(../images/cellshade.png) repeat-x;
text-align: center;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px; }
#thumbNav a:hover
{ background-image: none; }
#thumbNav a.cur
{ background: #e0a213; }

#start-stop
{ background: green;
background-image: url(../images/cellshade.png);
background-repeat: repeat-x;
color: white;
padding: 2px 5px; width: 40px;
text-align: center;
position: absolute;
right: 45px;
top: 323px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#start-stop.playing
{ background-color: red; }
#start-stop:hover
{ background-image: none; }

/*
Prevents
*/
.anythingSlider .wrapper ul ul
{ position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li
{ float: none; height: auto; width: auto; background: none; }

Ihr könnt auch die vorbereitete CSS-Datei mit in das CSS-Verzeichnis Eures Templates laden.

Wie Ihr nun seht, bewegt sich hier noch nichts, dafür solltet Ihr nun die JavaScript Dateien intrigieren.

Ladet als Erstes einmal die beiden vorbereiteten JS-Dateien zu Eurem Template hoch am besten in den Ordner js.

(ROOT>JOOMLA>TEMPLATES>EUER-TEMPLATE>JS>)

Als Nächstes ergänzt Ihr in der index.php Eures Templates, im <head> Bereich die folgenden angaben.

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js“></script>
<script src=“<?php echo $templateUrl; ?>/js/jquery.anythingslider.js“ type=“text/javascript“ charset=“utf-8″></script>
<script type=“text/javascript“ src=“<?php echo $templateUrl; ?>/js/jquery.easing.1.2.js“></script>

Ihr solltet nun den Slider in Funktion sehen. Vergesst nicht, das Ihr dem Slider, auch die, Modul Positionen zuweist, sonnst bleibt er leer.

Im Grunde war es da schon. So wie in diesem Tutorial beschrieben könnt Ihr fast jeden dieser Slider in Joomla einbauen.

demo

 

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