Fancybox

**tshellshock** · 22.07.2011, 20:09

Hallo zusammen,

ich habe ein kleines, großes Problem bei dem ich etwas Hilfe oder jemanden der mich auf den richtig weg führt bräuchte.

Ein Kunde hätte gern das anstelle der Mootools Lightbox die jQuery Fancybox geladen wird. Ich habe die Extensions "jquery" und "jquery_fancybox" runtergelassen und installiert. Die Templates sind beide, im richtigen Verzeichnis eingebunden und im Seitenlayout ausgewählt. Es wird nur jQuery geladen, damit es zu keinen Conflicts kommt und die Mootools-Templates sind alle abgewählt!

Nun mein Problem die Fancybox wird nicht geladen, also beim anklicken eines Bildes, das bei klick in der Fancybox erscheinen soll, wird in einem neuen Fenster geöffnet.
Obwohl es im <head> geladen wird!

Jemand eine Idee oder Vorschlag?

Aso hier der Link zu Seite.

Vielen Dank für eure Hilfe

**Flex** · 22.07.2011, 21:00

Hast du im Artikel auch die Box für die Lightbox aktiviert?
Bildeinstellungen -> Großansicht

**psren** · 22.07.2011, 21:44

Es kommt zu einem Javascript Error. Woher der kommt muss ich schauen. Die Erweiterung hat aber schon einmal funktioniert.

Code:

Uncaught TypeError: Cannot call method 'replace' of undefined
$.fancybox.overlayShowdetailansicht.html:362
f.e.extend.eachjquery-1.6.1.min.js:16
f.e.fn.e.eachjquery-1.6.1.min.js:16
(anonymous function)detailansicht.html:361
f.extend._Deferred.e.resolveWithjquery-1.6.1.min.js:16
f.e.extend.readyjquery-1.6.1.min.js:16
f.c.addEventListener.zjquery-1.6.1.min.js:16

Stell mal jquery auf Version 1.5.2, dann funktioniert es. Mal schauen was da zur 1.6.1 tauglichkeit fehlt ;-)

**psren** · 22.07.2011, 22:16

Lösung gefunden.

Da die Fancybox rel-Attribute mit [] eckigen Klammern nicht versteht wurden diese ersetzt.

Code:

$("a").each(function(){
		$(this).attr("rel", ($(this).attr("rel")).replace(/\[(.+?)\]/g, '$1'));
	});

Da aber in jQuery 1.6 die attr methode geändert wurde und jetzt zwischen attr und prop differenziert wird muss das jetzt so lauten

Code:

$("a").each(function(){
		$(this).attr("rel", ($(this).prop("rel")).replace(/\[(.+?)\]/g, '$1'));
	});

**psren** · 22.07.2011, 22:33

neue Version im ER

**JanMalte** · 25.07.2011, 08:02

Die neue Version läuft leider nicht mehr. Es scheint als fehlen dieverse Dateien

Code:

"NetworkError: 404 Not Found - http://www.veloberlin.com/plugins/jquery_fancybox/layout1/jquery.fancybox-1.3.4.css"
jquery...3.4.css
"NetworkError: 404 Not Found - http://www.veloberlin.com/plugins/jquery_fancybox/jquery.easing.1.3.js"
jquery....1.3.js
"NetworkError: 404 Not Found - http://www.veloberlin.com/plugins/jquery_fancybox/jquery.mousewheel-3.0.4.pack.js"
jquery...pack.js
"NetworkError: 404 Not Found - http://www.veloberlin.com/plugins/jquery_fancybox/jquery.fancybox-1.3.4.pack.js"
jquery...pack.js
"NetworkError: 404 Not Found - http://www.veloberlin.com/plugins/jquery_fancybox/jquery.easing.1.3.js"
jquery....1.3.js
"NetworkError: 404 Not Found - http://www.veloberlin.com/plugins/jquery_fancybox/jquery.mousewheel-3.0.4.pack.js"
jquery...pack.js
"NetworkError: 404 Not Found - http://www.veloberlin.com/plugins/jquery_fancybox/jquery.fancybox-1.3.4.pack.js"
jquery...pack.js
$("a[rel^=lightbox]").fancybox is not a function
[Bei diesem Fehler anhalten] 'enableEscapeButton' : true
news.html (Zeile 71)

**tshellshock** · 25.07.2011, 10:49

Hallo und vielen Dank für eure Antworten,

ja die Großansicht im Inhaltselement ist angehakt, sonst würde sich das Bild nicht in einem neuen Fenster öffnen

