Kontakt
michael trenkler eBuisness Solutions
Humboldtstraße 1
79098 Freiburg
| info@mtcd.de | |
| Telefon | +49 761 453 89 72 |
| Mobil | +49 151 234 34 080 |
jQuery Slimbox in Weblication GRID und statische Webseiten einbinden
Die auf jQuery basierende Lösung SLIMBOX2 ist eine feine und schicke Sache. Und darüber hinaus auch sehr einfach für alle Bilder innerhalb des Contentbereichs einer (Weblication-) Seite zu integrieren.
Nachfolgende Vorgehensweise ist für die Verwendung in GRID5-Projekten optimiert, kann aber mit geringem Aufwand für jede beliebige Website umgesetzt werden.
Im ersten Schritt müssen die notwendigen Scripte und CSS-Dateien eingebunden werden. Dies passiert am geschicktesten im head-Bereich der Seite. Bitte achten Sie darauf, dass zuerst die jquery- und slimbox-Bibliotheken eingebunden werden, bevor Sie weitere JS-Dateien integrieren!
Integration der Scripte im Head-Bereich (Auszug)
<script type="text/javascript" src="/de-wGlobal/wGlobal/layout/scripts/items/jquery.js"> </script><script type="text/javascript" src="/de-wGlobal/wGlobal/layout/scripts/items/slimbox- 2.03/js/slimbox2.js"> </script><link rel="stylesheet" type="text/css" href="/de-wGlobal/wGlobal/layout/scripts/items/slimbox-2.03/css/slimbox2.css"/>
Im nächsten Schritt kopieren Sie ganz einfach den unten stehenden Javascript-Code in Ihre JS-Datei (bei Weblication-Projekten ist dies in aller Regel die design.js).
Fertig!
jQuery(document).ready(function(){
if (typeof(wEditor) == 'undefined'){
jQuery(".elementPicture img, .elementText img").each(function(index){
$(this).after('<p class="magnifier"> </p>');
$(this).css('cursor','pointer');
$(this).bind('click',function(){
var imageSrc = '';
orgPath = $(this).attr('src');
if (orgPath.indexOf('/weblication/grid/scripts/wImage.php') != -1){
parametersArray = orgPath.split('&');
for (i=0;i<parametersArray.length;i++){
if (parametersArray[i].indexOf('path') == 0){
imageSrc =
parametersArray[i].substr(parametersArray[i].indexOf('=')+1);
}
}
} else if(orgPath.indexOf('/weblication/wThumbnails/') != -1){
newPath = orgPath.replace(/\/weblication\/wThumbnails\//,'/');
newPath = newPath.replace(/\[.+\]/,'');
imageSrc = newPath;
} else {
imageSrc = $(this).attr('src');
}
jQuery.slimbox(imageSrc);
})
});
}
}) Erweiterungen
Contentbereiche erweitern
Das Script prüft, ob sich der gefundene Img-Tag innerhalb von Elementen mit der Klasse elementPicture oder elementText befindet und bietet nur dann eine Vergrößerungsfunktion an. Möchten Sie weitere/ andere Eltern-Elemente verwenden, können Sie diesen jQuery-Selector nach belieben erweitern.
Überprüfung auf wEditor
Das Script prüft ebenfalls, ob sich die aktuell aufgerufene Seite im Weblication Editor befindet und deaktiviert in diesem Fall die Vergrößerungsfunktion. Bei Projekten, in denen Weblication GRID3 zum Einsatz kommt, funktioniert diese Abfrage nicht - setzen Sie hier bitte in Ihre Standard-XSLT-Stylesheets folgenden Code:
<xsl:choose><xsl:when test="$wIsInEditor"><script type="text/javascript"> var isInEditor = true; </script></xsl:when><xsl:otherwise><script type="text/javascript"> var isInEditor = false; </script></xsl:otherwise></xsl:choose>
Diese Anweisung sollte ebenfalls innerhalb des head-Bereiches (unterhalb der Einbindung der js-Dateien) erfolgen. Nun lautet die Abfrage auf den Editor-Modus im Script entsprechend auch anders:
Anstatt:
jQuery(document).ready(function(){
if (typeof(wEditor) == 'undefined'){
...
Wird nun notiert:
jQuery(document).ready(function(){
jQuery(document).ready(function(){
if (!isInEditor){
...