[JS] Meerdere versies jQuery gebruiken werkt niet

[floriske.nl]

Omdat ik 2 plugins gebruik op 1 site welke beide een andere versie van jQuery gebruiken wil ik 2 versies van jQuery laden, maar helaas zonder succes.

Allereerst even de losse codes van de 2 plugins:

jFlow (http://plugins.jquery.com/project/jFlow)

JavaScript:

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.flow.1.2.js"></script>

<!-- jFlow -->
<script type="text/javascript">
$(function(){

    $("#myController").jFlow({
        slides: "#mySlides",
        controller: ".jFlowControl", // must be class, use . sign
        slideWrapper : "#jFlowSlide", // must be id, use # sign
        selectedWrapper: "jFlowSelected",  // just pure text, no sign
        easing: "swing",
        width: "900px",
        height: "450px",
        duration: 500,
        prev: ".jFlowPrev", // must be class, use . sign
        next: ".jFlowNext" // must be class, use . sign
    });
    
});
</script>

fancyBox (http://fancybox.net/)

JavaScript:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

<!-- fancyBox -->
<script type="text/javascript">
    $(function() {
            $(".vacature").fancybox({
            'hideOnContentClick': false,        
            'scrolling'         : 'no',             
            'padding'           : 0,
            'titlePosition'     : 'inside',
            'speedIn'           : 900, 
            'speedOut'          : 300, 
            'overlayColor'      : '#000000',
            'overlayOpacity'    : 0.7
        });
            
    });
</script>

Omdat jFlow in IE (in FF en Safari wel <- zal ook weer eens niet zo zijn ) niet werkt met jQuery 1.4.2 en Fancybox niet uit de voeten kan met 1.2.6 wil ik voor beide een andere versie jQuery laden d.m.v. de noConflict optie, echter krijg ik dit met geen mogelijkheid aan de praat.

Hier de code samengevoegd zoals aangegeven op deze pagina omtrent gebruik van verschillende jQuery versies: http://blog.nemikor.com/2...tiple-versions-of-jquery/

JavaScript:

<!-- jQuery -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
    var jq142 = $.noConflict(true);
</script>

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>

<!-- jFlow & fancyBox scripts -->
<script language="javascript" type="text/javascript" src="js/jquery.flow.1.2.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>


<!-- jFlow functie -->
<script type="text/javascript">
$(function(){

    $("#myController").jFlow({
        slides: "#mySlides",
        controller: ".jFlowControl", // must be class, use . sign
        slideWrapper : "#jFlowSlide", // must be id, use # sign
        selectedWrapper: "jFlowSelected",  // just pure text, no sign
        easing: "swing",
        width: "900px",
        height: "450px",
        duration: 500,
        prev: ".jFlowPrev", // must be class, use . sign
        next: ".jFlowNext" // must be class, use . sign
    });
    
});
</script>

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

(function($) {
    $(function() {
            $(".vacature").fancybox({
            'hideOnContentClick': false,        
            'scrolling'         : 'no',             
            'padding'           : 0,
            'titlePosition'     : 'inside',
            'speedIn'           : 900, 
            'speedOut'          : 300, 
            'overlayColor'      : '#000000',
            'overlayOpacity'    : 0.7
        });
            
    });
})(jq142);
</script>

en dit is de site waar het om gaat: http://www.vbcc.nl/buitenruimte/werken_bij.php <- op de vacature slide zou bij het klikken op 1 van de vacatures een fancyBox moeten openen met de omschrijving.

Hoop dat iemand me op weg kan helpen want zit muurvast

Edit: heb ook even vlug een pagina online gezet met het Fancybox script: http://www.vbcc.nl/buitenruimte/vacatures_test.php

[Bosmonster]

Als je noConflict gebruikt en toewijst aan jq142, moet je die ook wel gebruiken natuurlijk ipv $

Verder is of dat werkt een beetje afhankelijk van of de plugin goed, met respect voor noConflict, gebouwd is.

De beste oplossing lijkt me overigens gewoon betere/nieuwere plugins zoeken, die wel werken met 1.4.x

[ Voor 55% gewijzigd door Bosmonster op 10-06-2010 10:25 ]

[floriske.nl]

Bosmonster schreef op donderdag 10 juni 2010 @ 10:24:
Als je noConflict gebruikt en toewijst aan jq142, moet je die ook wel gebruiken natuurlijk ipv $

Verder is of dat werkt een beetje afhankelijk van of de plugin goed, met respect voor noConflict, gebouwd is.

De beste oplossing lijkt me overigens gewoon betere/nieuwere plugins zoeken, die wel werken met 1.4.x

JavaScript:

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

(function($) {
    $(function() {
            $(".vacature").fancybox({
            'hideOnContentClick': false,        
            'scrolling'            : 'no',                
            'padding'            : 0,
            'titlePosition'        : 'inside',
            'speedIn'            : 900, 
            'speedOut'            : 300, 
            'overlayColor'        : '#000000',
            'overlayOpacity'    : 0.7
        });
            
    });
})(jq142); 

Als je goed kijkt zie je dat de "self-executing anonymous function" methode gebruik als aangegeven in de uitleg

Ik heb het volgende ook al geprobeerd, maar ook dat werkt niet:

JavaScript:

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

    jq142(function() {
            jq142(".vacature").fancybox({
            'hideOnContentClick': false,        
            'scrolling'            : 'no',                
            'padding'            : 0,
            'titlePosition'        : 'inside',
            'speedIn'            : 900, 
            'speedOut'            : 300, 
            'overlayColor'        : '#000000',
            'overlayOpacity'    : 0.7
        });
            
    });

er is helaas geen jFlow beschikbaar welke in IE goed werkt met jQuery 1.4.2 anders had ik die wel gebruikt en de klant wil specifiek jFlow gebruiken.

Tevens heb ik het al andersom geprobeerd, dus de andere jQuery versie in een variabele stoppen en de andere functie aanpassen, ook dat werkte niet.

[ Voor 3% gewijzigd door floriske.nl op 10-06-2010 10:33 ]

[Bosmonster]

Kun je niet downgraden naar 1.3.x? Daar werkt Fancybox ook in zo te zien.

Verder tja.. het is een beetje een houtje-touwtje oplossing zo. Persoonlijk zou ik de klant niet laten bepalen welke techniek gebruikt wordt, maar dat is een ander verhaal

Sowieso is zoiets als jFlow ook in een paar uurtjes zelf te schrijven. Of je pakt een van de tig plugins die exact hetzelfde doen (de klant gaat echt het verschil niet zien). http://flowplayer.org/tools/index.html

[ Voor 30% gewijzigd door Bosmonster op 10-06-2010 10:39 ]

[floriske.nl]

Zojuist even gekeken met 1.3.2 maar ook dan loopt het jFlow script niet in IE

Wel typisch dat het weer eens een IE probleem lijkt te zijn aangezien beiden goed draaien in FF en Safari op 1.4.2

Ben zelf geen echte javascript kenner dus zelf schrijven wordt lastig. Ben bang dat het inderdaad een ander script moet worden, maar de vraag is dan maar of het dan wel werkt.

[ Voor 0% gewijzigd door floriske.nl op 10-06-2010 12:34 . Reden: smartass janoz ;) maar je hebt gelijk! ]

[Janoz]

floriske.nl schreef op donderdag 10 juni 2010 @ 10:51:
Ben zelf geen echte java kenner dus zelf schrijven wordt lastig. Ben bang dat het inderdaad een ander script moet worden, maar de vraag is dan maar of het dan wel werkt.

Je hoeft geen java kenner te zijn hoor. Javascript kennen daarentegen is wel handig.

[floriske.nl]

Janoz schreef op donderdag 10 juni 2010 @ 11:11:
[...]

Je hoeft geen java kenner te zijn hoor. Javascript kennen daarentegen is wel handig.

Zie de reden van mijn edit in mijn vorige post

Maar goed, heb nog e.e.a. geprobeerd maar zonder succes. Ben dan ook maar overgegaan op het gebruiken van Jquery Tools (THX Bosmonster!)

[Manuel]

Wat werkt er niet aan het script in IE? Een fout van jou of een fout van het script? Heb net trouwens even een wat getest met jFlow en het werkt goed in IE, hier geeft IE in ieder geval het verwachtte resultaat weer.

[floriske.nl]

jFlow werkt met jQuery 1.4.2 niet in IE 8, hier althans niet, wel in Safari en FF.
Fancybox werkt niet met jQuery 1.2.6 waar jFlow normaliter op draait.

Maar als aangegeven al overgestapt naar jQuery Tools