Kunden – G/R Whitepapers

Katelyn font family designed by Kimmy Kirkwood and distributed by Kimmy Design Download the Katelyn Ornament font for Mac or Windows in OpenType, TrueType. Free and premium font downloads. Buy fonts.

Quelle: Katelyn Ornament premium font download

21. September 2015

The Taste

lib\tpl\vector\main.php

line 513 } ?><?php tpl_pagetitle()?> skin-vector“>

Das Pagetitle-Dings macht die Seite CSS-ansprechbar.

23. März 2013

Warm Butter Design: Websites

Warm Butter Design: Websites.

25. Oktober 2012

Tickets Ingo

2012-08-07 19:22:33 Gigpress macht oben beim Mouseover komische Fragezeichen-Cursor mit Jahreszahl drin. Wahrscheinlich ein CSS-Ding.

7. August 2012

2. August 2012

KalkWatch Tickets

GF-Admin: So for input fields, I also make sure to create a validation check against what I set as the default value so that the default isn’t acceptable.

www.gravityhelp.com/documentation/page/Gform_field…

For other field types, like radio buttons, this can be hard because sometimes, you will set a default, and for 99% of the people, that will be the correct response, and you wouldn’t want to filter/validate against that pre-populated value or have them change it, only to change it back…
2012-07-18 18:35:22 Ich kann die Seite absenden, wenn „Privatsender“ oder „Öffentlich-Rechtlicher Sender“ gewählt ist, aber kein Sender im Drop-down gewählt wurde….
2012-07-18 18:35:27 Im Moment kann ich die Seite absenden, ohne die Vorbelegungen der Felder „Sender des Grauens – Anderer Sender“ und „Zur Sache… – Bitte Titel/Marke/Anderes eintragen.“ zu ändern. Bitte prüft vor dem akzeptieren der Seite, das diese Felder geändert wurden. Sonst kriegen wir haufenweise Schrott.
2012-07-15 02:28:32 Clearing Default Field Values with jQuery

15. Juli 2012

Theme Replay

Bugs

Tracklist: Anführungsstriche werden maskiert im Frontend ausgegeben
Tooltipps der Release-Mehrfachkauflinks bleinen auch bei langem Text schmal, Anführungsstriche werden auch hier maskiert ausgegeben.
Suchergebnisse: Am Ende vieler Suchergebnisse wird am Ende ein abgehacker HTML-Tag ausgegeben. Kann mit dem Plugin „Search Everything“ zusammenhängen.

* * * * *

Die Theme-Basis von Andreas‘ WordPress war zuerst das Thematictheme Framework, auf das das Childtheme Responsive Base aufesetzt, das zusätzlich durch das Plugin Thematic HTML5 Plugin ein HTML5-Markup bezieht – einmal mehr wäre ich eigentlich froh, ein Grandchild-Theme bauen zu können, da ich beim Childtheme noch mit Versionen rechne, indem HTML5 und Responsive für Thematic relativ neue Strümpfe sind.

Musiker-Sites

www.davidarnold.com/ (Stargate, Sherlock, Little Britain …)

11. Juli 2012

Marketing-Strategien

There are two major issues. We want to make sure that nothing gets in the way of the movies. trekmovie.com

Es gibt Leute die wollen bestimmte Medien – zum Beispiel Internet gar nicht bedienen, um nicht vom Kerngeschäft abzulenken. Deswegen wird etwa von der Brainpool TV GmbH Internet aggressiv ignoriert und schlecht bedient, weil die Inhaber ihre Marke ausschließlich über den Handel mit den Ausstrahlungsrechten ihrer Formate kommunizieren und ausschlachten wollen.

26. Juni 2012

Tickets Kalkwatch

2012-06-26 16:37:35 Apple-Touch-Icons erstellen und über functions.php einklinken, alle Skeleton-Originalicons ausfiltern

26. Juni 2012

oliverwelke.de – Changer le nombre de dates de JL affichés

Sur le serveur va chercher le fichier

/home/oliverwelke/www/site/wp-content/themes/zwin/zwin_portfolio.php

Dans la ligne 5

