*Web Design: SmoothGallery InfoZone AutoHide
Die freie Javascript Galerie SmoothGallery 2.1dev von Jonathan Schemoul bietet schon von Haus aus viele Optionen um das Verhalten der Gallery anzupassen. Allerdings stört mich, dass das Info-Panel am unteren Rand nicht ausschließlich bei Bedarf eingeblendet wird.
Zwar kann das Info-Panel komplett deaktiviert werden, allerdings finde ich es besser, wenn das Panel mit einem Mouse-Over-Effekt bei Bedarf eingeblendet werden kann, um weitere Informationen zum Bild zu erhalten.
Ein kleiner Hack des Javascripts fügt eine entsprechende Option zur SmoothGallery. Dazu müssen die folgenden Patches in integriert werden:
Änderungen an der Datei scripts/jd.gallery.js:
--- jd.gallery.js 2009-01-14 08:03:22.000000000 +0100
+++ jd.gallery.InfoZoneAutoHide.js 2009-02-01 20:34:55.000000000 +0100
@@ -74,6 +74,7 @@
/* InfoPane options */
slideInfoZoneOpacity: 0.7,
slideInfoZoneSlide: true,
+ slideInfoZoneAutoHide: false,
/* Carousel options */
carouselMinimizedOpacity: 0.4,
carouselMinimizedHeight: 20,
@@ -260,7 +261,7 @@
this.currentIter = 0;
this.galleryInit = 0;
this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
- if (this.options.showInfopane)
+ if ((this.options.showInfopane) && (!this.options.slideInfoZoneAutoHide))
this.showInfoSlideShow.delay(1000, this);
if (this.options.useReMooz)
this.makeReMooz.delay(1000, this);
@@ -359,9 +360,9 @@
if(this.options.preloader)
this.galleryElements[0].load();
} else {
- if (this.options.showInfopane)
+ if ((this.options.showInfopane) && (!this.options.slideInfoZoneAutoHide))
{
- if (this.options.showInfopane)
+ if ((this.options.showInfopane) && (!this.options.slideInfoZoneAutoHide))
{
this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
} else
@@ -564,6 +565,24 @@
var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
this.slideInfoZone.element.setStyle('opacity',0);
+
+ if (this.options.slideInfoZoneAutoHide) {
+ this.slideInfoZoneTrigger = new Element('div').addClass('slideInfoZoneTrigger').\n
injectInside($(this.galleryElement));
+ this.slideInfoZoneTrigger.addEvent(
+ 'mouseover',
+ function () {
+ this.slideInfoZone.cancel();
+ this.showInfoSlideShow();
+ }.bind(this)
+ );
+ this.slideInfoZoneTrigger.addEvent(
+ 'mouseout',
+ function () {
+ this.slideInfoZone.cancel();
+ this.hideInfoSlideShow();
+ }.bind(this)
+ );
+ }
},
changeInfoSlideShow: function()
{
Änderungen an der Datei css/jd.gallery.css:
--- jd.gallery.css 2009-01-14 08:03:22.000000000 +0100
+++ jd.gallery.InfoZoneAutoHide.css 2009-02-01 20:20:17.000000000 +0100
@@ -72,6 +72,19 @@
overflow: hidden;
+.slideInfoZoneTrigger
+{
+ position: absolute;
+ z-index: 11;
+ width: 100%;
+ margin: 0px;
+ left: 0;
+ bottom: 0;
+ height: 40px;
+ background: transparent;
+ overflow: hidden;
+}
+
* html .jdGallery .slideInfoZone
{
bottom: -1px;
Der Patches gelten für die Version 2.1dev der SmoothGallery und können hier heruntergeladen werden.
Ich habe den Autor der Smooth Gallery informiert und hoffe, dass die Änderungen in zukünftigen Versionen direkt berücksichtigt werden.
No Responses