Eigenen J-Query Slider in Joomla

WAM
Tutorials, How to Do
Donnerstag - 8 . Juli . 2010

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.

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.

Vorherigen Beitrag

Nächster Beitrag

Eigenen J-Query Slider in Joomla