Slider - Nefele 4 Harbour

Acceder Darse de alta He olvidado la contraseña

Topic Resolution: Resolved

Etiquetado: Slider

Este debate tiene 7 respuestas, 5 mensajes y ha sido actualizado por última vez el 3 años, 2 meses por Francisco Vital. This post has been viewed 809 times

Mostrando 6 respuestas a los debates

Autor

Entradas

11-10-2020 a las 22:33 #1122

Marcelo Roggeri

Participante

Buenas tardes, estoy implementando un Slyder, el cual quiero que en un movil o tablet no se vea, pero si en monitor o grande (utilizo las 4 mismas constantes)

WITH OBJECT WSlider():New(:WO)
:AddItem("./images/slider/01.jpg",,"SAM","Grilla de Articulos","center","blue-grey darken-4","blue-grey darken-3")
:AddItem("./images/slider/02.jpg",,"SAM","Grilla de Clientes","center","blue-grey darken-4","blue-grey darken-3")
:AddItem("./images/slider/03.jpg",,"SAM","Facturación","center","blue-grey darken-4","blue-grey darken-3")
:aWidth := {0,0,12,12}
//:aWidth[_movil] := 0
//:aWidth[_tablet] := 0
//:aWidth[_monitor] := 12
//:aWidth[_grande] := 12
:nHeight := 600
//:oStyle:cHeight :="80%"
:nTime := 3
:nAnimation := 1
:lIndicators := .f.
:Create()
END

WITH OBJECT WSlider():New(:WO)

:AddItem("./images/slider/01.jpg",,"SAM","Grilla de Articulos","center","blue-grey darken-4","blue-grey darken-3")

:AddItem("./images/slider/02.jpg",,"SAM","Grilla de Clientes","center","blue-grey darken-4","blue-grey darken-3")

:AddItem("./images/slider/03.jpg",,"SAM","Facturación","center","blue-grey darken-4","blue-grey darken-3")

:aWidth := {0,0,12,12}

//:aWidth[_movil] := 0

//:aWidth[_tablet] := 0

//:aWidth[_monitor] := 12

//:aWidth[_grande] := 12

:nHeight := 600

//:oStyle:cHeight :="80%"

:nTime := 3

:nAnimation := 1

:lIndicators := .f.

:Create()

END

Creo que se hace asi, pero me lo sigue mostrando
Saludos

Marcelo

12-10-2020 a las 13:38 #1128

Pedro Amaro
Superadministrador

Efectivamente, es un error que queda resuelto en la próxima versión de Néfele.

Si asignas 0 en _movil no aparece en el tamaño de pantalla de un movil, si lo haces en _tablet no aparece en el tamaño tablet, pero si asignas los dos a 0 no lo hace correctamente, ya lo tenemos resuelto.
12-10-2020 a las 15:10 #1130

Marcelo Roggeri
Participante

Ok muchas gracias

Saludos desde Argetina
14-10-2020 a las 17:45 #1194

Xevi
Participante

¿Como lo haríamos para que las imágenes se "centraran" y ocupasen el espacio del contenedor???

Ya que si tenemos distintas imágenes, con distintos tamaños, unas quedan "cortadas" otras "enormes" y el efecto visual no es "bonito" que digamos.

Alguna propiedad que hace un Resize de la imagen y la adapte a su contenedor???

Un Saludo,

Xevi.
- 14-10-2020 a las 18:35 #1196
  
  Alfredo Sanz
  Superadministrador
  
  1 ejemplo, please

14-10-2020 a las 23:48 #1200

Xevi

Participante

PROCEDURE PruebaWSlider()

   WITH OBJECT TWebPage():New()
      WITH OBJECT WSlider():New(:WO)
         :AddItem( "http://xevicomas.duckdns.org:8069/images/@Soft/Nefele Logo.jpg" )
         :AddItem( "http://xevicomas.duckdns.org:8069/images/@Soft/harbour.png" )
         :aWidth := {4}
         :nHeight := 250
         :nTime := 3
         :nAnimation := 2
         :lIndicators := .f.
         :Create()
      END

      oCgi:SendPage( :Create() )
   END WITH

RETURN

PROCEDURE PruebaWSlider()

WITH OBJECT TWebPage():New()

WITH OBJECT WSlider():New(:WO)

:AddItem( "http://xevicomas.duckdns.org:8069/images/@Soft/Nefele Logo.jpg" )

:AddItem( "http://xevicomas.duckdns.org:8069/images/@Soft/harbour.png" )

:aWidth := {4}

:nHeight := 250

:nTime := 3

:nAnimation := 2

:lIndicators := .f.

:Create()

END

oCgi:SendPage( :Create() )

END WITH

RETURN

La segunda imagen se "recorta" y no se ve la proa ni las letras "ur"

Seria algo como decirle "Imagen adaptate al tamaño del oParent y sin distorsionar la imagen dejando margenes donde haya que dejarlos. En Xailer tenemos la propiedad lAutoFit, creo recordar en una imagen...

Un Saludo,

Xevi.

15-10-2020 a las 00:08 #1209

Alfredo Sanz

Superadministrador

Entiendo.

Para el slider realmente las imágenes son fondos de un div.

Lo más sencillo es que todas las imágenes tengan las mismas dimensiones

De todas formas, se puede hacer retocando el css

   WITH OBJECT TWebPage():New()

      :cCSS += ".img-slider{background-size:contain !important;background-repeat:no-repeat;background-color:white}"
      :cCSS += ".slider .slides{background-color:white}" // y le quitamos el color de fondo de la transición, que queda muy feo

      WITH OBJECT WSlider():New(:WO)
         :AddItem( "http://xevicomas.duckdns.org:8069/images/@Soft/harbour.png" )
         :AddItem( "http://xevicomas.duckdns.org:8069/images/@Soft/Nefele Logo.jpg" )
         :aWidth      := {4}
         :aOffset     := {4}
         :nHeight     := 250
         :nTime       := 5
         :nAnimation  := 2
         :lIndicators := .f.
         :Create()
      END
      
      oCgi:SendPage( :Create() )
   END WITH

RETURN

WITH OBJECT TWebPage():New()

:cCSS += ".img-slider{background-size:contain !important;background-repeat:no-repeat;background-color:white}"

:cCSS += ".slider .slides{background-color:white}" // y le quitamos el color de fondo de la transición, que queda muy feo

WITH OBJECT WSlider():New(:WO)

:AddItem( "http://xevicomas.duckdns.org:8069/images/@Soft/harbour.png" )

:AddItem( "http://xevicomas.duckdns.org:8069/images/@Soft/Nefele Logo.jpg" )

:aWidth := {4}

:aOffset := {4}

:nHeight := 250

:nTime := 5

:nAnimation := 2

:lIndicators := .f.

:Create()

END

oCgi:SendPage( :Create() )

END WITH

RETURN

Esta respuesta fue modificada 4 años, 1 mes por Alfredo Sanz.

19-09-2021 a las 01:58 #1880

Francisco Vital
Participante

Buen dia, que tal

Estoy usando un Slider, el detalle que cambio las imagenes

y siguen saliendo las primeras imagenes que puse.

Es mas la elimino y aun asi siguen saliendo.

Autor

Entradas

Mostrando 6 respuestas a los debates

Debes estar registrado para responder a este debate.