FancyZoom

[Maruk]

Hallo Stefek,

Werd es mal versuchen.
Der Anfang unterscheidet sich ja eigentlich nicht weiter zu FancyZoom.
Nur den Rest verstehe ich noch nicht so ganz.
Na, schaun wir mal....

[Maruk]

Einen schönen Dienstag-Morgen wünsche ich allen zusammen.

Euer Wunsch feuerte mich an und brachte mir eine fast schlaflose Nacht ein.
In der Anlage mein erstes Ergebnis zu FancyBox.
Zwar noch nicht so wirklich perfekt, aber bei mir funzt das schon.

Die Nutzung von FancyBox ist ebenso einfach wie mein vorangegangenes Werk FancyZoom.

1. FancyBox.zip einfach über die WB-Backend installieren.
2. Neue Seite (z.B. wysiwyg) anlegen und ihr einen Abschnitt vom Typ Code voranstellen.
In den Code-Abschnitt kommt dann:

Code:

use_fancy_box();

Wie sollte es auch anders sein..
Dann nur noch Bilder in den wysiwyg Teil und verlinken.

FERTIG!

Gruss

Friedrich

[vyni]

Auch einen guten Morgen!

Hast auch schon eine Idee, wie man die styles dafür ändert? Bzw. wie man die "Bildunterschrift" aktiviert/deaktiviert ?

Ich hab´ z.B. bei chio´s Baustelle gemerkt, dass fast alle Bilder unterschiedlich mit border-top bzw. border-left ausgerüstet sind. Ohne irgendwas herumzusuchen/wurschteln/schreiben hab´ ich keine Bildunterschrift, und keine Border im IE, links und oben im FF - das liegt vermutlich am script, welches die browser unterscheidet.

Aber gibt´s sowas wie eine "Grundeinstellung"?

Ich probier gleich mal die fancy-box aus.....

LG aus Himberg bei Wien

[Maruk]

Hi vyni,

um eine Bildunterschrift zu machen musst du einfach nur einen Titel-Text für den Link zum großen Bild vergeben.
Für die Positionierung und das Aussehen der Mini-Vorschaubilder musst du selber sorgen. Damit hat weder FancyZoom noch FancyBox was zu tun.

[erpe]

Ebenso Guten Morgen

habe die Box mal eben probiert und sie funktioniert.
Aber ich denke, man sollte sich jetzt auf eine Box einigen:
und wenn die Lizenz (wie Stefek gesagt hat) bei der Box besser bzw eindeutiger ist, dann sollte die genommen werden, da ich ansonsten keinen Unterschied zwischen den beiden erkennen kann.
Ein Hinweis noch: Ich würde den Verzeichnisnamen in den info.php klein schreiben:

Code:

$module_directory     = "fancy_box";

Gruss

erpe

[vyni]

@Maruk

von wegen Minibildern ist ja klar, ich meinte die großen.

@erpe

na dann probier ein Youtube-video aus. ein einfacher textlink auf´s video - Fancy-box zeigt´s Dir. Genauso wie das Bild.
Die Box ist Multimedia - das zoom ist beschränkt auf images.
Und der optische Unterschied ist im IE zu sehen: zoom macht keinen Schatten, der close-button ist im Bild. Die Box ist im IE und FF gleich. usw.


GANZ KLAR FANCY-BOX !!!!!

LG aus Himberg

Ach ja - Läuft wie´n VW-Käfer.

[Maruk]

Guten Morgen erpe,

das mit der kleinschreibung mache ich natürlich noch. Is ja eh alles noch nicht so ganz fertig.

Also meine Entscheidung ist gefallen. Werde mich auf jeden Fall mit FancyBox weiter beschäftigen.
Nicht nur aus Lizenz-Gründen. FancyBox ist wesentlich vielseitiger. Bildergruppen, Webseiten in der Box u.s.w.
FancyZoom kann also in die Tonne.

Dieser Post meines ersten Versuchs mit VancyBox (V 0.1) gilt nur dem Test ob es bei anderen auch problemlos funktioniert.
Die Feinarbeit für den Ausbau folgt dann noch.

