Pimp Your Galerie - Tips & Tricks zur Highslide Lightbox
die Galerie ermöglicht die Anzeige der Bilder aus der Galerie in einer sogenannten Lightbox.
Dateianhang:
Galerie-Lightbox.png [ 529.01 KiB | 883-mal betrachtet ]
Lightboxen lenken die Konzentration des Betrachters auf das Bild und das ganze drumherum
wird dabei ausgeblendet.
Premium Siteboards können in den Einstellungen der Galerie unter dem Punkt "Link Konfiguration"
ihre Galerie so einstellen das eine Lightbox beim Klick auf einen dieser Links geöffnet wird.
In unserer Demogalerie ist es zum Beispiel so eingestellt, das bei einem Klick auf die
Thumbnails die Highslide Lightbox aufgeht.
Es gibt dabei 2 verschiedene Lightboxen die wir Euch zur Verfügung stellen.
Lightebox und Highslide. Für die zweite möchten wir euch noch ein paar Tipps und Tricks auf
den Weg geben.
Die Einstellungen von beiden können individuell über das Template angepasst werden.
Die Konfigurationsdatei "gallery/plugins_header.html" enthält dabei die Einstellungen.
Einige sehr spannende Einstellungen für Highslide möchten wir Euch vorstellen.
1. outlineType - Rahmen für das Bild...Ja nach dem ob man eher helle oder dunkle Bilder in seiner Galerie hat kann man den
entsprechenden Rahmen anpassen.
Highslide bietet dafür 5 Varianten zur Auswahl.
beveled -
drop-shadow -
glossy-dark -
outer-glow -
rounded-black -
rounded-white -
der notwendige Eintrag in der Template Datei ist zum Beispiel:
Code:
hs.outlineType = 'beveled';
Ihr solltet dabei den bestehen Eintrag ersetzen.
2. Höhen und Breiten LimitGroße Bildschirme sind zwar immer weiter verbreitet. Aber auch Laptops die oft kleinere
Auflösungen haben sind im Kommen. Damit die Darstellung der Galerie auch auf kleinen Bildschirmen
funktioniert kann man mit den beiden Attributen maxWidth und maxHeight ein Limit für
die Bildergröße in der Lightbox angeben.
Für unser Beispiel haben wir mal 600*400 gewählt, denn es passt super zu unserer letzten Einstellung
die wir euch vorstellen wollen, den Thumbstrip. Der Thumbstrip würde sich sonst mit einem zu großen Bild überlagern.
Für unser Beispiel nehmen wir die folgenden Werte. So passen die Bilder auch auf älteren Laptops garantiert
zusammen mit dem Thumbstrip.
Code:
hs.maxWidth = 600;
hs.maxHeight = 400;
Ein Thumbstrip bietet eine Miniansicht der anderen Bilder auf einer Seite/Album.
Dateianhang:
Galerie-Thumbstrip.png [ 108.69 KiB | 864-mal betrachtet ]
Mit der Eigenschaft Mode lässt sich einstellen ob der Thumbstrip horizontal oder vertikal verlaufen soll.
Mit der Eigenschaft Position lässt sich der Thumbstrip nach den eigenen Wünschen platzieren.
Für unser Beispiel nehmen wir mal die Einstellungen
Code:
thumbstrip: {
mode: 'horizontal',
position: 'top center',
relativeTo: 'viewport'
}
Das Attribute "relativeTo" bestimmt den Ausgangspunkt für die Positionsberechnung.
viewport - ist dabei das Browserfenster
image - das aktuell angezeigt Bild
Die Thumtrip Eigenschaft ist Teil der Slideshow Eigenschaft und muss daher auch in diesen kopiert werden.
Unserer fertige gallery/plugins_header.html mit den oben genannten Einstellungen sieht folgendermaßen aus
Code:
<!-- IF S_GP_HIGHSLIDE -->
<script type="text/javascript" src="{S_GP_HIGHSLIDE}highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="{S_GP_HIGHSLIDE}highslide.css" />
<script type="text/javascript">
// abeda2a326c66139cc431072bb4a28eb
hs.showCredits = false;
hs.graphicsDir = '{S_GP_HIGHSLIDE}graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'beveled';
hs.captionEval = 'this.thumb.alt';
// This value needs to be set to false, to solve the issue with the highly increasing view counts.
hs.continuePreloading = false;
hs.maxWidth = 600;
hs.maxHeight = 400;
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'top center',
hideOnMouseOut: true
},
thumbstrip: {
mode: 'horizontal',
position: 'top center',
relativeTo: 'viewport'
}
});
</script>
<!-- ENDIF -->
<!-- IF S_GP_LYTEBOX -->
<script type="text/javascript" src="{S_GP_LYTEBOX}lytebox.js"></script>
<link rel="stylesheet" type="text/css" href="{S_GP_LYTEBOX}lytebox.css" />
<script type="text/javascript" >
if (window.addEventListener) {
window.addEventListener("load",initLytebox,false);
} else if (window.attachEvent) {
window.attachEvent("onload",initLytebox);
} else {
window.onload = function() {initLytebox();}
}
function initLytebox() {
var imgMaxWidth = 1280;
var imgWarning = '';
myLytebox = new LyteBox(imgMaxWidth, imgWarning);
}
</script>
<!-- ENDIF -->
Einige weitere Einstellungsmöglichkeiten zu Highslide und weitere Details zu den von
uns beschriebenen Funktionen findet Ihr auch auf der Webseite
http://www.highslide.com/.
