Soporte » Diseño – Temas y plantillas » Como crear un desplegable a una imagen

  • Buenos días:

    Hola muy buenas a todos y gracias de antemano por vuestra colaboración.
    Escribo estas letras para ver si me podeis echar un cable, no soy un experto en la materia ni en definiciones, así que puede que me explique un pelin mal.
    Espero que no.

    He creado un acordeón con unas imágenes dentro de ellas con unas dimensiones parecidas a un rectángulo.
    Con el efecto que si posicionas el ratón encima del rectángulo se amplia dicha imagen o rectángulo. Creo que hasta ahora todo correcto y bastante claro.

    Lo que quiero es que cuando haga clic encima de una imagen o rectángulo aparezca una ventana emergente o desplegable informativo del producto por debajo de dicha imagen o rectángulo seleccionado.
    Dicha ventana o desplegable tendrá 3 casillas o apartados con las palabras de info del producto, características, precio y sus definiciones.

    Esto opción es posible de conseguir con alguna plantilla, plugins o algo que desconozca. También me puede valer sin la opción de crear un acordeón.

    Muchas gracias a todos por vuestra colaboración.
    Un cordial saludo.
    Carlos

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • Buenas @deftones23

    Esto que comentas es un poco intrincado ya que relaciona muchos elementos entre si. Yo como desarrollador lo afrontaría desde un código js.

    Por lo que parece la ventana emergente tendrá mucha información, tanta que parece un producto de woocommerce.

    Con Javascript/jQuery yo haría algo del tipo:
    – Pondría la información extra de manera oculta (display:none) al lado de la imagen.
    -Tendría un layout/overlay de una capa oculta inicialmente que fuera fixed y con una maquetación de imagen a la izquierda y textos a la derecha.
    – Pondría un código javascript poniéndole un evento a la imagen. Algo parecido a:

    $( 'selectordelaimagen' ).click( function(){
      //comportamiento para pasar la información de la imagen (la propia src de la img y el contenido oculto) a la capa oculta que hará de overlay
    });

    – Entonces mostrar esa capa oculta a modo de lightbox

    Espero que con este guión puedas conseugir lo que necesitas, si no deberás buscar en https://es.wordpress.org/plugins/tags/lightbox/ algún plugin que cumpla con tus expectativas, pero por lo que yo sé, no hay ninguno tan específico para lo que necestias.

    Recuerda volver al foro para compartir tus avances y la solución que adoptas, así servirá para otros usuarios que tengan la misma necesidad que tu.

    Salut!

    Iniciador del debate deftones23

    (@deftones23)

    Buenos dias.

    Ante todo muchísimas gracias por tu gran colaboracion @adriandegrafreak.
    Te lo agradezco muchisimo, de verdad.
    Voy a intentarlos a ver si puedo :).
    No prometo naaa, fijo que me cuesta mogollón.

    Un saludo a todos.
    Carlos.

    Espero que encuentres la solución y la compartas con nosotros. Ya sea código que has hecho o el plugin que hayas hecho servir.

    Salut!

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • El debate ‘Como crear un desplegable a una imagen’ está cerrado a nuevas respuestas.