Gruß

Friedrich

[erpe]

Na dann fällt die Entscheidung ja auch nicht schwer, umso besser.

Gruss

erpe

[vyni]

  auf die Idee mit title=.... beim LINK bin ich nicht gekommen 

Jetzt aber....


Super Sache, müßte vielleicht eine Admin-seite zwecks der div. Parameter her? Scheint aber alles standardmäßig zu passen.

[Maruk]

Nu mal langsam mit die jungen Pferde...
Von wegen Admin-Seite und so. Bin noch ein totaler Anfänger und froh das ich es überhaupt bis zu diesem aktuellen Ergebnis geschafft habe.

P.S.
Bin für jede Unterstützung, Tips und Mithilfe bei der Weiterentwicklung von FancyBox dankber.

[erpe]

Hallo Maruk

ich denke, bei FancyBox ist der Fehler mit den Links wieder drin.
Nimm den doch raus und poste dann die zip-Datei noch mal neu.

Danke und Gruss

erpe

[Maruk]

Hallo erpe,

im Moment ist es noch so, das alle Links in FancyBox geöffnet werden. Auch Links auf andere Seiten und so.
Wenn du das meinst, dann ist es nicht das selbe Problem wie bei FancyZoom.
Bin noch nicht ganz soweit das man wählen kann auf was FancyBox reagiren soll und auf was nicht.

Gruss

Friedrich

[erpe]

Was ich meine ist, dass manche Links wieder nicht funktionieren,
siehe http://www.websitebaker2.org/forum/index.php/topic,11159.msg66911.html#msg66911

Hast du da eine Lösung?

Gruss
erpe

[vyni]

Soweit ich das verstehe:

in der include.php gibt´s die "Konfiguration" für die FB.
Da heißt es:

Code:

$(document).ready(function() { $("p#test1 a").fancybox();
    $("p a").fancybox({ 'hideOnContentClick': false });
    $("p#test2 a").fancybox({ 'hideOnContentClick': true });
    $("p#test3 a").fancybox({ 'zoomSpeedIn': 0, 'zoomSpeedOut': 0, 'overlayShow': true }); });

Das ist die Einstellung der Demo-Seite. Deshalb funktionieren auf der Demoseite die verschiedenen Einstellungen.