getevents('template.html','2,17,25',15);

change le „15“ en quelque chose de grand (comme „99“) pour voir plus de articles et rechange après avoir verifié les données.

25. Juni 2012

Widget Logic

This plugin gives every widget an extra control field called „Widget logic“ that lets you control the pages that the widget will appear on. The text field lets you use WP’s Conditional Tags, or any general PHP code.

codex.wordpress.org/Conditional_Tags

www.blogprofis.de/fleissiges-helferlein-individuel…

25. Juni 2012

Eigene Taxonomien und ihre Verwaltung

21. Juni 2012

Tickets kalkofe.de

Tickets

2012-09-14 01:19:55 taxonomies als class in body
2012-09-07 14:32:01 page avec la liste des articles (titre, tagline/excerpt) – „Schlagzeilen“.
2012-09-07 13:45:52 Si signe de ponctuation à la fin du titre / tagline => pas de deux points.
2012-08-26 12:07:29 Ersten Satz von Artikeln fett – via CSS?
2012-08-13 01:32:09 NextGen Gallery benutzt in der „Slider ohne Flash“-Option JQuery Cycle. Wir wollten versuchen, da zumindest eine Nummern-Navi unten dranzubasteln. Ich glaube, Rabe hatte da schon eine Lösung …
2012-08-07 03:06:01 Krümelnavi untendarf nicht durch Kategorien springen.
2012-08-05 03:08:55 functions.php ca. ligne 174 – enlever le deuxième sidebar comme le premier.
2012-07-21 03:44:40 Cocher un article dans l’éditeur – et il est affiché en plus prominent dans l’archive de sa taxonomie
2012-07-21 03:07:23 LOOP: l’archives des rubriques: les premiers trois articles en plus grand, comme sur la une Titre, image, excerpt…
2012-07-11 13:53:12 Widgettitel per Checkbox im Editor / Dashboard ein- und ausblendbar machen.
2012-07-22 01:48:16 LOOP : J’ai compris, que maintenant à partir de la ligne 291 on dit, quels rubriques doivent figurer sur la une chaqu’une dans une boucle et dans quel ordre. J’aurais en plus besoi que les rubriques se présentent toujours dans l’ordre le la dernière mise à jour, c’est-à-dire si les dernieres rubriques actualisées seraient „Kolumne“, „Fanpost“ et „Editorial“ dans cet ordre que ces rubriques font aussi les trois premières boucles sur la une – pour que comme ça les choses les plus récentes seront toujours tout en haut de la une. En plus j’ai effacé la rubrique „frakking“ ce qui a causé une erreur qui m’a fait découvrir, que tu appelles les rubriques par leur ID et en leur attribuant un nom d’affiche. Mais en fait les noms sont attribués aux rubriques par ID et dans le backend alors il est certainement possible, d‘ en adressant l’ID appeller le nom et le slug de la rubrique – comme ça WordPress irait toujours regarder dans les rubriques en a) vérifiant qu’est que l’on a comme rubriques, b) vérifiant dans quel ordre ils ont étées mises à jour pour c) les afficher dans l’ordre de mise à jour (la rubrique la plus récemment actualisée tout en haut) en forme du loop, que t’as écrit.

~~2012-06-2114 :32:48 Sparten-Archive bauen linke Sidebar nicht aus gr-01.de/kalkofe/autor~~

Errors

2012-09-16 01:07:17 Im WordBooker divrese Zeilen (u.a. 2761 und 2762) auskommentiert, die die Startseite zubuggen.
2012-08-26 16:58:28 (clone) Notice: Trying to get property of non-object in /homepages/24/d10211197/htdocs/www-gr-01.de/kalkofe-clone/gr/wp-content/plugins/bbpress/bbp-includes/bbp-core-caps.php on line 713
2012-08-26 11:03:33 Suche – nachdem „Search Everything“ erneut ausgeblendet Fehler mit bbPress: „Trying to get property of non-object in /home/www/kalkofe/gr/wp-content/plugins/bbpress/bbp-includes/bbp-core-caps.php“
2012-08-26 11:01:16 „Dave’s WordPress Live Search“ hängt sich auf.
2012-08-02 03:25:40 functions.php Zeile 197 kann man nicht „quick and dirty ausblenden“ – unter anderem wird dann der

