Guilherme Passos Guilherme Passos - 2 months ago 7
Javascript Question

Js crossfade with the same image

I've been trying to build a js to change imagem from some menu I even could do it with out animation but when I try to animate it. my mind crash, I have no idea how I will do it keeping the structure of 1 img tag and to make it worse I can't change the css, I tried exhaustively search for another answer here and in google but I just could apply it for my code. I basically need a cross fade making a cache in the js and copying the last image to it doesn't blink.

var tempo1 = setInterval(rand,5000);

function rand() {
var imagensTroca = 5;
var grupos = [['DFLO_0005','DFLO_0030','DFLO_0042','DFLO_0068','DFLO_0084'],['DANI_0004','DANI_0012','DANI_0020','DANI_0027'],['DCAV_0003','DCAV_0017','DCAV_0024'],['DCOR_0029','DCOR_0010','DCOR_0001'],['DETI_0004','DETI_0002','DETI_0007'],['DGEO_0002','DGEO_0009','DGEO_0001'],['DIND_0001','DIND_0006','DIND_0012'],['DOLD_0001','DOLD_0002','DOLD_0008'],['DPSI_0006','DPSI_0008','DPSI_0013'],['DUNI_0025','DUNI_0031','DUNI_0032'],['DVIN_0002','DVIN_0014','DVIN_0016'],['DXAD_0001','DXAD_0002','DXAD_0014'],['DFRA_0004','DFRA_0006','DFRA_0007'],['DOLH_0002','DOLH_0003','DOLH_0004'],['DYIN_0011','DYIN_0005','DYIN_0009']];

for( i=0; i < imagensTroca; i++) {
var parteDoArray = Math.floor(Math.random() * grupos.length);
var divisaoDoArray = grupos[parteDoArray].toString();
var selecaoDaDivisao = divisaoDoArray.split(",");
var imagemEscolhida = selecaoDaDivisao[Math.floor(Math.random() * selecaoDaDivisao.length)];
var cacheDaImagem = $('.cat' + i).src;
change1(imagemEscolhida,parteDoArray,cacheDaImagem);
}
}

function change1(_loc1,_loc2,_loc3) {
$(document).ready(function () {
var img = document.getElementById('cat'+_loc2);
var newImg = new Image();
newImg.src = _loc3;
$('#box'+_loc2).append(newImg);
img.src = 'themes/theshop/img/jumbotron/' + _loc1 + '.jpg';
img.fadeOut(1500,deleteItem,newImg);
});
}

function deleteItem(_loc1) {
_loc1.remove();
}

Answer

I could fix it myself so if someone need it in the future.

     var tempo1 = setInterval(rand,3000);
function rand() {
    var imagensTroca = 6;
    var grupos = [['DFLO_0005','DFLO_0030','DFLO_0042','DFLO_0068','DFLO_0084'],['DANI_0004','DANI_0012','DANI_0020','DANI_0027'],['DCAV_0003','DCAV_0017','DCAV_0024'],['DCOR_0029','DCOR_0010','DCOR_0001'],['DETI_0004','DETI_0002','DETI_0007'],['DGEO_0002','DGEO_0009','DGEO_0001'],['DIND_0001','DIND_0006','DIND_0012'],['DOLD_0001','DOLD_0002','DOLD_0008'],['DPSI_0006','DPSI_0008','DPSI_0013'],['DUNI_0025','DUNI_0031','DUNI_0032'],['DVIN_0002','DVIN_0014','DVIN_0016'],['DXAD_0001','DXAD_0002','DXAD_0014'],['DFRA_0004','DFRA_0006','DFRA_0007'],['DOLH_0002','DOLH_0003','DOLH_0004'],['DYIN_0011','DYIN_0005','DYIN_0009']];
    var dCheck = [];
    var dCheck2 = [];
    for( i=0; i < imagensTroca; i++){
        var parteDoArray = Math.floor(Math.random() * grupos.length);
        var divisaoDoArray = grupos[parteDoArray].toString();
        var selecaoDaDivisao = divisaoDoArray.split(",");
        var imagemEscolhida = selecaoDaDivisao[Math.floor(Math.random() * selecaoDaDivisao.length)];
        var img = document.getElementById('cat' + parteDoArray);
        var cacheDaImagem = img.src;
            if(check(dCheck,imagemEscolhida)===true && check(dCheck2,parteDoArray)===true){
                var newImg = new Image();
                newImg.src = cacheDaImagem;
                $('#box'+parteDoArray).append(newImg);
                newImg.id = "clone"+parteDoArray;
                newImg.className += "img-circle img-clone";
                dCheck[i] = imagemEscolhida;
                dCheck2[i] = parteDoArray;
                change1(imagemEscolhida,parteDoArray);
                $('#clone'+parteDoArray).fadeOut(1000,function() { for( k=0; k<= grupos.length; k++){  $('#clone'+k).remove();}});
                $('#cat'+parteDoArray).fadeIn(1000);
        }
    }
}
function change1(_loc1,_loc2){
    $(document).ready(function () {
        var img2 = document.getElementById('cat'+_loc2);
        img2.src = 'themes/theshop/img/jumbotron/' + _loc1 + '.jpg';
    });
}
function check(arr,test) {
    var i;
    for (i = 0; i <= arr.length;  i++) {
    if (arr[i] === test) {
        return false;
    }
    }
Comments