Die winzige Datei ist ein Weltmeister im automatischen/serverseitigen Generieren von neuen Formaten und Ausschnitten von Bildern (gif, jpg, png). Klar, dass dieses Script ein Liebling von Theme-Designern ist, stellt es doch sicher, dass Bilder immer im richtigen Format an der richtigen Stelle auftauchen.

Und so funktioniert’s

Kopiere die Datei timthumb.php in das Verzeichnis Deines aktuellen Themes.

Erstelle einen Artikel und uploade ein beliebiges Bild. Füge es aber nicht in Deinem Artikel ein, sondern kopiere nur die Bildadresse. Diese erhältst Du entweder, indem Du im Uploadfenster auf das Bild selbst mit der rechten Maustaste klickst und =>Grafikadresse kopieren anklickst (FireFox).

Dann bestätigst Du =>Alle Änderungen speichern und schließt das Download-Fenster.

Nun kommt wieder ein Spezialfeld zum Einsatz

Unter dem großen Texteingabefenster findest Du eine Box namens “Spezialfelder“. Klicke dort auf =>Neu anlegen und gib einen Namen für Dein neues Spezialfeld ein, z.B. “meinbild”. Füge im Textfeld “Wert” die vorher kopierte Grafikadresse ein.

Diese Information kann nun für Dein TimThumb genützt werden.

Wert eines Spezialfeldes anzeigen lassen

Dort wo Du ein Bild in einem automatisch generierten, definierten Format anzeigen willst, fügst Du folgenden Code ein:
[php]
<img src="<?php echo bloginfo(‘template_url’); ?>/timthumb.php?src=/<?php
$values = get_post_custom_values("meinbild"); echo $values[0]; ?>&w=40&h=40&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="40px" height="40px" />
[/php]
Dies ist nur ein Beispiel von vielen, wie ein Wert aus einem Spezialfeld in Deinen Artikel “gezaubert” werden kann. Weitere Beispiele findest Du etwa in den Themes von Elegantthemes.

Download: timthumb.php (gezipped)

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!

wir suchen grad nach ner slideshow,

sind ganz begeistert von der im artzzz.net.

wollten fragen, ob das die ist:

http://jqueryfordesigners.com/slider-gallery/  ?

lg, id & ephi