HTML - Galerias con css

Pos: 53

Val: 23

Galerias con css

Publicado por Gustavo (9 intervenciones) el 28/11/2020 16:53:53

Buenos días a todos

Les explico lo que necesito hacer

Tengo 25 paginas de una misma categoría que tienen un carousel que muestra 5 imagenes.

Lo que quiero es armar una clase o algo que sea similar que me permita llamar de una de estas paginas a otra donde se encuentren alojados todos los grupos de imagenes de esta forma si cambio en esta pagina las imagenes no tendria que hacerlo en cada una de las 25 (no se si es la mejor opcion), que me permita hacer lo siguiente
Grupo 1

<div class="grupo1">

    <img style="width:293px; height:156px;" src="images/imagen 1.jpg" >

    <img style="width:293px; height:156px;" src="images/imagen2.jpg">

    <img style="width:293px; height:156px;" src="images/imagen33jpg">

    <img style="width:293px; height:156px;" src="images/imagen4.jpg">

    <img style="width:293px; height:156px;" src="images/imagen5.jpg">

</div>

<div class="grupo2">

    <img style="width:293px; height:156px;" src="images/imagen 6.jpg" >

    <img style="width:293px; height:156px;" src="images/imagen7.jpg">

    <img style="width:293px; height:156px;" src="images/imagen8jpg">

    <img style="width:293px; height:156px;" src="images/imagen9.jpg">

    <img style="width:293px; height:156px;" src="images/imagen10.jpg">

</div>

<div class="grupo3">

    <img style="width:293px; height:156px;" src="images/imagen11.jpg" >

    <img style="width:293px; height:156px;" src="images/imagen12.jpg">

    <img style="width:293px; height:156px;" src="images/imagen13jpg">

    <img style="width:293px; height:156px;" src="images/imagen14.jpg">

    <img style="width:293px; height:156px;" src="images/imagen15.jpg">

</div>

De esta manera en las diferentes paginas podría llamar a los diferentes grupos y de esta manera mostrar diferentes imagenes solo cambiando en la pagina donde estan alojadas las imagenes las mismas, rotando los grupos cuando yo quisiera

Espero su ayuda muchas gracias

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 1.453

Galerias con css

Publicado por Joel (460 intervenciones) el 29/11/2020 09:20:15

Hola Gustavo, no me queda claro que quieres hacer... quieres mostrar un enlace aleatorio a una de tus 25 paginas? o quieres cambiar las imagenes en todos los archivos?

Nos puedes comentar con mas detalle?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 53

Val: 23

Galerias con css

Publicado por Gustavo (9 intervenciones) el 01/12/2020 21:27:40

Hola Joel

Trato de explicartelo, tengo una web de cursos, en la cual cuento con 25 paginas que tienen un carrousel de 5 imagenes, hoy por hoy si quiero cambiar una imagen o un grupo de imagenes voy a la pagina en cuestion y las cambio, este carrousel se repite con las mismas imagenes en otras paginas, para que sea mas claro con 25 paginas de cursos las cuales tienen 5 imagenes de otros cursos en un carrousel que hacen referencia a esas paginas, 5x5=25

Lo que yo quería es armar una pagina que contenga los cinco grupos de imagenes y poder llamarlos desde una clase o algo así de manera que si quiero cambiar el grupo5 de imagenes que aparece en las paginas 1,3, 12 y 20 solo tenga que cambiarlo en esa pagina donde estan agrupados y y no tener que ir a la 1,3, 12 y 20 a cambiar el mismo set de imagenes en cada una

Espero haberte sido un poco mas claro

Valora esta respuesta

Comentar

Pos: 53

Val: 23

Galerias con css

Publicado por Gustavo (9 intervenciones) el 02/12/2020 02:03:19

Joel, estaba mal enfocada mi pregunta

Lo que necesito es lo siguiente:
Tengo un carrusel vertical que muestra 5 imágenes , lo que necesitaría es que ese carrusel, se nutra de una lista de 50 imágenes obteniendo 5 diferentes cada vez que refresques la pagina.

Para ser mas claro, tengo una web de cursos online, en la pagina del curso que seleccionaste te aparece un carrousel con 5 cursos diferentes al que seleccionaste, dado que son 30 paginas de cursos tengo que cargar este carrusel en cada pagina tratando de mostrar 5 cursos diferentes en cada pagina, lo que quisiera hacer es llamar a una funcion cada vez que alguien abra una pagina que le muestre 5 cursos del listado de 30, a su vez dicha imagen debería estar acompañada por un link al curso y un texto

Hoy como te explicaba lo cargo en forma manual
<img style="width:293px; height:156px;" src="images/diplomaturas/diplomatura derecho ambiental.jpg" >
<li ><a href="diplomatura_derecho_ambiental.html">Diplomatura en Derecho Ambiental</a></li>

asi cargo 5 imagenes por cada pagina, si por ejemplo incorporo otro curso tendría que entrar a cambiar en algunas para que aparezca el nuevo curso, lo que pretendo es que al agregar este nuevo curso a la lista les aparezca dentro de estos 5 que te decía

El carrousel funciona perfecto, necesito una funcion que se encuentre en otra pagina que me traiga estas cinco imagenes con su respectivo texto como esta arriba que el carrousel, los haría pasar uno por uno en un div que ya tengo implementado

Si se te ocurre como hacerlo te lo voy a agradecer

Saludos

Valora esta respuesta

Comentar

Pos: 1