-Shortcode nicht mehr geparsed.
2012-07-22 04:08:42 Alle „Darsteller“ die „Sprecher“ sind zu „Sprecher“n machen
Alle Slugs auf Umlaute checken (und Permalauts Extended reparieren)
2012-07-22 03:00:13 Der schönste Weihnachtskalender der Welt: falsches Bild

Theme (Late Night)

2013-01-09 12:55:34 Navi ang oben: beim Mouseover verschwindet das Facebook-Logo
2012-08-28 13:28:46 Suchergebnisseite CSS
2012-08-28 13:26:10 enlever du loop les articles qui sont jéja dans featured slider
patched2012-08-06 18:28:43 Bilder des Post-Type „image“ haben unten einen ca. 5px hohen Rand, den man über ‚line-height:0‘ wegbekommt. Das funktioniert aber bis jetzt nur auf der Startseite, da ich es noch nicht geschafft habe, nur beim Bild die Line height auf 0 zu setzen. Da das Verhalten nur auf Home zum Probem darstellt, ist die Lösung, über CSS im ganzen ‚image‘-div die Zeilenhöhe zu nullen gangbar.
```
.home div.format-image{line-height:0!important}
```
Nicht gelöst 2012-08-06 17:34:31 Cache-Problem, das auf der Startseite auffällt: Im Dashboard entfernte Widgets finden auf der Startseite noch statt. Im Dashboard ausgetauschte Bilder sind im Frontend nicht ausgetauscht.
patched 2012-08-06 01:11:29 WP Featured Content Slider fand nach Migration auf endgültgen Server seine wpurl nicht mehr. Im Kopf fehlte der WordPress-Unterordner, den er auf der Testinstallation nicht hatte. Neuinstallation half nichts, der Slider funktionierte nicht mehr, nach Update übrigens auch nicht auf der Testinstallation. In Zeile 25 von featured-content-slider.php habe ich dann das fehlende „/gr/“ Präfix hardgecodet, dadurch stimmt der cycle-Pfad im Kopf und das Plugin läuft. Außerdem mußte ich die ID #featured_slider im CSS auf overflow:hidden ergänzen, da ohne dieses der Slideeffekt überbordete.
patched 2012-07-30 05:10:52 Search Everything Zeile 818 auskommentiert – Konflikt mit Letzte-Worte-Widget
patched 2012-07-30 06:13:24 Daves WordPress Live Search js/daves-wordpress-live-search.js Zeile 161 „meta clearfix“ id=“daves-wordpress-live-search_author“ ersetzt durch „meta clearfix daves-wordpress-live-search_author“
2012-07-21 03:29:30 Sidebar bestimmt die Höhe (falls mal der Sidebar höher ist als die Seite …
patched 2012-07-18 18:48:56 Der WP-Featured Content Slider ruft nach Update ein nicht definiertes Skript auf und verursacht Fehlermeldungen im Backend. Die Nutzer im Plugin-Userforum raten zum Auskommentieren des Aufrufs. Hab ich erstmal gemacht. Funktion scheint unbeeinträchtigt.
2012-07-09 15:25:44 FUNCTIONS:PHP | get_stylesheet_directory() gibt statt des WP-Pfads den ellenlangen Pfad auf den 1&1-Server aus: gr-01.de/kalkofe/homepages/24/d10211197/htdocs/www…
~~DO NOT USE 2012-06-21 18:55:08 Admin Management Xtended zwingt den Server in die Knie, wenn man es alle Artikel anzeigen lässt.~~
~~DO NOT USE 2012-06-21 Widget Context produziert einen Fehler in Zeile 291. Deaktiviert.~~
2012-06-21 kann im rechten Sidebar-Widget nicht mit Permalauts Extended: Fatal Error in den Zeilen 66 und 28 (Notice: Undefined variable: words_in_post). Deaktiviert.
2012-06-19 Das Plugin Fancy Excerpts jagt WordPress über die Suche in den Memory-Blackout. Deaktiviert.

Changelog

AKTA 2012-08-03 02:10:50 Thewmatic Core Changes in thematic/readme
2012-08-02 04:53:37 in wp-add-post-thumbnail-support.php die Thumbgröße nach Definition im WP-Codex auf full gesetzt.
2012-08-02 04:52:31 Plugin File Gallery zur besseren Verwaltung der eingebauten Galerie gefunden und installiert.
2012-08-02 01:36:33 Attachment-Seiten auf Artikel umgeleitet durch Erstellen einer image.php im Theme-Ordner. Anleitung hier.
2012-08-02 01:35:01 Plugin Relevanssi Pro installiert, Search Everything und andere Suchplugins rausgeschmissen. Plugin eingetuned.

19. Juni 2012

preg_match à la rescousse !!!

18. Juni 2012

Looping

Screencast #91: The WordPress Loop

youtu.be/IiXPonOuo3M

Zwei Loops auf der Startseite: WordPress Custom Loops

youtu.be/kWa-u0kAzgI

Adding PHP conditionals inside The Loop

PHP – While Loops (Conditional Loops)

PHP – Nested Conditional Loops

Dann paar Links:

14. Juni 2012

Thematic Late Night

Plugins

Das Menü wird komplex und unhandlich zu administrieren. Abhilfe tut Not:

Add Descendants As Submenu Items Neue Posts werden automatisch dem Menü zugefügt: www.texto.de/erleichterung-unterseiten-automatisch…

13. Juni 2012

Gravity Forms

Datepicker: Zeitraum eingrenzen

Das Script: docs.jquery.com/UI/Datepicker#option-maxDate

Das wie: www.gravityhelp.com/documentation/page/Gform_get_i…

Und natürlich sollte man es nicht in den Header des Parent Themes knallen sondern per wp_enqueue_script in die functions.php des Child Themes: wp.tutsplus.com/tutorials/the-ins-and-outs-of-the-…

11. Juni 2012

Kalkwatch

secure.gr-01.de/www-kalkwatch.de/kalkwatch.html

Kalkwatch basiert auf der WordPress-Variante des responsiven Framework-Themes Skeleton. ES ist auf einem SSL-Server aufgesetzt, damit es als iFrame-Applikation in Facebook geladen werden kann. Sein Herzstück ist das WordPress-Formular-Plugin cForms, mit dessen CSV-Output G/R eine Excel-Datenbank füttert, die zur Auswertung an den Kunden weitergegeben wird.

Vorbereitend wurden die Domains kalkwatch.de, kalk-watch.de erworben und die Domain wir-sind-kalk.de nicht veräußert – alle drei Domains stehen als Landing-Plattformen für die Aktion zur Verfügung.

Nachdem zuerst eine Standard-Wordpress-Installation mit einem leeren Skeleton-Childtheme auf dem G/R-Server installiert wurde, ist die erste Aufgabe das inhaltliche und funktionale Design des Formulars. Danach ist ein Design zur Integration in Facebook die Website und (optional) als Standaloneversion, letztere könnte dadurch ersetzt werden, dass letztlich die Kalkwatch-Unterseite der offiziellen Homepage als Landingpage dient (dagegen spricht, dass das Kalkwatch-Modul vor der offiziellen Homepage fertig sein muss und sein wird).

Gravity Forms

Kalkwatch basiert auf Gravity Forms, das nicht nur intuitiv bedienbar sondern auch gut dokumentiert ist. Außerdem funktioniert es in heikelen Umgebungen zur Not auch mit Captchas. Warum nicht auf cForms, wie so viele andere Formulare? Nu, das steht hier ganz gut beschrieben:

techgeni.us/wordpress/cforms-vs-gravity-forms-for-…

Das dank GPL-Lizenz kostenlose Formmailer-Plugin cForms ist für komplexe Formularaufgaben in WordPress als out-of-the-box-Produkt im Prinzip konkurrenzlos. Der Systemtechniker Sven Wappler bietet auch eine deutsche Sprachdatei, die aktiviert wird, indem man sie einfach per FTP im Plugin-Ordner von WordPress ablegt. Die Übersetzung ist nicht vollständig aber brauchbar. Auch Custom-CSS ist möglich, wenn das nur spärlich dokumentiert ist (Kieran Barnes erklärt hier, wie’s geht). Letztlich aber besteht cForms nicht in SSL-Umgebungen und ist daher nicht geeignet, wenn eine Seite in iFrames als Facebook-App funktionieren muss.

6. Juni 2012

Game Show Writing

www.scribd.com/exploremedia/d/2364045-How-to-write…

www.tvwritersvault.com/creating/creatingGameshows….

5. Juni 2012

Konfiguration von Dokuwiki am Beispiel von Red Arrow „The Taste“

Eins nach dem anderen

Neuste Stable Version des Dokuwiki hier runterladen, entpacken.
Paket hochladen
Aufrufen der Installation www.webseite.de/dokuwikiordner/install.php über den Browser, ausfüllen und Installationsbefehl geben. Das sollte glatt durchlaufen. Danach install.php vom Server löschen.
tpl»vector»vector_sitenotice – Haken weg.

Wo liegt was

Dokuwiki braucht keine Datenbank; stattdessen wandert jeder Artikel in eine TXT-Datei (in der Regel ist der Titel der Dateiname) und jedes Kapitel in einen Ordner, jedes Unterkapitel in einen Unterordner usw. Wie man diese Struktur anlegt, wird später beschrieben – man kann es im Wiki selbst durch die Art, wie man Artikel anlegt steuern, man kann es direkt auf dem Server mittels FTP-Zugang machen. Die Artikel liegen jedenfalls auf dem Server im Ordner

wiki\data\pages\

Während man munter Artikel in die Unterordner von „pages“ schreibt legt Dokuwiki automatisch an anderer Stelle Ordner für Mediendaten (PDFs, Filmchen, Fotos) an. Der Pfad lautet sinnvollerweise:

wiki\data\media\

Je nach Tagesform des Servers respektive Größe der jeweiligen Datei bietet es sich an, die Dateien über ein FTP-Programm direkt auf den Server zu laden und sie dann über das Wiki anzusprechen. Wenn man immer schön die Ordnerhierarchie einhält, sollte das prima klappen. Details folgen.

Snippets

Einen bestehenden Artikel in einen anderen Artikel einfügen (Achtung, benötigt Include-Plugin):

{{page>:format_description}}

Plugins

Der Flowplayer gibt die Filmchen wieder. www.dokuwiki.org/plugin:flowplayer

Include wird vom obigen Snippet zum Einfügen eines Artikels in einen anderen getriggert. Indem man alle Artikel des Wiki in einen Artikel lädt schafft man die Voraussetzung für die Erstellung einer PDF des gesamten Wikis. dokuwiki.org/plugin:include

CSS-Anpassung

Die Benutzer-CSS liegt im Wikiordner (FTP) in

wiki\conf\userstyle.css

Während der CSS-Anpassung muss der renitente Dokuwiki-Cache abgestellt werden. Dazu geht man ins Wiki-Dashboard, indem man sich wie folgt vorklickt (rechts oben neben dem Login geht’s los):

Admin\Konfiguration\Bearbeitungs-Konfiguration

Dort stellt man unter „cachetime“ die Eigenschaft „Maximale Cachespeicherung (Sekunden)“ auf „-1“, das deaktiviert den Cache komplett. Ich hab die Einstellung bisher so gelassen, da die Produktionswikis sehr klein und überschaubar bleiben und Änderungen dagegen sofort sichtbar sein sollen. In der userstyle.css muss man seine Wünsche sehr ausdrücklich äußern, oft bleibt einem keine andere Wahl, als dem Wert der Deklarationseigenschaft das imperative !important mit auf den Weg zu geben.

5. Juni 2012

Looping

www.themelab.com/2008/04/04/the-ultimate-guide-to-…

perishablepress.com/easily-adaptable-wordpress-loo…

justintadlock.com/archives/2009/01/23/coding-the-w…

www.dirkpfuhl.de/1343-wordpress-custom-loop-ausgab…

www.elmastudio.de/wordpress/wordpress-tipps-der-lo…

digwp.com/2011/05/loops/

www.catswhocode.com/blog/multiple-wordpress-loops

Category description with multiple categories and get_the_category()

28. Mai 2012

Source Cop – and Source Cop Decrypter

22. Mai 2012

Grindhouse Design

15. Mai 2012

Design Advanto

14. Mai 2012

SONY TV-8 301 – Bildsammlung für kalkofe.de

14. Mai 2012

Self Hosted Responsive Video

github.com/johnpolacek/SimpleVid

johnpolacek.com/

github.com/johnpolacek/

8. Mai 2012

Tourplan Ingo

www.thekillersmusic.com/html5-tour-archive

8. Mai 2012

Reguläre Ausdrücke von der Pieke auf

regexp-evaluator.de/tutorial/php-funktionen/preg-r…
Der hier scheint ganz großartig: www.danielfett.de/internet-und-opensource,artikel,…
www.schattenbaum.net/php/ereg.php
www.topsoft.at/pstrainer/pstrainer.php

17. April 2012

ThePath Tabbed Widget

Plugin URI: www.thepathwebdesign.com/articles/thepath-tabbed-w…
Description: Plugin for displaying Recent Posts, Popular Posts and Featured Posts. This plugin is great if you have limited space in your sidebar (or widget area). Requires WordPress.com Popular Posts and Yet Another Featured Posts Plugin to display the Popular and Featured posts respectively.
Author: ThePath
Version: 1.2.1
Author URI: www.thepathwebdesign.com

Die Namen der Reiter des Plugins ändert man in den Zeilen 26-283 der Plugin-Datei thepath-tabbed-widget.php.

Die Zahl der im ersten Reiten maximal angezeigten „Recent Posts“ stellt man in Zeile 33 der Plugin-Datei thepath-tabbed-widget.php ein.

„Featured“, der dritte Reiter, wird „gefüttert“ vom Output des Plugins YAFPP (Yet Another Featured Posts Plugin). Dieses Plugin hat angenehmerweise von Haus aus eine umfassende Konfigurationsseite, zu finden im „Einstellungen“-Menü.

17. April 2012

ImageMapster

Das brauche ich als Plugin für Kalkofes Shop.

16. April 2012

The Ins and Outs of The Enqueue Script For WordPress Themes and Plugins

12. April 2012

Aufhübschung von Referenzenseiten mit Javascript-Galerie und Tooltipp-Bildvorschau

Referenzenlisten können ziemlich dröge sein. Oft bleibt es bei einer Liste von Namen, weil man keinen Patchworkteppich von Bildern abliefern will. Was aber, wenn man einfach einen Haufen extem toller Bilder auf Lager hat?

Warum nicht dezente Kameraicons hinter die Referenzen setzen, die bei Mouseover durch ein Vorschaubild-Tooltip zum Aufklicken eines kleinen Galerierundgangs einladen! Das Tooltip-Skript wie der Niederländer Yann Lorber es für ein Projekt einsetzte in Kombination mit Fancybox 1.3.4 do the trick.

Vorsicht, beide Skripte sind schon etwas „betagt“ und zumindest das Tooltip-Skript hat eine Eigenheit: es mag nur mit jQuery 1.3.4 zusammenarbeiten, bei höheren Versionen versagt es den Gehorsam. Außerdem möchte es erst als letztes vor dem Schließen des Bodytags aufgerufen werden, seine CSS aber noch im Head, in jedem Fall VOR dem Skript bekommen. Außerdem können die einfachen Anführungsstriche des Originalskripts problematisch sein. Wenn das Skript so gar nicht funktioniert hat es geholfen, sie durch

\"

zu ersetzen.

Der Reihe nach

Das hier kommt in den HEAD:

	<script src="jquery.easing.js" type="text/javascript"></script>
	<script src="jquery-1.3.2.js" type="text/javascript"></script>
	<link href="tooltips.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="jquery.mousewheel-3.0.4.pack.js"></script>
    <link rel="stylesheet" href="jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
	<script type="text/javascript"> $(document).ready(function() {
		$(".fancybox").fancybox();
		});
	</script>

Das als letztes vor dem Schließen des BODY

<script src="tooltip.js" type="text/javascript"></script>

Das hier ist die Tooltipp-CSS, ich nenne sie tooltips.css:

#screenshot,
#screenshotBox {
height : 202px!important;
width : 202px!important;
top:1px;
left:1px;
}
#screenshot {
color : #ffffff!important;
/*display : none!important;*/
position : absolute!important;
z-index:9900!important;
}
#screenshotBox {
background : #fff none repeat scroll 0 0;
position: relative;
z-index:9900!important;
}
#screenshotBox img {
z-index : 9999!important;
position: absolute;
top:1px;
left:1px;
}
.triangle {
border-color : #fff transparent transparent;
border-style : solid;
border-width : 5px 5px 0;
height : 0;
margin-left : 125px;
width : 0;
z-index:9900!important;
}

