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
}