Hallo,
ich habe rgsmoothgallery installiert und möchte meine thumbnails links von dem eigentlichen bild senkrecht anordnen.
Realisiert hab ich das mittels der Möglichkeit die thumbnails in einen externen div-container anzuordnen. Diesen Container hab ich mittels css eine feste höhe und breite zugewiesen. Die thumbnails werden nun auch korrekt angezeigt.
Was allerdings NICHT geht ist, dass die thumbnails automatisch mittels mouseover scrollen, wenn mehr Bilder vorhanden sind, als der Container hoch ist.
Hab ich hier grundsätzlich was falsch gemacht oder fehlt noch eine Einstellung in der Extension?
Über Hilfe wäre ich sehr, sehr dankbar.
Schöne Grüße
Jens
Hmmm... du hast das Layout der thumbs von horizontal auf vertikal geändert? Mittels CSS?
Was du mit "scrollen bei mouseover" meinst, kann ich jetzt nicht ganz nachvollziehen, aber wenn du die Ausrichtung geändert hast, geh ich davon aus, dass das JavaScript ebenfalls auf vertikal geändert werden müsste...
Kannst ja mal nen Link posten, dann is es einfach nachzuvollziehen. Greetz
Hallo Blu3ye,
hier ein Linkn zu der Gallery mit den externen thumbs:
meine Problemseite
und ich hätte gerne den Effekt wie hier bei der ersten Gallery
rgsmoothgallery
Wenn ich die thumbnails öffne und mit der maus nach rechts/links fahre soll er scrollen...die skripte müssten ja schon dabei sein....
Du meinst klicken, nicht "nach rechts/links fahren" nehm ich mal an?!
Ich empfehle dir Firefox und das Plugin "Firebug" um leichter zu sehen, was fehlt - nicht stimmt.
In der Galerie werden links "<a class="left"></a>" und das selbe für rechts verwendet, um die Bilder zu wechseln. Diese Links sind (soweit ich sehe) bei dir gar nicht vorhanden.
Tippe also auf nen Fehler im Template oder ähnliches...
Greetz
Ne, ich meine, wenn du die Thumbnails öffnest (klick auf Thumbnails) öffnet sich das thumbnail-carousel.
Fährst (!) du dann mit der Maus nach links bzw. rechts über den Thumbnails, dann läuft das carousel mit.
Siehst du den Effekt? Und genau der fehlt mit bei meiner Seite.
Entweder geht das nicht mit externen Thumbnails oder ich kann das irgendwo auf vertikales Scrollen umstellen oder oder oder 😉
Das Selbe in Grün oder so ähnlich... 😉
Der div <div class="carousel"> ist bei dir nicht drin. Vermute mal stark, dass es an den externen thumbs liegt. Schon in die Doku geschaut?
Änder das Layout mal auf horizontal oder schalt die externen thumbs aus, dann siehst ja, ob es so geht...
Hallo,
ich bin nun tiefer in den Quelltext des Skriptes eingetaucht und die Antwort ist so banal wie traurig.
Smoothgallery unterstützt das einfach nicht für externe thumbnails.
Die Lösung für mich war jetzt, dass ich das Skript modifiziert habe, so dass das scrollen jetzt auch für externe thumbnails funktioniert. Nicht sauber, funktioniert aber für mich.
Danke für deine Unterstützung
Gern geschehen.
Vielleicht kannst deine Modifikation hier noch erläutern?
Gibt bestimmt mal wieder jemanden, der das gebrauchen könnt...
Gruß
Hast Recht, muss aber nochmal betonen, dass das keine schöne Lösung ist.
Ich hab in der jd.gallery1010.js die Funktion initCarousel angepasst und zwar den else-Fall. Den Code hab ich aus dem if-Fall und das rausgekürzt was man nicht braucht.
Falls hier jmd. ne bessere Lösung hat - fände ich das super.
initCarousel: function () {
var carouselElement;
if (!this.options.useExternalCarousel)
{
var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
this.carouselContainer = new Fx.Styles(carouselContainerElement, {transition: Fx.Transitions.expoOut});
this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
title: this.options.textShowCarousel
}).setHTML(this.options.textShowCarousel).injectInside(carouselContainerElement);
this.carouselBtn.addEvent(
'click',
function () {
this.carouselContainer.clearTimer();
this.toggleCarousel();
}.bind(this)
);
this.carouselActive = false;
if (this.options.showPlay) {
this.startStopEl = new Element('a').addClass('play').addEvent(
'click',
this.startStop.bind(this)
).injectInside(carouselContainerElement);
}
carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
this.carousel = new Fx.Styles(carouselElement);
} else {
////#######################################
////ab hier neu- neu
var carouselContainerElement = new Element('div').addClass('carouselCon').injectInside(this.galleryElement);
this.carouselContainer = new Fx.Styles(carouselContainerElement, {transition: Fx.Transitions.expoOut});
this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
this.carouselContainer.set({'opacity': 1, 'top': 0});
this.toggleCarousel();
this.carouselActive = true;
this.carousel = new Fx.Styles(carouselElement);
carouselElement = this.options.carouselElement.addClass('jdExtCarousel');
}
//... Rest der Funktion