Das ist das Tooltipp-Skript tooltip.js:

		/* *******************************************
		*
		*	Tooltipp
		*	Source: Fat-Man Collective - www.fat-man-collective.com
		*	Coded by Yann Lorber - www.yannlorber.fr
		*	August 2009
		*
		******************************************* */	

		if( $("a.screenshot").length )
		{
			xOffset = 175;
			yOffset = -127;

			$("a.screenshot").hover(function(e){

				var imgurl = $(this).attr("id");

				$("body").append("<div id=\"screenshot\"><div id=\"screenshotBox\"><img src=\"http://path-to-your-images-folder/"+ imgurl +"\"  /></div><div class=\"triangle\"></div>"+"</div>");
				$("#screenshot").css("top",(e.pageY - xOffset) + "px")
								.css("left",(e.pageX + yOffset) + "px")
								.fadeIn("fast");
				},function(){	

				$("#screenshot").remove();
    		});	

			$("a.screenshot").mousemove(function(e){

				$("#screenshot").css("top",(e.pageY - xOffset) + "px")
								.css("left",(e.pageX + yOffset) + "px");
			});
		}

Im HTML-Kontext sieht die Anwendung dann so aus (Beispiel):

<ul>  <li>?	Penthouse am Park BBB (3)
  	<a class="screenshot fancybox" rel="rundgang" title="Penthouse am Park" id="ref_penthouse-park_01_th.jpg" href="web-img/ref_penthouse-park_01.jpg"><div class="photo"></div></a>
	<a class="screenshot fancybox" rel="rundgang" title="Penthouse am Park" id="ref_penthouse-park_02_th.jpg" href="web-img/ref_penthouse-park_02.jpg"><div class="photo"></div></a>
	<a class="screenshot fancybox" rel="rundgang" title="Penthouse am Park" id="ref_penthouse-park_03_th.jpg" href="web-img/ref_penthouse-park_03.jpg"><div class="photo"></div></a></li>
</ul>

Die Class „screenshot“ sagt hallo zum Tooltipp-Script, das sich aus der „id“ das im Tooltipp anzuzeigende Bild holt. Die Klasse „fancybox“ ruft die Fancybox ins Standby, die das Bild beim Klick aufs Kameraicon öffnet. Aus dem „title“ holt sich Fancybox die Bildunterschrift. Das Attribut „rel“ sagt Fancybox, dass es sich um ein Bild einer Reihe handelt, die später in der Fancybox auch der Reihe nach, also ohne das Bild wieder schließen und das nächste öffnen zu müssen, angeschaut werden können. Mit mehreren „rel“-Namen können auch innerhalb ein– und derselben HTML-Seite mehrere Reihen erstellt werden, ohne „rel“-Attribut bleibt das entsprechende Bild ein Solitär. Ah ja, für das lustige Kamera-Icon, dessen mouseovern den Tootipp-Effekt abfeuert habe ich in CSS so geschrieben:

ul li .photo {
	display:inline-block;
	border:none;
	width:15px;
	height:12px;
	margin-left:7px;
	background: url(web-img/referenzen_kameraicon.png) no-repeat
}

1. April 2012