0

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>
3
  • 1
    A ver si le entiendo... Quiere cambiar todos los src de los img en su html por los del array? Nada mas?
    – spencer.sm
    Commented el 15 ene. 2017 a las 0:53
  • @spencer.sm Al parecer sí, es eso solo (creo que en vez de javascript lo quiere con jQuery, pero no estoy seguro).
    – user13558
    Commented el 15 ene. 2017 a las 0:54
  • ¿Cual sería el problema que tienes? ¿Que es lo que no esta funcionando? PD: Deberías usar $(function() {}), en lugar de window.onload=function(){}, ya que este último puede ser pisado y por ende nunca se ejecutaría tu código.
    – Marcos
    Commented el 15 ene. 2017 a las 11:29

3 respuestas 3

2

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.

1

Puedes organizar el código de una mejor manera. Si este array de imágenes es estático no veo razón por la cual hacer esto mediante Javascript, simplemente bastaría con cargar las imágenes en sus correspondientes src en el código html.

También hay cosas de estilos que no necesitas hacerlas desde javascript, simplemente define una clase css y asignale el comportamiento que deseas, eso haría la carga de tu código mucho más rápida.

Si estás usando jquery, haz uso de $(document).ready() en vez de window.onload para agilizar un poco las cosas.

Sin embargo, suponiendo que el array de imágenes que usas es dinámico y que de alguna manera el src de estas imágenes cambia; mi sugerencia de estructuración del código sería la siguiente:

$(document).ready(onLoad);

function onLoad() {
  // Cargar las imágenes al cargar la página:
  loadImages();

  $('ul#images').on('click', 'li.brand', function() {
    var basename = $(this).find('img').attr('base-name');
    var banner = 'img/banner/' + basename + '.jpg'; // Suponiendo que todas son .jpg
    console.log(banner);
  });

  // Aca iría cualquier otra cosa que quieras
  // hacer cuando la página cargue...
}

function loadImages() {
  getImages().then(function(source) {
    source.images.map(function(image) {
      var parts = image.split('.');
      return {
        base: source.baseUrl,
        name: parts[0],
        ext: parts[1]
      };
    }).forEach(function(src) {
      var li = $('<li>', { class: 'brand' });
      li.append(createImageFromSrc(src));
      $('ul#images').append(li);
    });
  });
}

function createImageFromSrc(source) {
  return $('<img>', {
    'src': source.base + source.name + source.ext,
    'base-name': source.name,
    'alt': 'brand'
  });
}

// Obtener las imagenes de alguna forma asíncrona:
function getImages() {
  return new Promise(function(done) {
    // Aqui deberías hacer la típica llamada ajax a alguna API de imágenes
    // El siguiente código es simplemente para cuestiones prácticas...
    var source = {
      baseUrl: '/img/minis/',
      images: [
        'afrodita.png',
        'arpia.jpg',
        'basilisco.jpg',
        'caballo.jpg',
        'centauro.jpg',
        'fenix.jpg',
        'gea.jpg',
        'grifo.png',
        'hidra.gif',
        'kraken.jpg',
        'medusa.png',
        'minotauro.jpg',
        'pegaso.jpg',
        'poseidon.jpg',
        'quimera.jpg',
        'satiro.jpg',
        'unicornio.jpg'
      ]
    };

    done(source);
  });
}
ul.images li.brand:hover {
  opacity: 0.5;
}
<ul id="images" class="images"></ul>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

2
  • "suponiendo que el array de imágenes que usas es dinámico y que de alguna manera el src de estas imágenes cambia". Tu método getImages solo devuelve una promesa con las mismas imágenes siempre, allí no hay dinamismo en absoluto, pura asincronía, que no es lo mismo. Algo realmente dinámico sería obtener las imágenes de una API, que siempre cambiarán (como por ejemplo Pinterest).
    – gugadev
    Commented el 15 ene. 2017 a las 12:32
  • Eso es obvio, tan solo es una forma de ejemplificar que dentro de la promesa se escribiría el código pertinente a la obtención de las imágenes de manera asíncrona, típicamente una llamada ajax y luego resolver la promesa una vez las imágenes se encuentren disponibles. Commented el 15 ene. 2017 a las 16:41
0

Yo usaría algo asi...

var divs = document.getElementsByClassName('Brand');

for(var i = 0; i < divs.length; i++){
    var img = divs[i].firstChild.src = productos[i];
}

https://jsfiddle.net/dotspencer/kee7t2hL/

1
  • gracias por tu comentario, creo que me falto explicar que lo que estoy haciendo me imprime siempre la prime imagen o la ultima el numero de item impresos es el correcto. mas no la imagen <br>img1 <br>img1 <br>img1 <br>img1 pero en consola si aparece los nombres de los archivos correctos. Commented el 24 feb. 2017 a las 18:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.