+ Antworten
Ergebnis 1 bis 4 von 4

Thema: Fancybox einbinden

  1. #1
    War schon öfter hier Avatar von pfump
    Registriert seit
    18.11.2008
    Beiträge
    234
    Bedankte sich
    22
    Erhielt 12 Danksagungen
    in 8 Beiträgen

    Standard Probleme mit Modal bei Fancybox einbinden

    Hallo,

    wie der Titel schon sagt, möchte ich die jquery fancybox in Joomla
    einbinden. Dazu hab ich folgendes gemacht:
    CSS-File eingebunden:
    Code:
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/.../css/jquery.fancybox-1.3.2.css" type="text/css" />
    Und die benötigten JS-Dateien:
    Code:
    <script src="<?php echo $this->baseurl ?>/templates/.../js/jquery.js" type="text/javascript"></script>    
    <script src="<?php echo $this->baseurl ?>/templates/.../js/jquery.fancybox-1.3.2.pack.js" type="text/javascript"></script>
    Die Fancybox funktioniert mit diesen Einstellungen auch sehr gut.
    Aber jetzt kommt mein Problem. Ich habe die Joomla eigenen Lightboxfunktionen eingebunden:
    Code:
    <?php JHTML::_('behavior.mootools'); ?>
    <?php JHTML::_('behavior.modal'); ?>
    Dies funktioniert jetzt allerdings nicht mehr!
    Nehme ich die Fancybox wieder komplett raus, geht wieder das "modal"

    Wie kann ich die Fancybox einbinden, ohne die "Modal" -Fähigkeit zu verlieren?

    Vielen Dank schon mal im Voraus

    Mfg
    Geändert von pfump (09.11.2010 um 13:27 Uhr)

  2. #2
    Gute Seele des Boards Avatar von Indigo66
    Registriert seit
    30.10.2007
    Ort
    127.0.0.1/htdocs/eu/de/muc/home.html
    Alter
    47
    Beiträge
    17.727
    Bedankte sich
    566
    Erhielt 5.299 Danksagungen
    in 5.114 Beiträgen

    Standard

    Eindeutige JS-Inkompatibiliät.
    jQuery und Mootools vertragen sich nicht. Aber google mal nach jQuery No Conflict Mode".
    "jQuery is known to conflict with other javascript libraries like mootools. No conflict mode helps to resolve these issues and is recommended."

  3. #3
    War schon öfter hier Avatar von pfump
    Registriert seit
    18.11.2008
    Beiträge
    234
    Bedankte sich
    22
    Erhielt 12 Danksagungen
    in 8 Beiträgen

    Standard

    Es scheint wirklich an mootools.js zu liegen.
    Wenn ich jquery ud fancybox einbaue bekomme ich folgende Fehlermeldung:

    Details zum Fehler auf der Webseite

    Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
    Zeile: 23
    Zeichen: 10
    Code: 0
    URI: http://localhost/.../media/system/js/mootools.js


    Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
    Zeile: 59
    Zeichen: 102
    Code: 0
    URI: http://localhost/.../media/system/js/mootools.js

    Schaue ich in den Quelltext der mootools.js steht in der Zeile:

    Code:
    el=document.createElement(el);}
    el=$(el);return(!props||!el)?el:el.set(props);
    Ich hab mal gegoogelt, aber leider komme ich damit nicht twirklich klar.
    Wo muß ich denn das "jQuery.noConflict();" einfügen.
    Muß da noch mehr dazu, oder reicht das?

  4. #4
    War schon öfter hier Avatar von pfump
    Registriert seit
    18.11.2008
    Beiträge
    234
    Bedankte sich
    22
    Erhielt 12 Danksagungen
    in 8 Beiträgen

    Standard

    Konnte das Problem jetzt lösen

    In der index.php habe ich folgendes ergänzt:
    Code:
    <script type="text/javascript">
      $.noConflict();
      // Code that uses other library's $ can follow here.
    </script>
    Danach habe ich in der fancybox.js folgendes geändert.
    Aus:
    Code:
    $(document).ready( function () {
    	$("[rel=iframe]").fancybox({type:"iframe",width:"90%",height:"90%"});
    });
    hab ich :
    Code:
    $(document).ready( function () {
    	jQuery("[rel=iframe]").fancybox({type:"iframe",width:"90%",height:"90%"});
    });
    gemacht.

    Und siehe da...es funktioniert.

+ Antworten

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein