0

Hola tengo una pregunta algo compleja. Cómo sería un código que haga que se carguen random por ejemplo 2 imágenes a la vez en dos partes diferentes de la web.

Es decir que sean random, pero que cada vez que cargues la web salga un grupo de imágenes como 1,2,3,4 en distintas areas y luego que al recargar salgan 5,6,7,8. Es decir por ejemplo que el grupo uno tenga un nombre imágenes 1 y que el grupo dos tenga el nombre imágenes 2. Como las imágenes están en distintas areas creo que tendría que el sitio tener un código en cada area independiente que responda a un código que llame a cada imagen para que sea la que se vea.

Un ejemplo, pero lo que quiero es para varios grupos de imágenes.

<div id="box">
    <a id="a"><img id="image" /></a>
</div>

<script type='text/javascript'> 
var images = 
[
    imageUrlPair = { ImgSrc:"1.jpg", Href:"http://ejemplo 1" },
    imageUrlPair = { ImgSrc:"2.jpg", Href:"http://ejemplo 2" },
    imageUrlPair = { ImgSrc:"3.jpg", Href:"http://ejemplo 3" },
    imageUrlPair = { ImgSrc:"4.jpg", Href:"http://ejemplo 4" },
]

function randImg() {
var size = images.length;
var x = Math.floor(size * Math.random());
var randomItem = images[x];
document.getElementById('image').src = randomItem.ImgSrc;
document.getElementById('a').href = randomItem.Href;
}

randImg();
</script>

Otro ejemplo

<SCRIPT LANGUAGE="javascript">
<!-- 
function makeArray(n) {
this.length = n;
for (var i=1; i<=n; i++) {
this[i] = ""; 
}
return this;
}
var i;
function imagealeatoire() {
i = Math.floor(3 * Math.random() + 1);
return image[i];
}
image = new makeArray(3);
image[1]="image_1.jpg";
image[2]="image_2.jpg";
image[3]="image_3.jpg";
// -->
</SCRIPT>

<SCRIPT language="javascript">document.write("<IMG SRC=" +imagealeatoire() +" WIDTH=200 HEIGHT=200 BORDER=0>");</SCRIPT>

Grupo de imágenes random 1

introducir la descripción de la imagen aquí

Grupo de imágenes random 2

introducir la descripción de la imagen aquí

7
  • Hola. Bienvenido a Stack Overflow en español. Te recomiendo editar la pregunta agregando algo de información como que has probado o que has encontrado por Internet, y sería bueno que realices el recorrido de bienvenida y leer Cómo preguntar. La idea es ofrecer un ejemplo mínimo verificable en todas las preguntas. Commented el 18 may. 2018 a las 6:24
  • Puse un ejemplo en imágenes, espero alguien me ayude. Gracias Commented el 18 may. 2018 a las 6:35
  • Hola Alberto. Lo más importante es haberlo intentado. Sobre tu intento nos contextualizas en los problemas concretos que tienes y sobre ello podemos ayudarte. Si no lo has intentado, investiga y prueba. Después has de editar la pregunta para añadir la informacion que falta segun Cómo preguntar y ejemplo mínimo verificable. Un saludo.
    – lois6b
    Commented el 18 may. 2018 a las 6:49
  • Podrías hacer un array con imágenes y elegir las que muestras con un random. Una vez elegidas, las quitas del array para que en la recarga salgan las otras que no has mostrado la primera vez Commented el 18 may. 2018 a las 6:52
  • @albertoguerra cuando hablamos de ejemplo mínimo verificable, no nos referimos a que nos muestres unos pantallazos de tu pagina. Lo que queremos es que muestres el código que te da error, no comprendes o necesitas cambiar. Como pretendes que te ayuden si no saben que es lo que tienes. Es como ir a echar gasolina sin coche... Commented el 18 may. 2018 a las 6:55

1 respuesta 1

0

el primer array supongo que contiene todas las imágenes posibles, no? Si ese es el caso la posibilidad que tienes primero, localiza cada grupo y guárdalos en un array (cada zona donde se supone que irán los grupos de imágenes sería una posición de ese array). Eso con un querySelector() o querySelectorAll() se hace fácil. Una vez localizadas esas zonas, separa las imágenes (Si quieres que se coloquen de forma aleatoria, pero que los grupos de imágenes sean siempre los mismos) creando arrays de imágenes dentro de otro array. Una vez hecho esto, ya simplemente asigna un grupo de imágenes a una zona de forma aleatoria y rellenalo. Espero que haya sido de ayuda esta respuesta "conceptual".

6
  • La verdad me encantaría hacer lo que me dices, pero no tengo idea de cómo hacer algo así, aunque creo que es la idea Commented el 19 may. 2018 a las 2:20
  • Cuando se llega a ese punto, lo que toca es investigar y aprender más programación, sobre todo desarrollar el pensamiento lógico necesario para programar. Commented el 21 may. 2018 a las 7:09
  • Investigando llegué hasta aquí, pero parece que no llegaré muy lejos :( Creo que me tocará pagarle a alguien por que me haga o ayude con algo así, por que al parecer hasta para los expertos es algo complejo Commented el 22 may. 2018 a las 17:30
  • Se me acaba de ocurrir, y si guardas cada grupo de imágenes en un archivo json, como objetos json (lógicamente), y al cargar la página cargues un archivo u otro de forma aleatoria (creas un array con los nombres de los archivos que tienen esos objetos json). Al elegir de forma aleatoria el nombre ya vas a tener cada vez un grupo aleatorio (dentro de cada grupo las imágenes no son aleatorias, pero al serlo el archivo, es como si lo fuesen), y ya simplemente cagar las imágenes con funciones del DOM (createElement, append, etc) o con jquery ($(idContieneImg).append("crea IMG")), o algo así. Commented el 23 may. 2018 a las 6:21
  • Hola Enrique Manzano veo que tienes una idea interesante sobre esto. Hay alguna manera que te pueda contactar? Puede escribirme a este email. Se lo agradecería mucho [email protected] Commented el 24 may. 2018 a las 2:41

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.