Vor einiger Zeit wollte ich einen Slider für einen WordPress-Blog gestalten, der ausnahmsweise nicht durch Zahlen oder die üblichen Weiter- & Zurück-Buttons navigierbar ist, sondern durch Thumbnails. Dementsprechend begab ich mich auf die Suche nach einem passenden jQuery-Script und wurde nach einiger Zeit auch fündig. In diesem Artikel erkläre ich nun, wie man diesen Slider am schnellsten nachbaut.
Zuerst wird die entsprechende jQuery-Bibliothek eingebunden. Das kann durch Angabe eines Links zu einer online verfügbaren Ressource geschehen oder indem man die Bibliothek als Datei in das Theme direkt einbindet. Ich habe mich für letztere Variante entschieden. Die Zeile Code wird in den head-Bereich des Themes kopiert:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
Direkt darunter folgt dann das entsprechende jQuery-Script für den Slider:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div.postteaser").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("div.postteaser").hover(
function() {
$("div.postteaser").tabs("rotate",0,false);
},
function() {
$("div.postteaser").tabs("rotate",5000,true);
}
);
});
</script>
Je nachdem, an welcher Stelle der Slider später auftauchen soll, wird folgender Code in das entsprechende Template eingefügt:
<div class="postteaser">
<div class="ui-tabs-panel">
<?php $i = 0; ?>
<?php query_posts("posts_per_page=6"); ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( has_post_thumbnail() ) { ?>
<div id="fragment-<?php $i++; echo $i ;?>">
<div class="meta">
<?php the_time('l'); ?>, <?php the_time('d.m.Y'); ?>, <?php the_time(); ?> Uhr
</div>
<a href="<?php the_permalink() ?>">
<?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
the_post_thumbnail(array(145,145), array("class" => "post_thumbnail"));
} ?>
</a>
<div class="rightside">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</div>
</div>
<?php } ?>
<?php endwhile; wp_reset_query(); ?>
</div>
<ul class=“ui-tabs-nav“>
<?php $i = 0; ?>
<?php query_posts(„posts_per_page=6″); ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( has_post_thumbnail() ) { ?>
<li class=“ui-tabs-nav-item“ id=“nav-fragment-<?php $i++; echo $i ;?>“>
<a href=“#fragment-<?php $i; echo $i ;?>“>
<?php if ( function_exists(‚has_post_thumbnail‘) && has_post_thumbnail() ) {
the_post_thumbnail(array(70,70), array(„class“ => „post_thumbnail“));
} ?>
</a>
</li>
<?php } ?>
<?php endwhile; wp_reset_query(); ?>
</ul>
</div>
Der erste Teil dieses Codes generiert den Teaser des aktuellen Artikels, der zweite Code-Teil erzeugt dagegen nur die Thumbnails der verfügbaren Artikel. Klickt man diese an, so wird im oberen Teil der zugehörige Teaser des Artikels angezeigt.
Um das Ganze optisch anzupassen, fehlen natürlich noch die CSS-Klassen. Da ich den Slider für ein bestimmtes Projekt gestaltet habe, fehlen natürlich evtl. vorkommende Bilddateien. Diese können allerdings ersatzlos gestrichen oder im Austausch zu einer entsprechenden Hintergrundfarbe (siehe Bild) ersetzt werden. Hier nun das CSS:
.art-header .postteaser {
width:602px;
height:290px;
position:absolute;
bottom:0px;
right:0px;
}
.art-header .postteaser .ui-tabs-panel {
width:602px;
height:211px;
overflow:hidden;
}
.art-header .postteaser .ui-tabs-panel .meta {
color:#fff;
font-family: 'Sansita One', cursive;
font-size:0.75em;
text-align:right;
margin:4px 21px 0px 0px;
}
.art-header .postteaser .ui-tabs-panel a img.post_thumbnail {
border:2px solid #ded7d1;
float:left;
margin:26px 15px 0px 12px;
display:block;
}
.art-header .postteaser .ui-tabs-panel .rightside {
color:#fff;
margin:26px 15px 0px 0px;
font-size:0.8em;
}
.art-header .postteaser .ui-tabs-panel .rightside h2 a {
color:#fff;
font-size:0.7em;
line-height:90%;
}
a.more-link {
color:#fff;
text-decoration:underline;
}
.art-header .postteaser .ui-tabs-panel .ui-tabs-hide {
display:none;
visibility:hidden;
}
.art-header .postteaser ul.ui-tabs-nav {
float:right;
height:86px;
overflow:hidden;
margin-top:-8px;
}
.art-header .postteaser ul.ui-tabs-nav li.ui-tabs-nav-item {
background:#917f75 url("images/slider_img.png") repeat-x bottom;
float:left;
border-radius:0px 0px 8px 8px;
margin-left:7px;
display:inline-block;
}
.art-header .postteaser ul.ui-tabs-nav li.ui-tabs-nav-item a {
display:block;
padding:5px;
}
.art-header .postteaser ul.ui-tabs-nav li.ui-tabs-nav-item img {
border:2px solid #ded7d1;
margin-top:2px;
}
Und schon ist der Slider fertig :)
Published by