1

Bueno tengo la etiqueta img y al hacer click en un div con id="btnsiguiente" voy cambiando la ruta del img, hacer esto con javascript es facil si creo un array con las rutas adentro pero si las rutas de las imagenes la tengo en una base de datos como lo haria?

Este es mi codigo javascript:

<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
	<link rel="stylesheet" href="cssstack.css">
</head>
	<script>
		var rutas=["images/img1.jpeg","images/img2.jpeg","images/im3.jpg","images/img4.jpg"];
		var img;
		var x=-1;
		function siguiente()
		{
		
	btnsiguiente=document.getElementById("btnsiguiente");
	
			btnsiguiente.addEventListener("click",siguiente_img,false);
		

		}
		function siguiente_img()
		{
			x++;
			img=document.getElementsByTagName("img");
			img[0].src=rutas[x];
		}
		window.onload=siguiente;
	</script>
<body>
	<div >
	<img src="" width="200px" heigth="300px" />
	</div>
	<div id="btnsiguiente">
	</div>
</body>
</html>

como editaria el script si las rutas las jalo de la base de datos?

4
  • Pues tendrías que pedir las rutas a la base de datos, haciendo una llamada al servidor vía Ajax, y usar los datos de la respuesta para construir las rutas, tal y como haces con Javascript. Aquí lo único que cambia es que los datos hay que ir a buscarlos a otro lado.
    – A. Cedano
    el 19 ene. 2018 a las 14:15
  • ¿De cuántas imágenes estamos hablando? Porque si es un número limitado y relativamente reducido, quizás sería mejor seguir con el array (leyendo los valores de la base de datos).
    – Alvaro Montoro
    el 19 ene. 2018 a las 14:31
  • ese es el problema son mas de 100 el 19 ene. 2018 a las 14:34
  • revisaste ya mi respuesta , dime que resultado te arrojo para saber que debería sugerirte
    – Asney
    el 19 ene. 2018 a las 14:56

1 respuesta 1

0

Puedes usar jquery para eso y mantendrías gran parte de tu código , obteniendo las rutas mediante una petición:

var rutas;
var img;
var x=-1;

$.ajax({
   url:'/ruta_al_server', //cuando haces esta peticion el server te manda el arrglo con las rutas
   type:'POST',
}).done(function(data){ // data trae el arreglo con las rutas
   //aqui le darias los valores a tu misma variable rutas
    rutas = data.datos  // pongo data.datos suponiendo que envias un json {datos:['/r1','/r2',...] }

})

function siguiente()
        {

    btnsiguiente=document.getElementById("btnsiguiente");

            btnsiguiente.addEventListener("click",siguiente_img,false);


        }
        function siguiente_img()
        {
            x++;
            img=document.getElementsByTagName("img");
            img[0].src=rutas[x];
        }
        window.onload=siguiente;

Nota:La petición para traer las rutas la podrías llamar cuando desees podría ser cuando ocurra el onLoad del sitio.

Tu Respuesta

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

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