it-swarm.com.de

Externes JQuery-Skript funktioniert nicht

Externes Jquery-Skript funktioniert nicht in Joomla-Vorlage. Unten habe ich ein Skript als Referenz eingefügt. Jede Hilfe sehr geschätzt

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);
                    }
                }
            });

        });
    });
3
webanup

Sie haben wahrscheinlich Probleme mit Konflikten, da sowohl jQuery als auch die mootools-Bibliothek das Zeichen '$' als Verknüpfung verwenden.

Es gibt mehrere Möglichkeiten, um mit diesem Problem umzugehen. Sie müssen herausfinden, welche Methode für Sie am besten geeignet ist. Möglicherweise treffen nicht alle auf Ihre Vorlage zu.

A) Ersetzen Sie alle '$' Zeichen durch 'jQuery', da $ eine Abkürzung für jQuery ist

B) Fügen Sie diese Zeile direkt vor Ihrem Code ein

var $ = jQuery.noConflict();

Danach können Sie $ in Ihrem Skript verwenden

C) Wickeln Sie Ihren gesamten Code in die jQuery-Wrapper-Funktion ein und verwenden Sie $ als Gültigkeitsbereich, wie

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

oder die präzisere Syntax für den obigen Code:

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

Sie müssen auch sicherstellen, dass Sie diesen Code hinzufügen, nachdem Sie die jQuery-Bibliothek eingefügt haben.

Weitere Informationen zu Konflikten mit anderen Bibliotheken finden Sie hier: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

6
fruppel