Daniel.P.N Posted February 7, 2020 Share Posted February 7, 2020 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"; } Link to comment Share on other sites More sharing options...
Daniel.P.N Posted February 10, 2020 Author Share Posted February 10, 2020 Galera, Bom dia! Tem alguma forma de isolar um script js para que não dê conflito com outro js? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now