jQuery fancybox 2 funktioniert nicht

[x4all]

Hallo zusammen,

contao 2.11.5, Scripte (moo_jquery_fancybox und moo_jquery_nc) sind eingebunden, werden im Quelltext auch ausgegeben. Es werden beide Frameworks geladen, der Aufruf im Textlink geht über href="{{link_url::70}}" rel="lightbox"
Allerdings wird die Seite im aktuellen Tab geöffnet.

Hab alle jQuery Versionen versucht, nichts funktioniert.

Bei deisem Bsp. http://www.internet-service-seo.de/0...uery-fancybox/
wird die lightbox so geladen: rel="lightbox[lb8]" Doch auch das klappt auch nicht...

Was kann das sein?

LG

[dhe]

Du musst im Template "moo_jquery_fancybox" den Aufruf auch anpassen

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

wird ja wohl kaum funktionieren
Versuch mal das hier

$('a[rel^="lightbox"]').fancybox({...}

Gruß

[x4all]

Hab das mal versucht, aber es hat nichts geholfen... Template sieht jetzt wie folgt aus:

<?php

//Include Fancybox2 JS
$GLOBALS['TL_JAVASCRIPT']['jquery_fancybox2_mousewheel'] = 'system/modules/jquery_fancybox2/html/fancybox2/lib/jquery.mousewheel-3.0.6.pack.js';
$GLOBALS['TL_JAVASCRIPT']['jquery_fancybox2'] = 'system/modules/jquery_fancybox2/html/fancybox2/source/jquery.fancybox.js?v=2.0.5';
$GLOBALS['TL_JAVASCRIPT']['jquery_fancybox2_buttons'] = 'system/modules/jquery_fancybox2/html/fancybox2/source/helpers/jquery.fancybox-buttons.js?v=2.0.5';
$GLOBALS['TL_JAVASCRIPT']['jquery_fancybox2_thumbs'] = 'system/modules/jquery_fancybox2/html/fancybox2/source/helpers/jquery.fancybox-thumbs.js?v=2.0.5';

//Include Fancybox2 CSS
$GLOBALS['TL_CSS']['jquery_fancybox2'] = 'system/modules/jquery_fancybox2/html/fancybox2/source/jquery.fancybox.css?v=2.0.5';
$GLOBALS['TL_CSS']['jquery_fancybox2_buttons'] = 'system/modules/jquery_fancybox2/html/fancybox2/source/helpers/jquery.fancybox-buttons.css?v=2.0.5';
$GLOBALS['TL_CSS']['jquery_fancybox2_thumbs'] = 'system/modules/jquery_fancybox2/html/fancybox2/source/helpers/jquery.fancybox-thumbs.css?v=2.0.5';

?>

<script type="text/javascript">
$(document).ready(function() {
  $('a[rel^="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>

[dhe]

Es werden beide Frameworks geladen

Ach so...
dann musst du den Aufruf auch im noConflict-Modus machen

jQuery(document).ready(function() {
  jQuery('a[rel^="lightbox"]').fancybox({...});
});

[x4all]

Hmm, ich hab das versucht, aber das war es auch nicht... Script sieht jetzt so aus:

<script type="text/javascript">
  jQuery(document).ready(function() {
  jQuery('a[rel^="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>

[Zero]

Erstmal musst du sicherstellen, dass jquery core vor mootools core geladen wird.
Dann siehe diesen Thread: mootools und jquery mit contao 3

Falls du contao 2.x verwendest gilt dasselbe. Um alle Scripte mootools oder jquery Schnippsel muss das entsprechend herum.

Hast du irgend einen Ausgabe Fehler in der Konsole (Firebug oder sonstiges Entwickler Tool)?

[Zero]

Du verwendest Fancybox 2.1.x? Also von fancyapps.com?
Da musst du entsprechend auf die CSS Klassen und Attribute achten: http://fancyapps.com/fancybox/#examples
Die kannst du aber mit jquery aber auch Dynamisch dann hinzufügen. Siehe hier: http://api.jquery.com/addClass/

Ich hoffe du findest alles

[x4all]

jquery_fancybox2 0.1.0 beta1 Build 4

Fehler im Firebug sind nicht drin, Contao 2.11.5.
Vielleicht hilft das ja weiter: http://mansorygmbh.alfahosting.org/home.html
Aber: Zum testen ist das nur auf home.html zugewiesen. Man kann das ganze mit dem Login-Link, unten im Menü bei "PRESS" testen.

Lieber Gruß

[x4all]

Ist noch jemand was dazu ein- oder aufgefallen?

Grüße

[nachtarbeit]

Hatte selbes Problem mit Contao 2.11.6 und fancybox_2 0.1.0 beta1.
Aus welchem Grund auch immer, weigert sich Contao JS oder CSS Dateien einzubinden, die im Template mit einer Versionsangabe im Dateinamen eingebunden werden.

Also funktioniert nicht:
$GLOBALS['TL_JAVASCRIPT']['jquery_fancybox2_thumbs'] = 'system/modules/jquery_fancybox2/html/fancybox2/source/helpers/jquery.fancybox-thumbs.js?v=2.0.5';

Lösung: das Fragezeichen und die Versionsbezeichnung weglassen, dann werden die CSS und JS Dateien korrekt eingebunden und alles funktioniert:
$GLOBALS['TL_JAVASCRIPT']['jquery_fancybox2_thumbs'] = 'system/modules/jquery_fancybox2/html/fancybox2/source/helpers/jquery.fancybox-thumbs.js';

Gruß,
Lukas

[xchs]

Mit htmlspecialchars() müsste eigentlich auch der Query String möglich sein.

[nachtarbeit]

nope, leider nicht.
vermutlich macht der querystring bei dem quell-js probleme beim generieren des temporären js-dateinamens, so ins blaue rein geraten.

der entwickler möge das doch bei der nächsten fancyboxversion berücksichtigen..

lukas