Image Slider (jQuery)

Für artZZZ.net habe ich folgenden jQuery Image Slider verwendet. Hier die genaue Anleitung samt dazugehörigem Dateipaket:

In Deinen Themeordner uploadest Du die Datei

• timthumb.php

In Deinem Themeordner erstellst Du einen Ordner “js” (falls nicht schon vorhanden) und uploadest in diesen die Dateien

• jquery-1.2.6.js
• jquery-ui-full-1.5.2.min.js
• sliding.js

In Deinen Ordner “images” (im Themeordner) uploadest Du die Dateien

• scrollbar.png
• scroller.png

In Deiner header.php fügst Du vor dem </head> folgendes ein:
[html]
<script src="<?php bloginfo(‘template_url’); ?>/js/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php bloginfo(‘template_url’); ?>/js/jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php bloginfo(‘template_url’); ?>/js/sliding.js" type="text/javascript" charset="utf-8"></script>
[/html]

Je nachdem, wo Dein Image Slider erscheinen soll, fügst Du den folgenden Code ein (entweder index.php oder home.php wenn vorhanden):
[html]
<!– Fügst Du an der Stelle ein, wo der Image-Slider erscheinen soll –>
<div class="sliderGallery">

<ul>
<?php
$dock = new WP_Query();
$dock->query( ‘showposts=’ );
while( $dock->have_posts() ) : $dock->the_post();
?>
<li>
<!– Das nachfolgende rel="lightbox" erzeugt den Seitenoverlay, in dem das große Bild dann aufgeht. Setzt voraus, dass Du ein lightbox-Plugin oder -Script verwendest –>
<a title="<?php the_title(); ?>" rel="lightbox" href="<?php bloginfo( ‘url’ ); ?>/<?php echo get_post_meta( $post->ID, "image_value", true ); ?>">
<!– Nachfolgend kommt wieder das Timthumb zu Ehren. Es wird in diesem Fall ein Spezialfeld namens "image_value" verwendet. Du kannst einen anderen Namen vergeben, musst ihn hier dann allerdings auch zweimal einsetzen: einmal im Link darüber, einmal im img-Tag darunter. Beachte, dass nachfolgend auch die Breite und Höhe des Vorschaubildes definiert werden (w=120 h=120) –>
<img src="<?php bloginfo( ‘template_directory’ ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=120&h=120&zc=1" alt="<?php the_title(); ?>" class="reflect" />
</a>
<?php the_content(‘» more »’); ?> <!– was auch immer hier für "Weiterlesen" stehen soll, zwischen die ‘Anführungszeichen’ –>
</li>
<?php endwhile; ?>
</ul>
<!– nachfolgende die Slidebar zum Bewegen der Bilder –>
<div class="slider">
<div class="handle"></div>
</div><!– .slider –>
</div><!– .sliderGallery –>
[/html]

In Dein Stylesheet fügst Du (am besten ganz zum Schluß) folgenden Code ein:
[css]
/* ##### Start CSS Slider ##### */
.sliderGallery {overflow: hidden; position: relative; padding: 10px 0px 0px 6px; height: 200px; width: 840px;} /*width & height musst Du natürlich an Dein Layout anpassen – gilt auch für die restlichen Werte */
.sliderGallery ul {position: absolute; list-style: none; overflow: none; white-space: nowrap; padding: 0px; margin: 0px; width: 20000px;} /* Für die Breite rechnest Du ungefähr die Summe der Breite aller Bilder zuzüglich Abstände zwischen den Bildern */
.sliderGallery ul li { float: left; margin-right: 25px;}
.slider {width: 840px; height: 17px; margin-top: 160px; padding: 1px; position: relative; background: url(images/scrollbar.png) no-repeat;}
.handle { position: absolute; cursor: move; height: 17px; width: 181px; top: 0; background: url(images/scroller.png) no-repeat; z-index: 100;}
.slider span {color: #BBB; font-size: 80%; cursor: pointer; position: absolute; z-index: 110; top: 3px;}
.slider .slider-lbl1 {left: 50px;}
.slider .slider-lbl2 {left: 107px;}
.slider .slider-lbl3 {left: 156px;}
.slider .slider-lbl4 {left: 280px;}
.slider .slider-lbl5 {left: 455px;}
/* ##### Ende CSS Slider ##### */
[/css]
Und fertig ist! Viel Spaß!

Download jQuery Image Slider Dateien & Anleitung gezipped (gezipped)

BITTE BEACHTE:

Ich habe die Dateien und Ordner so angelegt, wie sie in Deinem Themeordner angeordnet sein sollten. Den Ordner habe ich dementsprechend “meintheme” genannt.

Deine style.css nicht überschreiben! Nur die Styles herauskopieren und in Deinem style.css einfügen.

Den hier gezeigten Code nicht aus der Seite kopieren (Gefahr von unkorrekten Zeichen), sondern die Codes aus den gezippten Datein herauskopieren!

Diesen Artikel via Bookmark-Service empfehlen