Wie du eine jQuery Bilder Slideshow im Thesis Theme erstellst

Eine jQuery Bilder Slidershow im WordPress Thesis Theme zu erstellen ist relativ einfach. Hier gibt es vier Schritte:

  • Ein paar neue Zeilen an Code im Header
  • Eine SlideShow erstellen <div id="slideshow">
  • Bilder für die SliderShow in den images Ordner ablegen
  • Einen kleinen magischen Code in die custom.css schreiben

Bevor wir anfangen möchte ich einige Voraussetzungen ansprechen. Du solltest die Bilder die du verwenden möchtest, schon in einer Einheitlichen Größe (Höhe und Breite) angelegt haben. Du kannst in den Slider ebenso jeden HTML-Code einfügen, wir nutzen hier nur mal Bilder. Als letztes verwenden wir noch einen Standard Überblendungs-Effekt, genannt “fade”. Wenn du die jQuery Cycle Plugin Dokumentation durchliest, wirst du feststellen dass es da eine Million an Möglichkeiten gibt.

ScreenShot Custom File Editor im Thesis Theme

ScreenShot Custom File Editor im Thesis Theme

Als erstes kopiere bitte den folgenden Code, über deinen Custom File Editor in die

custom_functions.php

function slideshow() {
if (is_front_page()) {
?&gt;
<div class="slideshow"></div>
<!--?php }} add_action('thesis_hook_after_header','slideshow'); function slide_script() { echo "nn"; ?-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    $('.slideshow').cycle({
	fx: 'fade' //You can change transition effects here.
	});
});
// ]]></script>
<!--?php <br ?--> }
add_action('wp_head','slide_script');

Wenn du die Bilder SlideShow in Thesis auf jeder Seite haben möchtest entferne ganz einfach den Code-Schnipsel if (is_front_page()){...........}

Du kannst so viele Bilder wie du möchtest in die SlideShow integrieren. Wichtig ist dass die Bilder einen eigenständigen Datei-Namen haben und exakt die gleiche Größe, dann können wir die über CSS später ansprechen.

Jetzt nimm deine Bilder die du in der Thesis SlideShow verwenden möchtest und kopiere Sie in deinen images Ordner.

Als letztes müssen wir noch ein wenig CSS Code über den Custom File Editor in der custom.css einsetzen. Öffne deine customs.css und kopiere folgenden Code hinein.

.custom .slideshow .slide { display: block; height: ---em; width: ---em; outline: none; }
.custom .slideshow #slide1 { background: url('images/image-1.jpg') no-repeat; }
.custom .slideshow #slide2 { background: url('images/image-2.jpg') no-repeat; }

Den Pfad in der Klammer images/image-1.jpg musst du mit deiner URL unter der dein Bild gespeichert ist austauschen. Wenn du nun noch ein 3. Bild einfügen wollen würdest müsstest du einfach eine Zeile kopieren .custom .slideshow #slide3 { background: url('images/image-2.jpg') no-repeat; } unten ansetzen und dein Bild-Pfad angeben.

That´s it folks! 😀

VN:F [1.9.22_1171]
Rating: 9.0/10 (3 votes cast)
VN:F [1.9.22_1171]
Rating: +3 (from 3 votes)
Wie du eine jQuery Bilder Slideshow im Thesis Theme erstellst, 9.0 out of 10 based on 3 ratings

{ 0 comments… add one now }

Leave a Comment

*

Previous post:

Next post: