Using jQuery Tooltip as Image-Zoom
Vor kurzem habe ich unseren Familienblog mit einem neuen Theme ausgestattet, in dem ich auch die “Post_Thumbnail”-Funktion nutze – für mich eine der besten Funktion der jüngeren WordPress-Entwicklung. Allerdings gab das Theme nur eine begrenzte Größe der Vorschaubilder her, so dass ich eine Möglichkeit suchte, die Vorschaubilder bei dem Überfahren mit der Maus zu vergrößern…
Da ich jQuery schon für andere Effekte in diesem Theme nutzte, entschied ich mich für den jQuery Tooltip. Ein äußerst schlankes jQuery-Plugin mit einem schönen Effekt.
Um anstelle des klassichen Tooltips mit dem Title-Tag einen Zoom-Effekt für Vorschaubilder zu ereichen, muss man nur eine kleine Änderung im Loop vornehmen… Und so geht´s.
1. jQuery-Tooltip im Theme installieren und verfügbar machen
Zum Einbinden des Tooltip-Scripts stehen zwei Varianten zur Verfügung. Entweder, ihr installiert das Script in eurem Theme-Ordner, oder ihr bindet es direkt von der Projekt-Seite in euer Theme ein. Egal welche Methode ihr bevorzugt, der Aufruf ist nahezu identisch.
Öffnet die functions.php eures Themes und tragt dort folgende Funktion ein;
1 2 3 4 5 6 7 8 9 | // load jQuery-Tooltip function my_tooltip(){ if (!is_admin()) { wp_register_script( 'tooltip', get_bloginfo('template_directory').'/js/jquery.tools.min.js', false, '', true); wp_enqueue_script('jquery'); wp_enqueue_script('tooltip'); } } add_action('init', 'my_tooltip'); |
In dieser Funktion laden wir das Tooltip-Script aus unserem Theme Ordner direkt in den Footer unseres Themes. In meinem Beispiel gibt es einen Unterordner /js in dem sich das Script befindet. Herunterladen könnt ihr es euch auf der Projekt-Seite.
Die zweite Möglichkeit ist das Laden des Scripts direkt von der Projekt-Seite. Hierfür ersetzt ihr einfach die Zeile
wp_register_script( 'tooltip', get_bloginfo('template_directory').'/js/jquery.tools.min.js', false, '', true);
mit
wp_register_script( 'tooltip', 'http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js', false, '', true);
Damit haben wir das Tooltip-Script unserem Theme zur Verfügung gestellt.
Weiter geht es mit dem Javascript-Code zum Aufruf des Tooltips. Dafür öffnet ihr nun die footer.php eures Themes und tragt folgende Zeilen hinzu:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); jQuery(document).ready(function(){ jQuery(".zoomer").tooltip({ effect: 'fade', fadeInSpeed: 300, relative: true }); }); //]]> </script> |
Damit lösen wir den Tooltip mit einem Fade-Effekt beim Überfahren aller Elemente mit der Klasse “Zoomer” aus (dazu später mehr). Das Attribut “relative” ist nicht zwingend erforderlich für die Funktion des Scripts, aber es wird bei Dartellungsproblemen des Effekts benötigt. Hier gilt es zu auszuprobieren…
Wichtig: Diese Zeilen müssen nach dem wp_footer(); – Tag notiert werden, da dort der Aufruf des Tooltip-Scripts erfolgt (wie oben beschrieben), und das muss vor dem eigentlichen Javascript geschehen!
Kommen wir nun zum “Füllen” des Tooltips für unseren Zoom-Effekt.
2. the_post_thumbnail anpassen und mit dem Tooltip verknüpfen
Zuerst sollten wir noch wissen, dass der jQuery-Tooltip auch jegliche Art von Inhalt darstellt, und nicht nur den klassischen “Title-Tag” eines Elements. Ein gutes Beispiel hierfür liefert uns die Dokumentation des Scripts. Nur wollen wir anstelle der dort beschriebenen Tabelle unser vergrößertes Bild wiedergeben.
Ein Blick auf den Demo-Code lohnt sich aber auf jeden Fall, da hier sehr einfach die Funktionsweise beschrieben wird.
Jetzt benötigen wir die Vorschaubilder (Post-Thumbnails). Wenn wir beispielsweise den Effekt auf der Startseite nutzen möchten, öffnen wir die index.php unseres Themes und suchen nach dem Aufruf der Vorschaubilder innerhalb unseres Loops und ersetzen diesen mit folgendem Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> ... <?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it. $thumb = preg_replace('|title="[^"]*"|U', '', get_the_post_thumbnail($post->ID, 'thumbnail')); echo '<div class="zoomer">'; echo $thumb; echo '</div> <div class="tooltip">' . get_the_post_thumbnail($post->ID, 'medium') '</div>'; } ?> ... <?php the_content(); ?> ... |
Was tut dieser Code? Im Grunde folgendes… Zuerst prüfe, ob es überhaupt ein Vorschaubild gibt. Wenn ja, dann lade es und entferne den Titel-Tag des Bildes. Dieser Schritt ist nicht zwingend erforderlich, aber er verhindert ein Fehlverhalten des Tooltips.
In der Box mit der Klasse “tooltip” laden wir nun das selbe Vorschaubild noch einmal in der “Medium-Größe”. Da das kleine Vorschaubild im DIV mit der Klasse “zoomer” (wie oben beschrieben) geladen wird, zeigt uns der Mouseover jetzt den div “tooltip” mit dem größeren Bild.
Natürlich kann man mit den Dimensionen der Bilder viel experemtieren. Hierfür gibt uns die WordPress-Doku genug Spielraum, oder ihr schaut mal auf diesen Artikel… Hier habe ich mal die “add_image_size” – Funktion beschrieben.
Zu guter Letzt noch die notwendigen CSS – Anweisungen.
Damit wir nur die vergrößerten Bilder beim Mouseover zeigen, müssen wir der CSS-Klasse .tooltip display: none; zuweisen. Die Standard-CSS sieht so aus:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .tooltip { display:none; height:auto; width:auto; padding:40px 30px 10px 30px; } /* mouseover state */ .zoomer:hover { background-position: 0px -80px ; } /* clicked state */ .zoomer:focus { background-position: 10px -80px; } |
Natürlich sind der Gestaltung hier keine Grenzen gesetzt.
Und das war´s im Grunde auch schon. Das Script ist fertig und sollte euch einen schönen Zoom-Effekt für Vorschaubilder liefern.
Ein Live-Demo könnt ihr euch hier auf meinem Familienblog ansehen. Ich nutze den Tooltip auf der Startseite und den Archiven und habe es noch mit dem Beitrags-Titel und den Link zum Artikel ergänzt. Auch hier sind eurer Kreativität kaum Grenzen gesetzt.
Viel Spaß beim “Zoomen” 