11548 sujets

JavaScript, DOM et API Web HTML5

Gérer un conflit jquery sur une implantation plus complexe [RESOLU]

Bonjour à tous,

Je travaille sur joomla et je suis confronté à un problème de conflit entre mootools et jquery.

Pour les scripts simple, je fais quelque chose comme ca 
var $j = jQuery.noConflict();
$j(document).ready(function() {
    
    // Expand Panel
    $j("#open").click(function(){
        $j("div#panel").slideDown("slow");
    
    });    
    
    // Collapse Panel
    $j("#close").click(function(){
        $j("div#panel").slideUp("slow");    
    });        
    
    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $j("#toggle a").click(function () {
        $j("#toggle a").toggle();
    });        
        
});
est ca marche.
Cependant, je souhaite insérer un script qui s'appelle bxcarousel est qui à une implantation plus complexe et je ne sais pas comment m'y prendre. car il y a un appel de fonction, et un autre fichier bien plus complexe.

Appel : 
$(document).ready(function(){
    $('#example1').bxCarousel({
        display_num: 2,
        move: 2,
        prev_image: 'icon_arrow_left.png',
        next_image: 'icon_arrow_right.png',
        margin: 10,
        auto: true,
        controls: true,
        auto_hover: true

    });
});


Fonction : 
(function($){$.fn.bxCarousel=function(options){var defaults={move:4,display_num:4,speed:500,margin:0,auto:false,auto_interval:2000,auto_dir:'next',auto_hover:false,next_text:'next',next_image:'',prev_text:'prev',prev_image:'',controls:true};var options=$.extend(defaults,options);return this.each(function(){var $this=$(this);var li=$this.find('li');var first=0;var fe=0;var last=options.display_num-1;var le=options.display_num-1;var is_working=false;var j='';var clicked=false;li.css({'float':'left','listStyle':'none','marginRight':options.margin});var ow=li.outerWidth(true);wrap_width=(ow*options.display_num)-options.margin;var seg=ow*options.move;$this.wrap('<div class="bx_container"></div>').width(999999);if(options.controls){if(options.next_image!=''||options.prev_image!=''){var controls='<a href="" class="prev"><img src="'+options.prev_image+'"/></a><a href="" class="next"><img src="'+options.next_image+'"/></a>';}
else{var controls='<a href="" class="prev">'+options.prev_text+'</a><a href="" class="next">'+options.next_text+'</a>';}}
$this.parent('.bx_container').wrap('<div class="bx_wrap"></div>').css({'position':'relative','width':wrap_width,'overflow':'hidden'}).before(controls);var w=li.slice(0,options.display_num).clone();var last_appended=(options.display_num+options.move)-1;$this.empty().append(w);get_p();get_a();$this.css({'position':'relative','left' [decu]seg)});$this.parent().siblings('.next').click(function(){slide_next();clearInterval(j);clicked=true;return false;});$this.parent().siblings('.prev').click(function(){slide_prev();clearInterval(j);clicked=true;return false;});if(options.auto){start_slide();if(options.auto_hover&&clicked!=true){$this.find('li').live('mouseenter',function(){if(!clicked){clearInterval(j);}});$this.find('li').live('mouseleave',function(){if(!clicked){start_slide();}});}}
function start_slide(){if(options.auto_dir=='next'){j=setInterval(function(){slide_next()},options.auto_interval);}else{j=setInterval(function(){slide_prev()},options.auto_interval);}}
function slide_next(){if(!is_working){is_working=true;set_pos('next');$this.animate({left:'-='+seg},options.speed,function(){$this.find('li').slice(0,options.move).remove();$this.css('left',-(seg));get_a();is_working=false;});}}
function slide_prev(){if(!is_working){is_working=true;set_pos('prev');$this.animate({left:'+='+seg},options.speed,function(){$this.find('li').slice(-options.move).remove();$this.css('left',-(seg));get_p();is_working=false;});}}
function get_a(){var str=new Array();var lix=li.clone();le=last;for(i=0;i<options.move;i++){le++
if(lix[le]!=undefined){str[i]=$(lix[le]);}else{le=0;str[i]=$(lix[le]);}}
$.each(str,function(index){$this.append(str[index][0]);});}
function get_p(){var str=new Array();var lix=li.clone();fe=first;for(i=0;i<options.move;i++){fe--
if(lix[fe]!=undefined){str[i]=$(lix[fe]);}else{fe=li.length-1;str[i]=$(lix[fe]);}}
$.each(str,function(index){$this.prepend(str[index][0]);});}
function set_pos(dir){if(dir=='next'){first+=options.move;if(first>=li.length){first=first%li.length;}
last+=options.move;if(last>=li.length){last=last%li.length;}}else if(dir=='prev'){first-=options.move;if(first<0){first=li.length+first;}
last-=options.move;if(last<0){last=li.length+last;}}}});}})(jQuery);


J'ai besoin de votre aide car je coince un peu. Merci pour votre précieuse aide !! [/i][/i][/i][/i]
Modifié par dreadstock (12 Oct 2010 - 10:36)
Je n'ai toujours pas trouvé, quelqu'un aurait il une idée, ou un tuto qui me permettrais d'avancer un peu dans mon projet.
En faite, si je change le $ par jquery, ca va pour l'appel javascript, mais j'ai du mal à comprendre ce que je dois changer dans l'implantation plus complexe du script en lui même.
Merci infiniment pour votre aide
Modifié par dreadstock (11 Oct 2010 - 12:32)
Essaie de modifier le code appelant ton carrousel comme suit :
$j(function(){
    $('#example1').bxCarousel({
        display_num: 2,
        move: 2,
        prev_image: 'icon_arrow_left.png',
        next_image: 'icon_arrow_right.png',
        margin: 10,
        auto: true,
        controls: true,
        auto_hover: true
    });
});

Autrement dit, modifie la première ligne.

Soit dit en passant, $j(function () {}) est un raccourci de $j(document).ready(function () {}). Smiley cligne
Modifié par Victor BRITO (11 Oct 2010 - 12:42)
j'ai trouvé la solution, j'ai passé toutes mes appelles jquery avec la fonction $j est c marche. 

$j(document).ready(function(){
    $j('#example1').bxCarousel({
        display_num: 2,
        move: 2,
        prev_image: 'icon_arrow_left.png',
        next_image: 'icon_arrow_right.png',
        margin: 10,
        auto: true,
        controls: true,
        auto_hover: true

    });
});


Merci
Sujet clos
Aller à