SmoothGallery: externe Thumbnails über Div

Hallo zusammen,
ich bin absolut begeistert von der SmoothGallery, habe allerdings ein kleines Problem mit den externen Thumbnails. Ziel ist es, dass unterhalb der Galerie eine Art "scrollendes Karussell" aus Thumbnails, wie sonst oben in der Galerie zu sehen ist, wenn man auf "Thumbnails" klickt, eingebunden werden kann.

Daher habe ich bereits die Möglichkeit der externen Thumbnail-Ausgabe getestet (wie auf der Webseite von Georg Ringer beschrieben), aber leider werden die Thumbnails nicht im Div-Tag "ext-thumbnails", sondern darüber eingefügt. Egal ob ich den Div-Tag als HTML-Element im BE anlege oder ob er bereits im Template existiert, ich erhalte das gleiche Ergebnis. So gesehen ist da Platzierung nicht schlimm, die Thumbnails werden schließlich angezeigt und beim anklicken erscheint auch das entsprechende Bild in der Galerie, das große Problem an der Sache ist aber, dass die Formatierung des Divs mit CSS sinnlos ist, weil die Bilder nich im Div-Tag erscheinen.

Auszug aus dem HTML-Quelltext der Seite:

<!--  Plugin inserted: [begin] --> <div class="tx-rgsmoothgallery-pi1 rgsgnest42"> <script type="text/javascript">
                function startGallery42() {
                  if(window.gallery42)
                    {
                    try
                      {
                        var myGallery42 = new gallery($('myGallery42'), {
                            timed:false,
                              showArrows: true,
                  showCarousel: true,
                  textShowCarousel: 'Thumbnails',
                  embedLinks:true,
                  useExternalCarousel:true,carouselElement:$("ext-thumbnails"),
                            lightbox:true
                        });
                        var mylightbox = new LightboxSmoothgallery();
                        }catch(error){
                        window.setTimeout("startGallery42();",2500);
                        }
                      }else{
                      window.gallery42=true;
                      if(this.ie)
                        {
                        window.setTimeout("startGallery42();",3000);
                        }else{
                        window.setTimeout("startGallery42();",100);
                        }
                      }
                }
                window.onDomReady(startGallery42);
            </script><noscript> <div class="rgsgcontent"><div class="myGallery-NoScript" id="myGallery-NoScript42"><div class="rgsg-btn" style="display:none">00</div><img src="typo3temp/pics/271ec13c01.jpg" class="full" alt="" /></div></div> </noscript><div class="rgsgcontent"><div class="myGallery" id="myGallery42"><div class="rgsg-btn" style="display:none">00</div> <div class="imageElement"><h3>Blaue Berge</h3><a href="typo3temp/pics/acdcde6761.jpg" title="Bild vergrößern" class="open"></a> <img src="typo3temp/pics/e6bec6ed23.jpg" class="full" alt="" /> <img src="typo3temp/pics/26c6ecdda3.jpg" class="thumbnail" alt="" /> </div> <div class="imageElement"><h3>Sonnenuntergang</h3><a href="typo3temp/pics/5e8f4aac09.jpg" title="Bild vergrößern" class="open"></a> <img src="typo3temp/pics/d6c87ff81e.jpg" class="full" alt="" /> <img src="typo3temp/pics/1045dbfb85.jpg" class="thumbnail" alt="" /> </div> <div class="imageElement"><h3>Wasserlilien</h3><a href="typo3temp/pics/ad7c77563a.jpg" title="Bild vergrößern" class="open"></a> <img src="typo3temp/pics/6a99b2dc4d.jpg" class="full" alt="" /> <img src="typo3temp/pics/ebebc3f12f.jpg" class="thumbnail" alt="" /> </div> <div class="imageElement"><h3>Wald</h3><a href="fileadmin/testgalerie/1160591_46082989k.jpg" title="Bild vergrößern" class="open"></a> <img src="typo3temp/pics/e8ad024dea.jpg" class="full" alt="" /> <img src="typo3temp/pics/5edf7103bc.jpg" class="thumbnail" alt="" /> </div> <div class="imageElement"><a href="fileadmin/testgalerie/1160592_16581406k.jpg" title="Bild vergrößern" class="open"></a> <img src="typo3temp/pics/271ec13c01.jpg" class="full" alt="" /> <img src="typo3temp/pics/cc04ca1c1d.jpg" class="thumbnail" alt="" /> </div> <div class="imageElement"><a href="fileadmin/testgalerie/Blaue%20Berge.jpg" title="Bild vergrößern" class="open"></a> <img src="typo3temp/pics/412b650291.jpg" class="full" alt="" /> <img src="typo3temp/pics/35510810c9.jpg" class="thumbnail" alt="" /> </div> <div class="imageElement"><a href="fileadmin/testgalerie/Sonnenuntergang.jpg" title="Bild vergrößern" class="open"></a> <img src="typo3temp/pics/6fc8cb97e1.jpg" class="full" alt="" /> <img src="typo3temp/pics/39dd2d2f55.jpg" class="thumbnail" alt="" /> </div> <div class="imageElement"><a href="fileadmin/testgalerie/Wasserlilien.jpg" title="Bild vergrößern" class="open"></a> <img src="typo3temp/pics/6f51b229f1.jpg" class="full" alt="" /> <img src="typo3temp/pics/8385e5e843.jpg" class="thumbnail" alt="" /> </div> <div class="imageElement"><a href="fileadmin/testgalerie/Winter.jpg" title="Bild vergrößern" class="open"></a> <img src="typo3temp/pics/c1a66b28a3.jpg" class="full" alt="" /> <img src="typo3temp/pics/6d6f044a5b.jpg" class="thumbnail" alt="" /> </div></div></div></div><div id="externalthumbs"></div> <!--  Plugin inserted: [end] --> <!--  CONTENT ELEMENT, uid:42/list [end] --> <!--  CONTENT ELEMENT, uid:43/html [begin] --> <a id="c43"></a> <!--  Raw HTML content: [begin] --> <div id="ext-thumbnails"></div> <!--  Raw HTML content: [end] --> <!--  CONTENT ELEMENT, uid:43/html [end] -->