Wenn man nun also statt den (nicht vorhandenen p-tags ein vorhandenes div-tag (z,B. content) an die FB übergibt, müßte, soweit ich das verstanden hab´, die FB nur innerhalb des contents "zuschlagen". Bzw. falls das mit dem p-tag richtig konfig. ist, dann eben nur innerhald dieses p-tags.

@erpe
Wie kommt es, dass Deine Flaggen verschwinden? - Ist da ein JS mitbeteiligt? - dann wird das vermutlich bleiben.
Ich versteh´ ja nicht allzuviel davon - aber theoretisch müßte das FB im header der Seite geladen und konfiguriert werden. Das wird das Hauptproblem sein. Obwohl da immernoch die Möglichkeit besteht, dass es sich mit einem anderen JS in die Haare kriegt. Weil ja auch die Rehenfolge der div. JS eine Rolle spielt.

Hallo erpe,

im Moment ist es noch so, das alle Links in FancyBox geöffnet werden. Auch Links auf andere Seiten und so.
Wenn du das meinst, dann ist es nicht das selbe Problem wie bei FancyZoom.
Bin noch nicht ganz soweit das man wählen kann auf was FancyBox reagiren soll und auf was nicht.

So ganz stimmt das bei mir nicht. Da wird zwar ein pic-link bzw. ein text-link auf ein Youtube-video in der ersten section einer Seite mit FB geladen, jedoch ein text-link auf eine andere Seite in der 2. section bleibt unverändert.
Und das wählen wo es "zuschlagen" soll müsste einfach durch id(oder ist das die class?) in der include eingetragen werden (wobei eine class wesentlich freundlicher wäre)

Vermutlich ist die Variante mit dem x-find vom Aldus die Lösung. Denn damit wird das JS dann im Header geladen, aber nur dann, wenn es benötigt wird.

Aber - Kopf hoch - der Anfang ist schon mehr als eine Hoffnung - es wird schon werden.

LG aus Himberg bei Wien.

[Maruk]

Hi an alle,

hab wieder ein bissel an FancyBox rumgebastelt und ein paar Änderungen vorgenommen.

Zur Installation der neuen Version:
Falls eine Version von FancyBox installiert ist, diese deinstallieren.
Neue Version installieren.

3 unterschiedliche Möglichkeiten FancyBox zu aktivieren:
<p id="fb_1"><a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a></p>
(Fancy Box schließen am X)

<p id="fb_2"><a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a></p>
(Fancy Box schließen am X oder auf Foto klicken)

<p id="fb_3"><a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a></p>
(Fancy Box mit abgedunkeltem Hintergrund, Box schließen am X oder auf Foto klicken)

Das "use_fancy_box();" natürlich wie gehabt .

[vyni]

Danke schön,

schau ich mir gleich an.

Ich hab´ da eine deutsche Anleitung zum konfigurieren für die FB gefunden, zwar für Netfusion (oder so), aber es erklärt es ziemlich gut. Zumindest fällt das raten was der jetzt wieder meint weg.

LG aus Himberg

[erpe]

Hallo Maruk,

also der Aufruf über die code Seite  mit

Code:

"use_fancy_box();"

funktioniert nicht.
Dafür kann man das dann über die von dir beschrieben tags aufrufen.

@vyni
Die Links haben nichts mit JS zu tun (Flaggen), sondern sind normal mit html im template gecodet.
Es erschein im Ergebnis einfach eine weisse Seite. Im Gegensatz zu dem oberen Post wird auch im Quelltext das laden eines js-files nicht angezeigt. Da muss der Hase woanders im Pfeffer liegen............. .
Zum Ausprobieren:
http://www.rvb.bplaced.net/pages/fancy.php

Die oberen 3 sind mit

Code:

"use_fancy_box();"

gemacht (funktionieren nicht)
der letzte mit

Code:

<p id="fb_3"><a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a></p>

Gruss

erpe

[vyni]

@erpe

na, da siehst aber, dass er was geändert hat. Ein einfaches use_fancy_box genügt jetzt nimmer, um links mit FB aufzumachen. - Aber es ladet die scripts, bzw. die include. Ohne dem würden die scripts nicht geladen werden


.....bleibt immer noch das Problem, dass es nicht im header geladen wird - was aber eigentlich wurscht ist, solange es funktioniert. - Nur die id-Zuweisung zum p-tag muss manuell erfolgen, darauf darf man ned vergessen.
....und natürlich die diversen id´s in der include.php vorher definieren.

Eine ganz blöde Frage: Der FCK und auch alle anderen Editoren schließen bei jedem Absatz das p-tag und machen ein neues. Bei jedem Bild kommt ein p vorher, wenn man es nicht explizit entfernt - kann man ein p-tag ähnlich wie ein div verschachteln? So ein alles umspannendes <p id="fb_1">...<p>....</p>...</p> ?

@Maruk

.....siehst jetzt, warum ich von einer Admin-Seite geredet hab´? Die include.php muss jedesmal wenn man einen neuen Link machen will (mit anderen Einstellungen, Effekten) umgeschrieben werden. - Auch die css-Datei muss man anpassen können, sonst hben alle Links die selbe Größe und so - ein video so gross wie das Bild - na ja, eine Webseite auch nicht größer wie das video und so weiter.
Ich versteh schon, dass Du gerade damit anfangst, ich red´ ja nur davon. Selber könnt´ ich´s gar ned.

LG aus Hinberg

[Maruk]

@erpe

Ich weiß nicht ob du richtig verstanden hast was ich gemeint habe.
Nur das Einbinden von "use_fancy_box();" allein reicht nicht. Es ist nur dazu da um die Scripte und css global auf der aktuellen Seite zu laden.
Zusätzlich muß noch FancyBox beim Bildaufruf im Tag aktiviert werden.
z.B.
<p id="fb_1"><a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a></p>
Das dient dazu, das du frei entscheiden kannst ob ein link auf der Seite über FancyBox ausgeführt werden soll oder nicht.

[ruebenwurzel]

Hallo,

nur so am Rande, um javascripts im header zu laden muss im modul lediglich eine frontend.js (mit dem javascript drin) vorhanden sein und im template in der head section folgende Zeilen:

Code:

<?php
// this allows to include the optional module files (frontend.css, frontend.js) into the head section
if(function_exists('register_frontend_modfiles')) {
  register_frontend_modfiles('css');
  register_frontend_modfiles('js');
} ?>

Matthias

[vyni]

@ruebenwurzel
Wenn ich das richtig verstehe:
per function use_fancy_module wird das "Modul" aktiviert.
Ein frontend.js schreiben, welches die restlichen benötigten JS der Reihe nach aufruft, anstatt es in der include.php aufzurufen ?

mfg

[ruebenwurzel]

Hallo,

hab dein MOdul nicht angeschaut (chronischer Zeitmangel) aber wenn du von include redest, dann hast du das sicher als modul vom typ "snippet" angelegt und nicht als "page". Wenn dein Modul ein "page" modul ist, alles an javascript einfach in die frontend.js reinhauen. Den restlichen code in die view.php. Das was im WB backend zu sehen sein soll in die modify.php. (so ganz grob).

Schau dir mal das Hello World Modul von unserer addons Seite an. Das ist extra für Modulentwickler geschrieben worden.

Matthias

[Nigel]

Hallo Maruk,

bin über AMASP auf dein Modul gestolpert, finde es recht interessant. Allerdings ist es Anfängern wie mir immer recht schwierig einem Threadverlauf wie diesem zu folgen, gerade auch weil es hier ursprünglich ja um zwei Module zu gehen scheint. Vielleicht kannst du ja irgendwo nochmal zusammenfassend schritt für schritt erklären, was man tun muss um dieses snippet zu nutzen (an einem Beispiel?).

[mr-fan]

wäre auch an einer Zusammenfassung interessiert....

habe zur zeit viele themen am lesen und versuche einige interesannte dinge evtl mal zu ein paar experimenten zu kombinieren...

ich finde die fancybox sehr sehr praktisch

mfg martin

[Maruk]

Guten Morgen zusammen.

Habe den Code von FancyBox nochmal etwas überarbeitet, damit auch Leute die nicht so gerne zu Fuß in HTML rumwurschteln zurecht kommen.
Wie sich FancyBox verhalten soll geschieht jetzt über den <a>tag nicht mehr über <p>.

Auf Wunsch hier nochmal eine Zusammenfassung für den Einsatz von FancyBox.

Falls eine Version von FancyBox installiert ist, diese deinstallieren.
Neue Version installieren.

Eine neue Seite anlegen (z.B. wysiwyg) und dieser Seite einen Abschnitt vom Typ "Code" voranstellen.
In den Abschnitt "Code" kommt dann "use_fancy_box();"
In den wysiwyg Teil ein Bild einfügen.
Dieses Bild mit dem Ziel das in der FancyBox dargestellt werden soll verlinken.
Als ID dieses Links fb_1, fb_2 oder fb_3 eintragen. (siehe Beispiel-Quelltext)

FERTIG!

<a id="fb_1" href="image_big.jpg" title="Titel unter dem Bild"><img src="image_small.jpg" alt=""/></a>
(Fancy Box schließen am X)

<a id="fb_2" href="image_big.jpg" title="Titel unter dem Bild"><img src="image_small.jpg" alt=""/></a>
(Fancy Box schließen am X oder auf Foto klicken)

<a id="fb_3" href="image_big.jpg" title="Titel unter dem Bild"><img src="image_small.jpg" alt=""/></a>
(Fancy Box mit abgedunkeltem Hintergrund, Box schließen am X oder auf Foto klicken)

Gruß

Friedrich