Laufband - scrollende Thumbnails

**tblumrich** · 04.08.2011, 17:22

Hallo!

Ich suche ein Laufband für Fotothumbs. Es sollen zeitgleich mehrere Thumbs zu sehen sein. Daher fallen die meisten Slider aus.

Im Prinzip möchte ich die Thumbleiste, die bei Slideshow2 erzeugt wird, aber NUR diese... OHNE die direkte Bildausgabe darüber. Beim Klick aufs Thumb soll die Großansicht in einer Lightbox aufgehen. Wichtig ist ausserdem die Funktionalität der Thumbleiste, dass die Bilder je weiter man nach Links oder Rechts kommt durchscrollt.

SlideitMoo kommt dem sehr nahe, nur das dort die Buttons links und rechts daneben sind (die sollen quasi unsichtbar ein Stück AUF dem rechten und linken Thumb sitzen) und das Scrollen sollte dann auf Mouseover funktionieren, nicht auf click.

Hat jemand eine Idee ob... und wenn ja, wie man das realisieren könnte?

Ich hab auch schon mit Imageflow geliebäugelt, wäre auch eine Möglichkeit - nur funktioniert das Ding nicht mit Tabcontrol... was auch nötig ist - warum eigentlich nicht?

Danke schonmal...

Gruß
Thomas

***xchs*** · 09.08.2011, 15:31

Hallo tblumrich,

die ScrollGallery hätte auch so ein Thumbnail-Band (ähnlich wie bei der SlideShow2). Man müsste allerdings auch hier die Großansicht entsprechend ausblenden und das OnClick-Event in einem Lightbox-Overlay ausgeben.

Die ImageScrOOler Klasse kann auch so was ähnliches. Vielleicht liesen sich die Optionen des Skripts so anpassen, damit das von Dir gewünschte Verhalten beim MouseOver auch tatsächlich umgesetzt wird.

EDIT:
Noch was gefunden: JavaScript Web Scroller

**tblumrich** · 09.08.2011, 19:28

Hi.

Danke für die Links... den ImageScrOOler kannte ich schon, die anderen nicht.
Mal gucken ob ich damit was anfangen kann.

Dummerweise soll das auch gut pflegbar sein für die Kunden (also Images im Backend austauschen etc...), daher brauch ich das als Erweiterung und da hörts bei mir leider schon auf.

Gruß
Thomas

**magicsepp** · 10.08.2011, 09:36

mit Sliteitmoo kann mann sowas auch machen
http://www.contao.org/erweiterungsli....10004.de.html

Demo1
http://www.php-help.ro/examples/slideitmoo_1.1/

**felix123** · 10.08.2011, 10:10

Ich habe so was mal mit der Scroller Class und dem Catalog gelöst. Der User kann im Backend neue Filme (in deinem Fall Bilder) anlegen und sie werden entsprechend im FE als Laufband ausgegeben.

Das Ergebnis hier
http://christianhuck.com/index.php/reel/items/7.html

Die Scroller Class findest Du hier:
http://demos111.mootools.net/Scroller

Evtl. ist das ja das was du suchst. Musste allerdings die Scroller Class noch "nachrüsten" da Contao das scheinbar nicht von haus aus an Bord hat...

Noch ein Nachtrag: das ist nicht iPAD kompatibel!

LG

Felix

**andreasisaak** · 10.08.2011, 10:45

Zitat von magicsepp

mit Sliteitmoo kann mann sowas auch machen
http://www.contao.org/erweiterungsli....10004.de.html

Demo1
http://www.php-help.ro/examples/slideitmoo_1.1/

Nein leider nicht ganz. Es ist ein Laufband ohne Pause gewünscht, das kann slideItMoo nicht.

**magicsepp** · 10.08.2011, 11:10

Zitat von jared

Nein leider nicht ganz. Es ist ein Laufband ohne Pause gewünscht, das kann slideItMoo nicht.

Was für ein Pause? Im horizontalen Carusel wird ein Thumbnail nach dem anderen durch geschoben, die Art läßt sich mit transition.Fx.Transitions.linear z. B. beeinflussen (hatte ich das nicht feature request eingetragen?)