Verwünderlich finde ich auch, dass innerhalb des Quellcode-Bereiches der Galerie ein leeres Div mit der ID "externalthumbs" existiert, obwohl ich in der Konfiguration eindeutig "ext-thumbnails" als ID für die externen Thumbnails festgelegt habe.

Kennt Ihr das Problem? Wie kann ich mein Ziel (horizontal "scrollbarer" Thumbnailstreifen unter der Galerie, so wie er sonst oben in der Galerie angezeigt wird) erreichen?

Ich bin für jeden Tipp dankbar...

Viele Grüße

Sascha

Ich habe eine zugegeben unschöne Lösung, aber ich hatte es eilig... 🙂

Teil 1)
Datei res/scripts/jd.gallery1010.js:

statt (bei mir Zeile 326):

carouselElement = this.options.carouselElement.addClass('jdExtCarousel');

das hier schreiben:

            var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside('preview');
            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.showCarousel();
            this.carouselActive = true;

            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);

noch eine andere if-Bedingung auskommentieren (bei mir jetzt Zeile 371ff)

//		if (!this.options.useExternalCarousel) {
			this.carouselInner.style.width = this.carouselInner.normalWidth;
//		}

Teil 2)
FlexForm-Einstellungen für die SmoothGallery
thumbOpacity:0.8,carouselAutohide:false,useExternalCarousel:true,carouselElement:$("preview"),

Teil 3)
HTML-Element (unterhalb):

<div class="jdGallery" style="height: 140px"><div class="slideElement" id="preview"  style="opacity: 1; width: 600px"></div></div>

Wie gesagt - das geht sicherlich auch schöner, aber zumindest geht es (bei mir)... 🙂
Alle Angaben wie immer ohne Gewähr!

Hallo Rob,
vielen Dank für deine ausführliche Lösung und das Posten des Codes. Ich habe es gestern getestet, deine Lösung funktioniert gut, aber leider lässt sich das Scrollen des "Filmstreifens" nicht so anpassen, wie ich gedacht hatte. Die Thumbnails werden untereinander statt nebeneinander dargestellt und sobald ich mit der Maus in die Scrollzone gerate (links und rechts) fängt der ganze Container an zu ruckeln.
An den Größenangaben liegt es anscheinend nicht. Ich habe mir daher, bevor ich jetzt noch weiter experimentieren muss, eine Galerie gesucht, die genau den Forderungen gerecht wird.

Wer also einfach eine Galerie-Extension für TYPO3 sucht, die einen scrollbaren "Filmstreifen" und darüber eine Großansicht darstellt, ist mit der "Ecodev DAM photo gallery ( eco_gal )" gut beraten. Vorteilhaft ist auch, dass die Galerie eine Albenansicht und eine normale Galerieansicht bietet und außerdem die Daten aus dem DAM bezieht.

Trotzdem nochmals ein herzliches Dankeschön an Rob an dieser stelle!

Viele Grüße

Sascha