G/R Whitepapers

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 „screen­shot“ sagt hallo zum Tooltipp-Script, das sich aus der „id“ das im Tool­tipp anzu­zei­gende Bild holt. Die Klasse „fan­cy­box“ ruft die Fan­cy­box ins Standby, die das Bild beim Klick aufs Kamer­ai­con öffnet. Aus dem „title“ holt sich Fan­cy­box die Bild­un­ter­schrift. Das Attri­but „rel“ sagt Fan­cy­box, dass es sich um ein Bild einer Reihe han­delt, die spä­ter in der Fan­cy­box auch der Reihe nach, also ohne das Bild wie­der schlie­ßen und das nächste öffnen zu müs­sen, ange­schaut wer­den kön­nen. Mit meh­re­ren „rel“-Namen kön­nen auch inner­halb ein– und der­sel­ben HTML-Seite meh­rere Rei­hen erstellt wer­den, ohne „rel“-Attribut bleibt das ent­spre­chende Bild ein Soli­tär. Ah ja, für das lus­tige Kamera-Icon, des­sen mou­se­overn den Tootipp-Effekt abfeu­ert 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
}