.

Ih habe es mit der 1.5.2Version versucht, blieb leider ohne Erfolg. Danach mit der 1.6 und geänderten Code-Zeile, leider ohne Erfolg. Danach die Extension aktualisiert… na ratet mal… genau… leider ohne Erfolg. Und zum Schluss habe ich die Extensions "jQeury" und "jQuery_fancybox" deinstalliert und wieder neu installiert, leider auch hier ohne Erfolg.

Kann ich eine Einstellung übersehen haben, oder muss ich eine bestimmte Quelle nehmen (nehme die googleapis) ich bin etwas ratlos.

Viele Grüße und Danke für eure Hilfe

**psren** · 25.07.2011, 11:28

Da scheinen mir beim Update im ER ein paar Dateien verloren gegangen zu sein... ich kümmere mich heute abend drum.

**psren** · 25.07.2011, 13:14

So die Dateien sind wieder da, ich habe es im ER aktualisiert. Built 3
Übers ER installiert und getestet. Klappt wieder ;-) Sorry für die Umstände

Und ab jetzt auch bei Contao-Forge:
http://contao-forge.org/projects/jqueryfancybox/

**tshellshock** · 25.07.2011, 16:37

Super jetzt läufst! Vielen Dank!

**tshellshock** · 09.01.2012, 15:21

Hallo,

ich habe letzte Woche das Contao-Update auf 2.10.4 gemacht. Nur jetzt läuft die fancybox nicht mehr.
Die Ext. ist auf em aktuellen Stand, das .tpl ist auch als html5 und xhtml im Templates-Ordner, Jquery verwenden ist im Seitenlayout angehakt und wird laut Quellcode auch geladen, die Großansicht der Bilder ist angehakt.

Irgendwer ne Idee warum es nicht läuft!?!?!? Hab ich was übersehen oder beim Update vielleicht nen Fehler gemacht gab es was bei Jquery bzw. fancybox was besonderes zu beachten!?

Vielen Dank für eure Hilfe.

Viele Grüße, Thomas

**psren** · 11.01.2012, 13:19

Spontan fällt mir bei deiner Seite auf, dass da beim Javascript irgendwas schiefläuft.

HTML-Code:

<script type="text/javascript"><!--</script><script type="text/javascript"><!--

Schau mal nach wo das herkommt, weil dadurch wird das Javascript anscheinend nicht ausgeführt. (Es kommt auch zu 2 Script-Fehlern)

Viele Grüße
psren

**tshellshock** · 12.01.2012, 13:26

aah… okay… das sieht merkwürdig aus!!!

danke schön!!!

**tshellshock** · 12.01.2012, 14:50

Hab den Fehler gefunden, ein Kommentar in den fancybox- templates war kein Kommentar mehr und dadurch ist ein Syntax-Fehler durch ein "<" entstanden und die fancybox wurde dadurch nicht geladen.

Danke für deine Hilfe

.

**psren** · 12.01.2012, 15:10

War der Fehler an der Erweiterung oder nur in deinem Template?

**thibodeaux** · 19.01.2012, 15:14

I installed the jQuery & Fancybox extensions in a new install of Contao (2.10.4) yesterday and it works great in Chrome, but not in Safari or Firefox (I'm on a Mac).

I thought that possibly it was the same issue tshellshock mentioned (indeed the problem in the template he mentioned was there), but fixing that had no impact.

I am seeing two errors in the Safari console:

TypeError: '[object Object]' is not a function (near '...e'.split('|'),0,{}))...')
students.html:139TypeError: 'undefined' is not a function (evaluating '$("a[rel^=lightbox]").fancybox')

Any clue what may be causing this? you can see the error in action here: http://goo.gl/mWQ5J

Thanks in advance for any help you can offer!

Greg

