web-dev-qa-db-fra.com

Le script JQuery externe ne fonctionne pas

Le script Jquery externe ne fonctionne pas dans le modèle Joomla. Ci-dessous, j'ai collé le script pour référence. Toute aide grandement appréciée

function ShowLayer() {
        var layer = $(this).attr("layer-id");
        if (!$("#" + layer).is(":visible")) {
            var zindex = $("#" + layer).css("z-index");
            $("#" + layer).removeClass("zIndex");
            $("#" + layer).css("z-index", zindex + 1);
            //$("#" + layer).slideIn();
            SlideIn($("#" + layer));
        }
    }
    function SlideIn(current) {
        var scope = $('.outer');
        current.css("left", $(scope).width());
        current.show();
        current.animate({ left: 0 }, 700, "linear", function () {               
        });
    }
    function SlideOut(current) {
        var scope = $('.outer');
        current.animate({ left: $(scope).width() }, 700, "linear", function () {
            current.css("z-index", "")
            current.addClass("zIndex");  
            current.hide();
        });
    }
    function CloseLayer() {
        var layer = $(this).attr("layer-id");               
        SlideOut($("#" + layer));
    }
    $(document).ready(function () {
        $('.show-layer').click(ShowLayer);
        $('.close-layer').click(CloseLayer);
        $('.scrollerview').css("opacity", "0");
        $(window).scroll(function () {
            $('.scrollerview').each(function (i) {
                var factor = -250;
                if ($(this).hasClass("PckHdOtr")) {
                    factor = 250;
                }
                var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height() - factor;
                if (bottom_of_window > bottom_of_object) {
                    $(this).animate({ 'opacity': '1' }, 900);
                    if ($(this).hasClass("PckHdOtr")) {
                        $('.outer').animate({ 'opacity': '1' }, 900);
                    }
                }
            });

        });
    });
joomla-3.xjquery
3
webanup

Vous êtes probablement confronté à des problèmes de conflit, car jQuery et la bibliothèque mootools utilisent le caractère '$' comme raccourci.

Il y a plusieurs façons de régler ce problème. Vous devez trouver quelle méthode fonctionne le mieux pour vous. Tous ne peuvent pas s'appliquer à votre modèle.

A) Remplacer tous les caractères '$' par 'jQuery' car $ est un raccourci pour jQuery

B) Ajoutez cette ligne juste avant votre code 

var $ = jQuery.noConflict();

Après cela, vous pouvez utiliser $ dans votre script

C) Enveloppez tout votre code dans la fonction wrapper de jQuery et utilisez $ comme étendue, comme 

jQuery(document).ready(function ($) {
    // All of your code, including your functions
});

ou la syntaxe plus concise pour le code ci-dessus:

jQuery(function($) {
    // Your code
});

Vous devez également vous assurer que vous ajoutez ce code après vous avez inclus la bibliothèque jQuery.

Pour en savoir plus sur les conflits avec d’autres bibliothèques, cliquez ici: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

6
fruppel