Daniel.P.N

Galera, Bom dia!

Tem alguma forma de isolar um script js para que não dê conflito com outro js? 

Olá prezados, Bom dia!

Eu sou novo na área... e estou montando uma página na qual tem um slider no topo e no meio uma galeria de portfólio com filtro e lightbox, porém ambas funcionam em projetos individuais, mas quando são usados ambos scripts em um projeto único, um está conflitando com o outro, anulando uma funcionalidade do outro.

Testes realizados:

- Renomeação de variável para não conflitar.

- Script de ambos em arquivos unidos e ate separados  

E nada de funcionar corretamente o problema persiste!!

Teria alguma forma de evitar conflitos de script de JS?

Poderiam me ajudar!

 E agradeço a todos pela atenção!

Segue ambos os scripts que utilizei como exemplos:

https://www.w3schools.com/howto/howto_js_slideshow.asp

https://www.w3schools.com/howto/howto_js_portfolio_filter.asp

https://www.w3schools.com/howto/howto_js_lightbox.asp

//Modo - Slider\\

var slideIndex = 0;
showSlides();
var slides, pontos;

function showSlides() {
    var i;
    slides = document.getElementsByClassName("mySlides");
    pontos = document.getElementsByClassName("ponto");
    
    for (i = 0; i < slides.length; i++) {
        slides.style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1;
    }
    for (i = 0; i < pontos.length; i++) {
        pontos.className = pontos.className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    pontos[slideIndex - 1].className += " active";
    // Tempo para alterar imagem a cada 6 segundos
    setTimeout(showSlides, 6000);
}

function plusSlides(position) {
    slideIndex += position;
    if (slideIndex > slides.length) {
        slideIndex = 1;
    } else if (slideIndex < 1) {
        slideIndex = slides.length;
    }
    for (i = 0; i < slides.length; i++) {
        slides.style.display = "none";
    }
    for (i = 0; i < pontos.length; i++) {
        pontos.className = pontos.className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    pontos[slideIndex - 1].className += " active";
}

function currentSlide(index) {
    if (index > slides.length) {
        index = 1;
    } else if (index < 1) {
        index = slides.length;
    }
    for (i = 0; i < slides.length; i++) {
        slides.style.display = "none";
    }
    for (i = 0; i < pontos.length; i++) {
        pontos.className = pontos.className.replace(" active", "");
    }
    slides[index - 1].style.display = "block";
    pontos[index - 1].className += " active";
}

---------------------

// Modo - Portfólio

// Executa a função e mostra todas as colunas
filterSelection("todos");
function filterSelection(c) {
    var x, y;
    x = document.getElementsByClassName("columnPort");
    if (c === "todos")
        c = "";

    // Adicione a classe "show" (display: block) aos elementos filtrados
    //  e remova a classe "show" dos elementos que não estão selecionados
    for (y = 0; y < x.length; y++) {
        filtraRemovClass(x[y], "showPort");
        if (x[y].className.indexOf(c) > -1)
            filtraMostraClass(x[y], "showPort");
    }
}

// Mostrar elementos filtrados
function filtraMostraClass(element, name) {
    var y, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (y = 0; y < arr2.length; y++) {
        if (arr1.indexOf(arr2[y]) === -1) {
            element.className += " " + arr2[y];
        }
    }
}

//Ocultar elementos que não estão selecionados
function filtraRemovClass(element, name) {
    var y, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (y = 0; y < arr2.length; y++) {
        while (arr1.indexOf(arr2[y]) > -1) {
            arr1.splice(arr1.indexOf(arr2[y]), 1);
        }
    }
    element.className = arr1.join(" ");
}

// Adicionar classe ativa ao botão atual (realce)
var btnContainerFilt = document.getElementById("btnFiltroPort");
var btnsRealce = btnContainerFilt.getElementsByClassName("btn_filtro");
for (var y = 0; y < btnsRealce.length; y++) {
    btnsRealce[y].addEventListener("click", function () {
        var current = document.getElementsByClassName("active");

//  Em caso de conflito do btn realce com Slider alterar o array 0 para 1
  current[0].className = current[0].className.replace(" active", "");

//        current[1].className = current[1].className.replace(" active", "");
        this.className += " active";
    });
}

/*////////////MODAL-LIGHTBOX\\\\\\\\\\\\*/

//Abri o Modal
function openModal() {
    document.getElementById("myModalPort").style.display = "block";
}

// Fecha o Modal
function closeModal() {
    document.getElementById("myModalPort").style.display = "none";
}

var portIndex = 1;
showSlidesPort(portIndex);

// Next/previous controls
function plusPort(n) {
    showSlidesPort(portIndex += n);
}

//Esta dando conflito com os pontos do slide

// Controle da imagem visualizada
function currentPort(n) {
    showSlidesPort(portIndex = n);
}

function showSlidesPort(n) {
    var p;
    var slidesPort = document.getElementsByClassName("mySlidesPort");

    if (n > slidesPort.length) {
        portIndex = 1;
    }
    if (n < 1) {
        portIndex = slidesPort.length;
    }
    for (p = 0; p < slidesPort.length; p++) {
        slidesPort[p].style.display = "none";
    }

    slidesPort[portIndex - 1].style.display = "block";

}