Val: 1.453

Galerias con css

Publicado por joel (460 intervenciones) el 02/12/2020 08:42:52

Hola Gustavo, por lo que entiendo te serviría que hubiera un array con todas las imágenes, cursos y enlace, y te devolviera cada vez que lo llamas un array con 5 de esos arrays aleatoriamente para que tu pudieras montar el carrusel con JS?

Esta función te puede servir para que te devuelve los cinco valores aleatorios sin repetirse: https://www.lawebdelprogramador.com/codigo/JavaScript/5322-Numeros-aleatorios-sin-repetir-en-JavaScript.html

Valora esta respuesta

Comentar

Pos: 53

Val: 23

Galerias con css

Publicado por Gustavo (9 intervenciones) el 02/12/2020 22:03:12

Joel ante todo gracias por tu ayuda te muestro lo que pude armar no soy experto en javascript (para nada)

El codigo que te paso tiene dos funcionalidades diferentes, basicamente lo que necesito es alimentar al carrousel que se encuentra mas abajo de 5 imagenes con sus textos y links el carrousel funciona perfecto, la parte de arriba es lo que necesito resolver

En el ejemplo que te muestro obtengo una imagen aleatoria no he logrado agregarle texto ni un vinculo todavía, necesito obtener al azar o sea al recargar la pagina 5 que serían las que alimentarían al carrousel, de esta forma cada vez que se recargue la pagina obtendria 5 imagenes diferentes de un total de 30 o mas

Necesito que los datos que se encuentran en el carrousel, sean exactos, la imagen tiene un texto que te lleva a una pagina

A su vez el ideal sería que la parte de arriba la pueda llamar desde otra pagina asi no tengo que cargar las 30 imagenes en cada pagina, siendo mas directo lo que pretendo hacer es lo siguiente

llamar a una funcion imagenes aleatorias que estaría en otra pagina que me traiga 5 imagenes con sus respectivos textos asociados y sus url

Te muestro el codigo

Este codigo lo obtuve en internet y me muestra una imagen al azar cada vez que recargo la pagina, yo necesito 5 con sus url y sus textos
De todas maneras no consegui pasarle la variable al carrousel, todavía

<!DOCTYPE html>

<link href="css/2-vertical.css" rel="stylesheet">

<head>

<script type="text/javascript">

enlace = new Array();

enlace[0] = '<a href="URL_ENLACE1"><img src="images/0.jpg"/></a>';

enlace[1] = '<a href="URL_ENLACE1"><img src="images/1.jpg"/></a>';

enlace[2] = '<a href="URL_ENLACE2"><img src="images/2.jpg"/></a>';

enlace[3] = '<a href="URL_ENLACE3"><img src="images/3.png"/></a>';

enlace[4] = '<a href="URL_ENLACE3"><img src="images/4.jpg"/></a>';

enlace[30] = '<a href="URL_ENLACE3"><img src="images/30.jpg"/></a>';

aleatorio = Math.random() * (enlace.length);

aleatorio = Math.floor(aleatorio);

document.write(enlace[aleatorio]);

v = (enlace[aleatorio])

</script>

Aca estaría la galería que debería recibir 5 imagenes aleatorias, con un título y una url para que al hacer click pueda direccionarte a esa pagina

<div class="s-wrap"><div class="s-move">

  <div class="v-wrap"><div class="v-move">

      <div class="v-slide">

        <img img style="width:293px; height:156px;" src="images/cursos/0.jpg" >

              <li class="active"><a href="#">1</a></li>

      </div>

      <div class="v-slide">

        <img img style="width:293px; height:156px;" src="images/cursos/1.jpg" >

              <li class="active"><a href="#">1</a></li>

      </div>

      <div class="v-slide">

        <img img style="width:293px; height:156px;" src="images/cursos/21.jpg" >

              <li class="active"><a href="#">1</a></li>

      </div>

      <div class="v-slide">

        <img img style="width:293px; height:156px;" src="images/cursos/3.jpg" >

              <li class="active"><a href="#">1</a></li>

      </div>

      <div class="v-slide">

        <img img style="width:293px; height:156px;" src="images/cursos/4.jpg" >

              <li class="active"><a href="#">1</a></li>

      </div>

    </div>

</div>

</div>

</body>

</html>

Mil gracias

Valora esta respuesta

Comentar

Pos: 1

Val: 1.453

Galerias con css

Publicado por joel (460 intervenciones) el 04/12/2020 11:10:52

Te he preparado un código de ejemplo... haber si te sirve:
https://www.lawebdelprogramador.com/codigo/JavaScript/6754-Mostrar-cinco-imagenes-aleatorias-diferentes-cada-vez-que-inicie-la-pgina.html

Valora esta respuesta

Comentar

Pos: 53

Val: 23

Galerias con css

Publicado por Gustavo (9 intervenciones) el 04/12/2020 13:41:30

Buen día Joel
Muy bueno el codigo, solo me restarían dos detalles para terminarlo.
Necesito que el texto que acompaña a la imagen, aparezca debajo de la misma, y que sea un vinculo a una url y lo segundo esto es por desconocimiento, como hago para pasarle dichas imagenes al carrousel que te había mostrado anteriormente?, o sea no me queda claro como sacar la variable fuera del script y que me la tome el carrousel

Mil gracias por tu ayuda, has resuelto en gran parte mi problema

Saludos

Valora esta respuesta

Comentar

Duda de tablas

duda código html-css