Imageflow mit Mediabox-Großansicht

**acidburn78** · 19.12.2010, 18:39

Hallo zusammen,

ich nutze Imageflow im zusammenhang mit der Mediabox (gefällt mir besser). Nun habe ich folgende frage. Ich hätte gerne in dieser Kombination das in der Großansicht also in der Mediabox die "prev" und "next" buttons angezeigt werden entweder unter dem Bild aber noch lieber als Overlay auf dem Bild. Wie kann ich dies aktivieren?

**acidburn78** · 21.12.2010, 09:33

kann mir keiner helfen? Oder ist dies technisch einfach nicht möglich?

**andreas.schempp** · 04.01.2011, 15:49

Leider ist das nicht ganz einfach. Die Mediabox findet bei der ImageFlow die Bilder nicht in der Seite, sondern die MediaBox wird von der ImageFlow direkt per Javascript geöffnet. Damit alle Bilder vorhanden wären, müsste dem ImageFlow Script alle Bilder übergeben werden.

Ich wollte schon länger mal ImageFlow auf die neuste Version aktualisieren, habe aber leider noch keine Zeit dafür gefunden (und werde das vor Februar wohl auch nicht)...

**frank** · 04.01.2011, 16:35

Hallo Andreas,

(und werde das vor Februar wohl auch nicht)...

Februar 2011?

Ich fänd's das auch prima.

Freundliche Grüße
Frank

**andreas.schempp** · 04.01.2011, 18:15

Hehe, ab Februar hab ich voraussichtlich etwas mehr Ressourcen, Ankündigung folgt

**fabian** · 17.01.2011, 22:20

Hallo zusammen,

ich habe dafür einfach das Template "ce_imageflow.tpl" angepasst.

Folgende Änderungen/Anpassungen habe ich im "domready"-Event hinzugefügt:

Code:

		
<?php if ($this->fullsize): ?>
    var items = new Array();

    $$("div.imageflow img").each(function(el) {			
        items.push(new Array(el.getAttribute('longdesc'), el.getAttribute('alt'), ''));
    });
<?php endif; ?>

zum durchlaufen aller Bilder der ImageFlow-Gallerie. Und diese werden dann wie folgt an die Mediabox übergeben:

Code:

<?php if ($this->fullsize): ?>
    onClick: function(el) { Mediabox.open(items, el.srcElement.i); }
<?php endif; ?>

"el.srcElement.i" ist der Index des angeklickten Bildes.

Das Fertige Template befindet sich im Anhang. Da kann man sicher noch ein bischen optimieren aber für mich funktioniert es so bis jetzt ganz gut...

Die Position der Pfeile in der Mediabox sind ja dann abhängig vom CSS bzw. vom Template der Mediabox...

Viele Grüße
Fabian

**t.muench** · 18.01.2011, 16:49

Hallo,

ich war gerade auf der Suche danach gewesen und muss mich recht herzlich bei Fabian bedanken. Gute Lösung und funktioniert einwandfrei!

Viele Grüße,

Tobias

**andreas.schempp** · 18.01.2011, 16:50

Danke für die Lösung, ich werde das in der nächsten Version einbauen.

**acidburn78** · 18.01.2011, 17:24

Ja da kann ich auch nur sagen vielen Dank an Fabian! Bis die neue Version kommt werde ich das einbauen!

**fabian** · 18.01.2011, 17:46

Freut mich das ich helfen konnte!

Was evtl. für die nächste Version interessant wäre, wäre wenn die ImageFlow Gallerie im Hintergrund mit scrollen würde wenn man in der Mediabox den Vor- oder Zurück-Button anklickt.

Das habe ich aber bisher leider auch noch nicht hinbekommen...

**acidburn78** · 20.01.2011, 15:24

Ich muss hier doch nochmal was schreiben

Habe dein Template hochgeladen @Fabian leider geht dann die Mediabox gar nicht mehr auf....

Irgentetwas scheint bei mir nicht so richtig zu funktionieren, habe auch das problem das, wenn ich das LoginModul in die Mediabox einbinde das sich nach erfolgreicher anmeldung die Mediabox nicht schließt.

Fehlt mir eine Einbindung von einem Script oder so??

seite: http://mwagener.de/lclcont/

Noch als ergänzung Dateirecht auf das Template ist 740

**fabian** · 20.01.2011, 16:53

Zitat von acidburn78

Ich muss hier doch nochmal was schreiben

Habe dein Template hochgeladen @Fabian leider geht dann die Mediabox gar nicht mehr auf....

Irgentetwas scheint bei mir nicht so richtig zu funktionieren, habe auch das problem das, wenn ich das LoginModul in die Mediabox einbinde das sich nach erfolgreicher anmeldung die Mediabox nicht schließt.

Fehlt mir eine Einbindung von einem Script oder so??

seite: http://mwagener.de/lclcont/

Noch als ergänzung Dateirecht auf das Template ist 740

Ich kann das Problem irgendwie nicht nachvollziehen, wenn ich z.B. http://mwagener.de/lclcont/index.php/Familie.html öffne, funktioniert die Galerie dort einwandfrei incl. Mediabox...

Welchen Browser benutzt du? Vielleicht liegt's daran, das müsste ich dann mal testen.

**acidburn78** · 20.01.2011, 17:28

Internetexplorer und Firefox, werde es aber heute nochmal zuhause testen eventuell liegt es ja hier an einer browsereinstellung

**fabian** · 20.01.2011, 17:53

Bei mir geht's auch nicht in Firefox... werde das nochmal testen. Ich könnte mir vorstellen das "el.srcElement.i" nicht verfügbar ist.

Sollte aber nur ein kleineres Problem sein.

**acidburn78** · 20.01.2011, 18:23

Also bei mir war es genau InternetExplorer 8 und Firefox 3.6 mit welchem Browser hat es denn bei dir funktioniert? Und es liegt definitiv nicht an den Browsereinstellngen oder ob man über nen Proxy geht. habe beide Varianten getestet

**fabian** · 20.01.2011, 18:30

Bei mir funktioniert es in Safari und in Chrome.

War da wohl etwas nachlässig beim Testen. Musste das "auf die Schnelle" erledigen... werde das aber auf jeden Fall noch korrigieren!

**fabian** · 20.01.2011, 21:24

So, habe den Fehler jetzt korrigiert. Bei mir funktioniert das Template nun in Safari, Firefox, Chrome und InternetExplorer.

Ich habe allen Bildern eine ID hinzugefügt die gleich dem Index ist, also 0, 1 ,2 ,3 etc. ... Dieser wird dann, anstatt "el.srcElement.i", per "this.getAttribute('id').toInt()" an die Mediabox übergeben.

Ich hoffe jetzt sind alle Bugs raus.

Das neue Template habe ich angehängt...

**acidburn78** · 21.01.2011, 08:04

Hammer jetzt funktioniert es wirklich tadellos

Nochmals vielen Dank Fabian

**helmut** · 28.01.2011, 12:04

Hallo Fabian und Andreas,
danke für die Erweiterung an Andreas (Slidshow Fullscreen wäre noch gut

Donate ist abgeschickt) und danke an Fabian für die Einbindung der mediabox, funktioniert!

Gruß
Helmut

PS. Habe noch in der imageflow.css (in /Plugins/imageflow) die *.png Buttons button_left.png / button_right.png / slider.png und die Slidelinie (.imageflow .scrollbar) abgedunkelt und die Bildbeschreibung (.imageflow .caption) auf top:50px unterhalb der Bilder gesetzt (besser zu lesen)