Am 21.06.2010 haben wir das Update "Highslide als fester Bestandteil im Shop" vorgestellt.
Neben der in POWERGAP fest integrierten Variante Highslide gibt es noch 2 weitere ähnliche Tools, um den Hintergrund abzudunkeln und Inhalte in Layern darüber zu legen:
1. Thickbox
2. Greybox
Alle 3 Varianten haben ihre Vor- und Nachteile, die man erst bei intensiver Nutzung rausfindet und durch intensives Googeln das richtige Tool für die die jeweilige Anforderung rausfindet.
Wir stellen Ihnen hier diese 2 Alternativen vor und haben wie auch beim Highslide schon alle nötigen JS-Dateien auf dem Shopserver abgelegt. Thickbox & Greybox sind kostenlos (GNU Lizenz) nutzbar.
Thickbox
Die Einrichtung ist recht simpel:
Bei Sonstiges > Sonstige Einstellungen > Feld Javascript_Head bitte diese Code einsetzen:
<script type="text/javascript" src="x_jquery.js"></script>
<script type="text/javascript" src="x_thickbox.js"></script>
<script type="text/javascript" src="x_thickbox.js"></script>
Achtung! Wer schon x_jquery.js oder x_jquery.min.js nutzt, der darf diese js-Datei natürlich nicht doppelt aufrufen.
Über Layout > Schriften/CSS > ROOT muss der folgende Code eingesetzt werden:
*{padding: 0; margin: 0;}
#TB_window {font: 12px Arial, Helvetica, sans-serif;color: #333333;}
#TB_secondLine {font: 10px Arial, Helvetica, sans-serif;color:#666666;}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
#TB_overlay { position: fixed;z-index:100;top: 0px;left: 0px;height:100%;width:100%;}
.TB_overlayMacFFBGHack {background: url(https://cdn.powergap.de/macFFBgHack.png) repeat;}
.TB_overlayBG {background-color:#000;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
* html #TB_overlay {position: absolute;height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');} /* ie6 hack */
#TB_window {position: fixed;background: #ffffff;z-index: 102;color:#000000;display:none;border: 4px solid #525252;text-align:left;top:50%;left:50%;}
* html #TB_window {position: absolute;margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');} /* ie6 hack */
#TB_window img#TB_Image {display:block;margin: 15px 0 0 15px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;border-top: 1px solid #666;border-left: 1px solid #666;}
#TB_caption{height:25px;padding:7px 30px 10px 25px;float:left;}
#TB_closeWindow{height:25px;padding:11px 25px 10px 0;float:right;}
#TB_closeAjaxWindow{padding:7px 10px 5px 0;margin-bottom:1px;text-align:right;float:right;}
#TB_ajaxWindowTitle{float:left;padding:7px 0 5px 10px;margin-bottom:1px;}
#TB_title{background-color:#e8e8e8;height:27px;}
#TB_ajaxContent{clear:both;padding:2px 15px 15px 15px;overflow:auto;text-align:left;line-height:1.4em;}
#TB_ajaxContent.TB_modal{padding:15px;}
#TB_ajaxContent p{padding:5px 0px 5px 0px;}
#TB_load{position: fixed;display:none;height:13px;width:208px;z-index:103;top: 50%;left: 50%;margin: -6px 0 0 -104px;} /* -height/2 0 0 -width/2 */
* html #TB_load {position: absolute;margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');} /* ie6 hack */
#TB_HideSelect{z-index:99;position:fixed;top: 0;left: 0;background-color:#fff;border:none;filter:alpha(opacity=0);-moz-opacity: 0;opacity: 0;height:100%;width:100%;}
* html #TB_HideSelect {position: absolute;height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');} /* ie6 hack */
#TB_iframeContent{clear:both;border:none;margin-bottom:-1px;margin-top:1px;_margin-bottom:1px;}
#TB_window {font: 12px Arial, Helvetica, sans-serif;color: #333333;}
#TB_secondLine {font: 10px Arial, Helvetica, sans-serif;color:#666666;}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
#TB_overlay { position: fixed;z-index:100;top: 0px;left: 0px;height:100%;width:100%;}
.TB_overlayMacFFBGHack {background: url(https://cdn.powergap.de/macFFBgHack.png) repeat;}
.TB_overlayBG {background-color:#000;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
* html #TB_overlay {position: absolute;height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');} /* ie6 hack */
#TB_window {position: fixed;background: #ffffff;z-index: 102;color:#000000;display:none;border: 4px solid #525252;text-align:left;top:50%;left:50%;}
* html #TB_window {position: absolute;margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');} /* ie6 hack */
#TB_window img#TB_Image {display:block;margin: 15px 0 0 15px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;border-top: 1px solid #666;border-left: 1px solid #666;}
#TB_caption{height:25px;padding:7px 30px 10px 25px;float:left;}
#TB_closeWindow{height:25px;padding:11px 25px 10px 0;float:right;}
#TB_closeAjaxWindow{padding:7px 10px 5px 0;margin-bottom:1px;text-align:right;float:right;}
#TB_ajaxWindowTitle{float:left;padding:7px 0 5px 10px;margin-bottom:1px;}
#TB_title{background-color:#e8e8e8;height:27px;}
#TB_ajaxContent{clear:both;padding:2px 15px 15px 15px;overflow:auto;text-align:left;line-height:1.4em;}
#TB_ajaxContent.TB_modal{padding:15px;}
#TB_ajaxContent p{padding:5px 0px 5px 0px;}
#TB_load{position: fixed;display:none;height:13px;width:208px;z-index:103;top: 50%;left: 50%;margin: -6px 0 0 -104px;} /* -height/2 0 0 -width/2 */
* html #TB_load {position: absolute;margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');} /* ie6 hack */
#TB_HideSelect{z-index:99;position:fixed;top: 0;left: 0;background-color:#fff;border:none;filter:alpha(opacity=0);-moz-opacity: 0;opacity: 0;height:100%;width:100%;}
* html #TB_HideSelect {position: absolute;height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');} /* ie6 hack */
#TB_iframeContent{clear:both;border:none;margin-bottom:-1px;margin-top:1px;_margin-bottom:1px;}
Wer mag kann sich hier im CSS noch austoben. Aber im Grunde ist die ausgelieferte Einstellung schon recht ordentlich und direkt produktiv nutzbar.
Ein Live-Beispiel sieht man z.B. auf www.hut.de/Cashmere-Herrenschal-by-Passigatti.html, wenn man dort auf "Zoomansicht" oder eines der kleinen Vorschau-Thumbs unter dem Artikelbild klickt.
Viele Beispiele und die komplette Doku für die Anwendung findet man auf http://jquery.com/demo/thickbox! Hier ein kleines Beispiel:
<a href="img/mein_bild.jpg" title="leer lassen, oder hier einen Titel, der im Layer angezeigt werden soll pflegen" class="thickbox"><img src="img/mein_bild.jpg" alt="Single Image"/></a>
Die Zuweisung der Klasse "thickbox" in einem A-Tag ist schon alles was man braucht. Dann bedarf es nur noch jedem <img> ein alt-Tag zuzuweisen, was eine Art Gruppierung darstellt.
Gallerys, HTML-Content, IFrames und AJAX-Content lassen sich so recht einfach mit der Thickbox realisieren.
Greybox
Die Einrichtung ist auch hier recht einfach:
Bei Sonstiges > Sonstige Einstellungen > Feld Javascript_Head bitte diese Code einsetzen:
<script type="text/javascript" src="x_jquery.js"></script>
<script type="text/javascript" src="x_greybox.js"></script>
<script type="text/javascript">
var GB_ANIMATION = true;
$(document).ready(function(){
$("a.greybox").click(function(){
var t = this.title || $(this).text() || this.href;
GB_show(t,this.href,520,670);
return false;
});
});
</script>
<script type="text/javascript" src="x_greybox.js"></script>
<script type="text/javascript">
var GB_ANIMATION = true;
$(document).ready(function(){
$("a.greybox").click(function(){
var t = this.title || $(this).text() || this.href;
GB_show(t,this.href,520,670);
return false;
});
});
</script>
Achtung! Wer schon x_jquery.js oder x_jquery.min.js nutzt, der darf diese js-Datei natürlich nicht doppelt aufrufen.
Über Layout > Schriften/CSS > ROOT muss der folgende Code eingesetzt werden:
#GB_overlay {background-image: url(https://cdn.powergap.de/v_gr_overlay.png);position: absolute;margin: auto;top: 0;left: 0;z-index: 100;width: 100%;height: 100%;}
* html #GB_overlay {background-color: #000;background-color: transparent;background-image: url(https://cdn.powergap.de/v_gr_blank.gif);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/v_gr_overlay.png", sizingMethod="scale");}
#GB_window {top: 10px;left: 0px;position: absolute;background: #fff;border: 5px solid #aaa;overflow: auto;width: 400px;height: auto;z-index: 150;}
#GB_frame {border: 0;overflow: auto;width: 100%;height: auto;}
#GB_caption {font: 12px bold helvetica, verdana, sans-serif;color: #fff;background: #888;padding: 2px 0 2px 5px;margin: 0;text-align: left;}
#GB_window img {position: absolute;top: 2px;right: 5px;cursor: pointer;cursor: hand;}
* html #GB_overlay {background-color: #000;background-color: transparent;background-image: url(https://cdn.powergap.de/v_gr_blank.gif);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/v_gr_overlay.png", sizingMethod="scale");}
#GB_window {top: 10px;left: 0px;position: absolute;background: #fff;border: 5px solid #aaa;overflow: auto;width: 400px;height: auto;z-index: 150;}
#GB_frame {border: 0;overflow: auto;width: 100%;height: auto;}
#GB_caption {font: 12px bold helvetica, verdana, sans-serif;color: #fff;background: #888;padding: 2px 0 2px 5px;margin: 0;text-align: left;}
#GB_window img {position: absolute;top: 2px;right: 5px;cursor: pointer;cursor: hand;}
Beispiel Code:
<a href="img/mein_bild.jpg" class="greybox"><img src="img/mein_bild.jpg"/></a>
Die Zuweisung der Klasse "greybox" in einem A-Tag ist alles was benötigt wird.
Was bei der Greybox im Gegensatz zu Thickbox nicht funktioniert sind Titel als Überschriften für das Layer mitgeben. Dafür ist es in der Ladezeit aber deutlich schneller.