LG

das Thema hatten wir doch beim slideitmoo bereits....

**andreasisaak** · 10.08.2011, 11:24

Nein hatten wir nicht. Und ich mag auch nicht mehr diskutieren.

Viel spaß noch.

**tblumrich** · 10.08.2011, 15:11

...oh, hier ist ja nochmal Bewegung rein gekommen.

Naja, vielleicht liegt das an mir... ich hab quasi zwei Sachen zeitgleich gesucht. Deswegen gibt ja auch noch eine Frage direkt im SlideItMoo Thread. Sorry für die Verwirrung.
Einmal ein Laufband das Endlos durchläuft - ohne anzuhalten - hier war auch nicht unbedingt eine Navigation von Nöten, aber schön wäre natürlich an Anhalten beim Drüberfahren (eben genau wie die Demo hier) - da dachte ich, könnte man SlideItMoo auf pausenlos trimmen - geht nicht, wie jared das sagt. Das war eine Anfrage im anderen Thread.
Meiner Meinung nach gibts ein Laufband (Ticker mit Bildern!) wie in der o.g. Demo für Contao nicht. das wäre nochmal eine Aufgabe, sowas für Contao zu haben...
Ich hab hier jetzt SlideItMoo dafür genommen mit Autoplay und kleiner Pause.

Hier hab ich schon was manuelles gesucht, aber eben mit einer Mouseoverfunktionalität als Navigation links/rechts.
Die Variante von Felix ist gut, aber im Prinzip ja das was die Slideshow2 per se schon macht. Ich wollte nur den Scroller und die Klick -> Öffnung in einer Lightbox.

Aber insgesamt ist der iPad Einwand genau der relevante... ich habe den Kunden dann doch überzeugt. War auch nicht so schwierig, da Mac-Nutzer...

Auch hier kommt SlideItMoo zum Einsatz und zwar zusammen mit Tabcontrol als integrierte Navigation für Referenzen.

Danke trotzdem noch mal an alle.

Gruß
Thomas

**m-werk** · 29.11.2011, 08:55

Hallo, ich finde dieses Modul spitze.

Ich hab nur ein probelm damit. Meine Bilder sind zwar alle gleich hoch aber unterschiedlich breit. Wenn ich jetzt in der Starteinstellung bei der breite den größten Wert hineinschreibe, dann sind die Abstände zwischen den Bildern bei den schmalen breiter. Kann man das irgendwie lösen, so dass man bei breite eventuell 100% angeben kann bzw. dass einfach die Bildgröße herangezogen wird?

LG, m-werk

**eisenherz** · 03.10.2013, 22:09

Zitat von xchs

Die ImageScrOOler Klasse kann auch so was ähnliches. Vielleicht liesen sich die Optionen des Skripts so anpassen, damit das von Dir gewünschte Verhalten beim MouseOver auch tatsächlich umgesetzt wird.

Hallo!
Genau solch einen Scrollbalken suche ich ... leider fehlen mir mal wieder die nötigen Grundlagen, um sowas "manuell" einzubinden ... gibt es keine Erweiterung die das kann?

Tschüss
Jörg Basler

**dhe** · 07.10.2013, 20:50

Mit dem npslider kannst du das machen.
Einfach die Bildergröße auf die gewüschte Thumbnailgröße einstelllen und dann auf "Großansicht" stellen.
Im Kontrollelement dann den Tickermodus aktivieren. Je nach Breite des Sliders sind dann mehr oder weniger Thumbs zu sehen.

**Hariboo** · 12.10.2013, 00:05

Zitat von dhe

Mit dem npslider kannst du das machen.
Einfach die Bildergröße auf die gewüschte Thumbnailgröße einstelllen und dann auf "Großansicht" stellen.
Im Kontrollelement dann den Tickermodus aktivieren. Je nach Breite des Sliders sind dann mehr oder weniger Thumbs zu sehen.

Kann man mit dem Npslider auch eine slideBar mit Thumbnails am rechten Bildrand anlegen und das Hauptbild in der Mitte platzieren.

Gruß harald