(Sorry for the english, I don't speak German)

**psren** · 19.01.2012, 15:56

Zitat von thibodeaux

(Sorry for the english, I don't speak German)

No Problem.
I'll look about it tomorrow.

Code:

javascript-1da13014.js:39     Uncaught TypeError: object is not a function

mhhh... where does this error come from...

***xchs*** · 19.01.2012, 16:04

Hi Greg,

as you are using MooTools along with the jQuery framework I would ensure to enable the so called noConflict mode. That said, you would have to add the following instruction at the beginning of the template "moo_jquery_fancybox.*" after the CDATA comment:

HTML-Code:

jQuery.noConflict();

Maybe that already helps.

**thibodeaux** · 19.01.2012, 16:28

Ah, thanks for pointing that out xchs, I'm actually not using any moo scripts so I've disabled them, but still no luck. The error I'm seeing is:

$("a[rel^=lightbox]").fancybox is not a function

Line 137

Greg

Zitat von xchs

Hi Greg,

as you are using MooTools along with the jQuery framework I would ensure to enable the so called noConflict mode. That said, you would have to add the following instruction at the beginning of the template "moo_jquery_fancybox.*" after the CDATA comment:

HTML-Code:

jQuery.noConflict();

Maybe that already helps.

***xchs*** · 19.01.2012, 17:40

Apparently there is a problem if the three Fancybox javascript files get combined into one single file. It seems to work as long as I don't use the build-in combiner. Tested under Contao 2.11.RC2.

**thibodeaux** · 19.01.2012, 18:19

AH HA!!!

I've figured it out! The problem was being caused by another extension - Theme+
Apparently that extension was hijacking my fe template and messing things up... I should have known to check compatibility. Thanks for all of your help and comments!

***xchs*** · 19.01.2012, 18:42

Well, now it looks good (as I can see on your site). However, as already mentioned it will not work anymore if these three javascript files are combined into a single file (like it was the case before).

So long.

**psren** · 19.01.2012, 20:18

I'll look into it :-D

**pixelbrain** · 20.01.2012, 14:57

Habe die Forumsbeiträge gelesen, die genannten Dinge ausprobiert, aber die Bilder öffnen nur in neuem Fenster, keine Lightbox.

Contao: 2.10.4
jquery 1.7.1
Bilder als Galerie eingebunden, Lightbox Funktion aktiviert
jquery verwenden angehakt
jquery und mootools laden angehakt
Mootools Templates (Reihenfolge wie genannt): moo_jquery_nc, moo_jquery_fancybox, moo_analytics

in allen zwei Template-Dateien (.html5, .xhtml) der Facybox folgende Änderung vorgenommen (jQuery.noConflict(); eingefügt):

Code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.noConflict();
$(document).ready(function() {

Als einzige weitere Erweiterung nutze ich mooquee4ward - temporäres Deaktivieren hat aber auch nichts geändert.

Beispiel: http://web34.kunden.pixelbrain.at/in...des-monats.htm

Fehlermeldung:
Fehler: $(document).ready is not a function
Quelldatei: http://web34.kunden.pixelbrain.at/in...des-monats.htm
Zeile: 152

... und ich komm nicht drauf, wo der Fehler liegt...!
Wer sieht etwas, was ich nicht sehe???

Danke,
Karin

***xchs*** · 20.01.2012, 15:19

Brauchst Du zwingend beide Frameworks? Funktioniert es, wenn Du das MooTools-Framework deaktivierst?

**pixelbrain** · 20.01.2012, 17:14

Naja, müsste ich überlegen, und das mooquee4ward durch ein anderes (jquery) Skript ersetze.
Habe folgendes gemacht:

Einstellungen: mooquee4ward deaktiviert, somit sind nur noch die jquery Extensions aktiv
Themes > Layout: Haken bei jQuery und Mootools laden raus
Themes > Layout: Haken bei moo_analytics raus
Templates von Fancybox: jQuery.noConflict(); rausgenommen

Somit habe ich alle Mootools Skripte deaktiviert, bin ich da richtig? Oder ist an anderer Stelle auch noch etwas zu deaktivieren?
Screens der Einstellungen anbei.

Ergebnis: Fehlermeldung
$ is not a function
$(document).ready(function() {

Fancybox sollte doch mit Contao 2.10.4 funktionieren?
Kann es sein, dass jQuery nicht (korrekt) geladen wird? Sonst würde er doch das "$" erkennen?

- So, und die Antwort liefere ich gleich selbst mit:
Ich habe noch zusätzlich die Extension moo_jquery_nc deaktivieren müssen. Jetzt läuft die Fancybox!
Gemeinsame Verwendung mit Mootools ist auch kein Problem, jedoch das Skript mooquee4ward macht Probleme. Da werde ich mir wohl ein anderes jquery Skript suchen müssen.
Macht ja auch Sinn, um die Ladezeit schlanker zu halten.

Vielleicht ist meine Erkenntnis auch für andere von Interesse.

Karin

**Murmelschorsch** · 16.04.2012, 15:41

Hi, ich hab das gleiche Problem, wie gerade beschrieben:

Ergebnis: Fehlermeldung
$ is not a function
$(document).ready(function() {

Bei mir wird trotz der Einbindung von fancybox die lightbox geladen und sobald ich die lightbox oder alle anderen Mootools deaktiviere, geht gar nichts mehr. Hier ist die Seite: www.finanzberatung-oldenburg.de
Meine Contao-Version: 2.11.2

Bin für jeden Tipp sehr dankbar,
Georg

**pixelbrain** · 17.04.2012, 16:29

Hallo Murmelschorsch,

versuche mal schrittweise die einzelnen geladenen Skripts zu deaktivieren. Könnte eine Inkompatibilität sein.
Dadurch kannst du rausfinden,
a) welches Skript ggf. inkompatibel ist und
b) welche du ev. gar nicht benötigst.

In der Erweiterungsverwaltung (oder bei der Beschreibung der Extension auf http://www.contao.org/de/extension-list.html) kannst du bei Abhängigkeiten auch sehen, welche Skripts die jeweilige Extension benötigt.

Verwendest du nur moo Skripts - oder in Kombination auch jQuery Skripts? Wenn beide, achte darauf, ggf. das jQuery.noConflict(); zu verwenden, damit die problemlos nebeneinander laufen.
Aus ladezeittechnischen Gründen macht es aber Sinn, nur eines von beiden zu verwenden.

Welche Skripts hast du aktiviert? Kannst du ev. einen Screeshot der Einstellungen posten?

Karin

**Murmelschorsch** · 29.04.2012, 16:21

Hey Karin,

ich hab jetzt in meinem Layout alles nacheinander deaktiviert und wieder aktiviert in unterschiedlichen Reinfolgen, das hat nichts gebracht. Um die Fancybox zu testen habe ich manuell einen Code hinzugefügt, so dass ich jetzt zumindest weiß, dass die Fancybox funktioniert. Hier meine Screens:

Screen1.JPG
Dies ist das Bild, das leider nicht mit der Fancybox angezeigt wird. Ich vermute irgendwie, dass es vielleicht an dem Code am Ende der Seite liegt, deswegen hab ich den auch nochmal gepostet. Auch jeweils mit dem von mir manuell hinzugefügtem Code, bei dem es funktioniert.

Screen2.JPG
Screen3.JPG

Grundsätzlich verwende ich derzeit auch die Mootools, aber wenn es nicht anders geht kann ich natürlich umstellen und nur jquery nutzen.
Irgendeine Idee?

**pixelbrain** · 01.05.2012, 14:01

Hallo Murmelschorsch,

folgenden Test würde ich noch vorschlagen:
- lt. Screenshot ladest du Mootools UND Jquery, deshalb aktiviere zusätzlich noch das moo_jquery_nc (no-conflict mode).

Ein zweiter Versuch wäre noch, Mootools NICHT zu laden. Weiß ich jetzt aber gerade nicht, wie das geht. Ev. den Haken bei jQuery und Mootools laden wegnehmen? Was steht denn dann im Hilfetext dabei? Habe leider gerade keine Installation zur Hand, bei der ich das nachschlagen könnte. Aber im Forum findet sich dazu sicher eine Antwort. Google spuckt unter "contao mootools deaktivieren" einige Ergebnisse aus.
zB. https://www.contao-community.de/show...n-deaktivieren

Ansonsten fällt mit momentan nichts mehr ein.

KARIN

**Murmelschorsch** · 01.06.2012, 07:13

Nachdem ich alles hier Vorgeschlagene versucht habe und es trotzdem nicht zur Problemlösung gekommen ist, habe ich folgende Lösung gewählt:

Ich habe in dem fancybox2 Template (/system/modules/jquery_fancybox2/templates) in Zeile 18

Code:

$("a[data-lightbox]").fancybox({

durch

Code:

$("a[rel*=lightbox]").fancybox({

ersetzt.

Das Problem scheint zu sein, dass meine Contao-Version immernoch das alte

Code:

rel="lightbox"

Attribut generiert und obwohl ich Version 2.11.3 verwende, ist der Fehler nicht behoben. Mit der Änderung funktioniert die fancybox zumindest für normale Bilder, mein Iframe funktioniert so aber leider nicht und es tauchen noch diverse Javascript Fehler auf, aber immerhin funktioniert es erstmal.

Falls jemand noch eine Idee hat, wäre ich für jeden Hinweis sehr dankbar.

**magicsepp** · 01.06.2012, 07:29

Zitat von Murmelschorsch

...
Das Problem scheint zu sein, dass meine Contao-Version immernoch das alte

Code:

rel="lightbox"

Attribut generiert ...

Hallo Murmelschorsch,
das "alte" rel= ist nicht alt sondern nur nicht HTML5 valide deswegen wird bei HTML5 data-lightbox verwendet. Deine Seite ist auf XHTML eingestellt damit ist hierfür rel="lightbox" richtig und aktuell. Das scheint die Fancy Extension wohl nicht richtig umzusetzen bzw berücksichtigen.

Hoffe das klärt die Lage ein wenig.

**mike_mcfly** · 10.08.2012, 18:50

Ahoi zusammen,

bei mir öffnen die Bilder immer im aktuellen Fenster, ohne den lightbox-Effekt.

Im Quelltext siehen die Bilder so aus:

HTML-Code:

<a data-lightbox="lbprojektecatalogreader0" href="tl_files/Projekte/Verpackung/Test/Projektbild_01.jpg" title="Projektbild 01"><img src="system/images/Projektbild_01-9761ea69.jpg" alt="Projektbild 01" width="900" height="300" /></a>

Installiert habe ich die Extension jquery_fancybox2

Im Theme-Layout habe ich moo_jquery_fancybox angehakt, was zu diesem Script-Aufruf am Ende der Seite führt:

HTML-Code:

<script type="text/javascript">
$(document).ready(function() {
    $("a[data-lightbox]").fancybox({
        'fitToView'     : true,
        'arrows'        : true,
        'closeBtn'      : true,
        'closeClick'    : false,
        'nextClick'     : false,
        'loop'          : false,
        'nextEffect'    : 'fade',
        'prevEffect'    : 'fade',
        'nextSpeed'     : 'slow',
        'prevSpeed'     : 'slow',
        'groupAttr'     : 'data-lightbox',
        helpers         : { 
            title   : {
                type : 'inside'
            },
            buttons : {},
            thumbs  : {
                width   : 120,
                height  : 80
            }
        }
    });
});
</script>

Dennoch ist der Lightbox-Effekt nicht zu sehen. Was mach ich da falsch?

**mike_mcfly** · 11.08.2012, 12:11

So ich hab die erweiterung aus dem BE entfernt und das Ganze von Hand umgesetzt. jetzt funktionierts!

**Balduin** · 10.09.2012, 10:58

Also vieleicht steh ich auch total auf dem Schlauch, aber ich verstehe einfach nicht, wie man nun eine Webseite innerhalb einer fancybox öffnet und dabei die Maße der selben festlegt. Bei der Mediabox ging das ja immer sehr einfach wenn man im link noch rel=lightbox[500, 400] dazugefügt hat. Gibts für die fancybox auch so einen "shortcode" oder wie kann ich da nun die maße definieren?

Ich hab jetzt die die Standardmaße direkt in der jquery.fancybox.js unter system/modules/etc. geändert, aber das ist unflexibel und nicht upgradesicher. Hat jemand eine bessere Lösung?

**Kathrin** · 03.10.2012, 13:32

Hallo!

Ich arbeite mit 2.11.3 und habe die Fancybox installiert und funktioniert auch soweit auf den Standardseiten. Auf der Startseite möchte ich zusätzlich den Coin-Slider verwenden und sobald ich diesen in das Layout einfüge funktioniert die Fancybox nicht mehr. (Wenn ich dann auf ein Bild klicke öffnet sich das Bild im Fenster ohne Lightbox). Mediabox, Slimbox und fancybox_nc sind nicht angehackt.

Weiß da jemand mehr dazu?

Liebe Grüße,
Kathrin

**german-support** · 09.11.2012, 20:11

Wie Balduin auch schrieb, würde mich interessieren wie ich Content in einer Fancybox wiedergeben kann?

**german-support** · 26.11.2012, 11:01

Kann denn keiner sagen wie man html Inhalt in einer Fancybox öffnet?

Hat sich erledigt!

Lösung: Einfach in das FB2-Template den benötigten Code reinsetzen

**Balduin** · 03.05.2013, 14:13

Hallo, noch einmal fürs Portokoll: die fancybox2-Erweiterung funktioniert nicht, wenn die aktuelle jQuery-Version geladen wird.
Ich habe Contao 2.11.6 und jquery_fancybox2 0.1.0 beta1 installiert.

Bis jQuery Version 1.8.3 funktioniert die Fancybox bei mir tadellos und ohne irgendwelche Anpassungen im Code. Sobald man eine höhere Version einstellt öffnen sich die Bilder wieder nur in einem neuen Fenster.