Cambiar imágenes del HTML con jQuery

publicado por: Anonymous

Necesito que al cargar la pagina cambie las imágenes del HTML por las del array declarado.

Código Javascript:

var productos = new Array(
    "img/minis/afrodita.png",
    "img/minis/arpia.jpg",
    "img/minis/basilisco.jpg",
    "img/minis/caballo.jpg",
    "img/minis/centauro.jpg",
    "img/minis/fenix.jpg",
    "img/minis/gea.jpg",
    "img/minis/grifo.png",
    "img/minis/hidra.gif",
    "img/minis/kraken.jpg",
    "img/minis/medusa.png",
    "img/minis/minotauro.jpg",
    "img/minis/pegaso.jpg",
    "img/minis/poseidon.jpg",
    "img/minis/quimera.jpg",
    "img/minis/satiro.jpg",
    "img/minis/unicornio.jpg"
);
window.onload=function(){
    //Cargar las imágenes en las divisiones
    $.each(productos,function(i,elemento){
        console.log("elemento", elemento);
        //$("#foo0").append("<img src="+ elemento+">" );
        $(".Brand").children().replaceWith("<img src="+ elemento+">" );
        //var htmlString =  $(this).html();

        $(".Brand").width(60).height(25);
        console.log("elemento", elemento);
    });
    //Crear un efecto hover
    $(".Brand").hover(function(){
        $(this).css("opacity", 0.5);
    },
    function(){
        $(this).css("opacity", 1);
    });
    //Cambiar la imagen en el banner
    $(".Brand").on('click', function(){
        t = $(this).find("img").attr("src");
        t = t.replace("img/minis/","");
        p = t.indexOf(".");
        t = t.substring(0,p);
        t = "img/banner/"+t+".jpg";

        console.log("T", t);
        //Desvanece la foto del banner y manda a cambiaFoto
    });
}

Código HTML:

<ul id="foo0">
    <li><div class="Brand"><img src="img/brand01.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand02.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand03.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand04.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand05.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand06.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand07.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand08.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand09.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand10.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand11.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand12.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand13.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand14.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand15.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand16.png" width="60" height="60" alt="Brand" /></div></li>
</ul>

solución

No entiendo el problema, solo es iterar los .Brand y por medio del índice de la iteración obtener una imagen.

$('.Brand img').each(function(i) {
  var image = productos[i];
  if (image) {
    $(this).attr('src', );
  } else {
    $(this).attr('src', 'img/default.png');
  }
});

Así mismo, como ya te recomendaron, es completamente innecesario hacer un efecto en hover usando JavaScript, cuando lo puedes hacer CSS. Ésto incluso podría afectar el rendimiento.

Ésto:

$(".Brand").hover(function(){
  $(this).css("opacity", 0.5);
}, function(){
  $(this).css("opacity", 1);
}

Lo puedes reemplazar fácilmente con:

.Brand:hover { opacity: .5; }

PD: no uses window#onload, tu código se ejecutará solo cuando todo el documento ha sido cargado, incluído scripts, imágenes e iframes, por lo que si tu website tiene una latencia alta, las imágenes tardarán en verse y obtendrás penalización en rendimiento y UX. En su lugar, usa la document#ready the jQuery.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *