Jump to content
Sign in to follow this  
Daniel.P.N

Javascript em conflito como evitar? " Slider com galeria LIGHTBOX"

Recommended Posts

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";

}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...