LigthtBox - Nefele 4 Harbour

Acceder Darse de alta He olvidado la contraseña

Etiquetado: LightBox

Este debate tiene 2 respuestas, 2 mensajes y ha sido actualizado por última vez el 3 años, 6 meses por Gabriel Ornelas. This post has been viewed 857 times

Mostrando 2 respuestas a los debates

Autor

Entradas

23-10-2020 a las 08:13 #1364

Gabriel Ornelas

Participante

Encontre esto en la web y funciono perfecto! por si alguien le sirve (Parece que ya existe en nefele pero no se como se llama el control )

//------------------------------------------------------------------------------
//Función principal de la app Web
PROCEDURE MainPage()

   // Comenzamos instanciando la Página Web que queremos crear
   With Object TWebPage():New()
      :lValign:= .T.
      :lContainer:= .T.
      :cCSS   := cCssGaleria()

      AAdd( :aScript, myScript() )

      WITH OBJECT WBevel():New( :WO )
           :cTitle := "<strong>Sugerencias de nuestra cocina</strong>"
           :lShadow     := .T.
           :nStyle      := xc_Row
           :cTitleAlign := xc_Center
           :Create()
      END WITH

      :AddHtml( Galeria() )

      oCgi:SendPage( :Create() )        // Se crea el HTML final y se envía al navegador saliendo del ejecutable CGI

   End With

RETURN

//------------------------------------------------------------------------------
FUNCTION Galeria()
   LOCAL cHtml

   TEXT INTO cHtml
      <div class="row galeria">
         <div class="col s6 m4 l3">
              <div class="material-placeholder">
                   <img src="http://cafeselectocardenas.dynns.com:1080/images/cafe_selecto/1.png" alt="" />
              </div>
         </div>
         <div class="col s6 m4 l3">
              <div class="material-placeholder">
                   <img src="http://cafeselectocardenas.dynns.com:1080/images/cafe_selecto/2.png" alt="" />
              </div>
         </div>
         <div class="col s6 m4 l3">
              <div class="material-placeholder">
                   <img src="http://cafeselectocardenas.dynns.com:1080/images/cafe_selecto/3.png" alt="" />
               </div>
         </div>
         <div class="col s6 m4 l3">
              <div class="material-placeholder">
                  <img src="http://cafeselectocardenas.dynns.com:1080/images/cafe_selecto/4.png" alt="" />
               </div>
         </div>
         <div class="col s6 m4 l3">
              <div class="material-placeholder">
                  <img src="http://cafeselectocardenas.dynns.com:1080/images/cafe_selecto/5.png" alt="" />
               </div>
         </div>
         <div class="col s6 m4 l3">
              <div class="material-placeholder">
                   <img src="http://cafeselectocardenas.dynns.com:1080/images/cafe_selecto/6.png" alt="" />
               </div>
         </div>
         <div class="col s6 m4 l3">
              <div class="material-placeholder">
                   <img src="http://cafeselectocardenas.dynns.com:1080/images/cafe_selecto/7.png" alt="" />
               </div>
         </div>
         <div class="col s6 m4 l3">
              <div class="material-placeholder">
                   <img src="http://cafeselectocardenas.dynns.com:1080/images/cafe_selecto/8.png" alt="" />
               </div>
         </div>
         <div class="col s6 m4 l3">
              <div class="material-placeholder">
                   <img src="http://cafeselectocardenas.dynns.com:1080/images/cafe_selecto/9.png" alt="" />
               </div>
         </div>
      </div>
   ENDTEXT

   RETURN cHtml

//------------------------------------------------------------------------------
FUNCTION cCssGaleria()
   LOCAL cCSS

   TEXT INTO cCSS
        <style>
            .galeria img { box-shadow: 0 8px 10px -4px rgba(0,0,0,.6);border-radius: 15px;}
            .galeria col { margin-bottom: 20px;}
            .galeria img { box-shadow: 0 8px 10px -4px rgba(0,0,0,.6); border-radius: 15px;}
            .galeria .col { margin-bottom: 20px;}

            @media screen and (max-width: 600px){
                 .materialbox-caption {
                      width: 90%;
                 }
            }

            @media screen and (max-width: 992px){
                 .materialbox-caption {
                      width: 70%;
                 }

         </style>
   ENDTEXT

RETURN cCSS

//------------------------------------------------------------------------------
static function myScript()
   local cScript := ""

   TEXT INTO cScript

        document.addEventListener('DOMContentLoaded', () => {
            const imgLightBox = document.querySelectorAll('.materialboxed');
            M.Materialbox.init(imgLightBox, {
            inDuration: 500,
            outDuration: 500 });
            } );

   ENDTEXT

return cScript

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

//------------------------------------------------------------------------------

//Función principal de la app Web

PROCEDURE MainPage()

// Comenzamos instanciando la Página Web que queremos crear

With Object TWebPage():New()

:lValign:= .T.

:lContainer:= .T.

:cCSS := cCssGaleria()

AAdd( :aScript, myScript() )

WITH OBJECT WBevel():New( :WO )

:cTitle := "<strong>Sugerencias de nuestra cocina</strong>"

:lShadow := .T.

:nStyle := xc_Row

:cTitleAlign := xc_Center

:Create()

END WITH

:AddHtml( Galeria() )

oCgi:SendPage( :Create() ) // Se crea el HTML final y se envía al navegador saliendo del ejecutable CGI

End With

RETURN

//------------------------------------------------------------------------------

FUNCTION Galeria()

LOCAL cHtml

TEXT INTO cHtml

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

ENDTEXT

RETURN cHtml

//------------------------------------------------------------------------------

FUNCTION cCssGaleria()

LOCAL cCSS

TEXT INTO cCSS

<style>

.galeria img { box-shadow: 0 8px 10px -4px rgba(0,0,0,.6);border-radius: 15px;}

.galeria col { margin-bottom: 20px;}

.galeria img { box-shadow: 0 8px 10px -4px rgba(0,0,0,.6); border-radius: 15px;}

.galeria .col { margin-bottom: 20px;}

@media screen and (max-width: 600px){

.materialbox-caption {

width: 90%;

}

@media screen and (max-width: 992px){

.materialbox-caption {

width: 70%;

}

</style>

ENDTEXT

RETURN cCSS

//------------------------------------------------------------------------------

static function myScript()

local cScript := ""

TEXT INTO cScript

document.addEventListener('DOMContentLoaded', () => {

const imgLightBox = document.querySelectorAll('.materialboxed');

M.Materialbox.init(imgLightBox, {

inDuration: 500,

outDuration: 500 });

} );

ENDTEXT

return cScript

Saludos!

23-10-2020 a las 12:17 #1371

Alfredo Sanz

Superadministrador

Bien, bien, bien!!

Veo que ya vais haciendo cosicas interesantes.

Me he permitido "nefelizar" un poco tu ejemplo.

Además me has dado un par de ideas nuevas para la nueva versión de Néfele.

Gracias por tu aportación.

PROCEDURE MainPage()
LOCAL n, aFiles := Directory("../htdocs/fotos/*.jpg") // OJO: En Xampp y Wampp la ruta puede variar

   WITH OBJECT TWebPage():New()
      :cBackground  := "https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/v748-toon-63_1_1.jpg?bg=transparent&con=3&cs=srgb&dpr=1&fm=jpg&ixlib=php-3.1.0&q=65&usm=15&vib=3&w=800&s=d98c67df8d5a1bf97c8a99789cb29b7a"
      :cBackgroundSize := "cover"

      WITH OBJECT WBevel():New( :WO )
           :cTitle      := "<strong>Galería de fotos</strong>"
           :lShadow     := .T.
           :nStyle      := xc_Row
           :cTitleAlign := xc_Center
           :oStyle:cBorder_radius := 15
           :oStyle:cMargin_top    := "1.656rem"
           :Create()
      END WITH

      WITH OBJECT WBevel():New(:WO)
         FOR n := 1 TO Len(aFiles)
            WITH OBJECT WImage():New( :WO )
               :aWidth      := {6,4,3}
               :cImage      := "/fotos/" +aFiles[n,1]
               :lResponsive := .t.
               :cClass      += "hoverable"
               :lClickZoom  := .t.
               :oStyle:cBorder_radius := 15
               :oStyle:cMargin_bottom := 20
               :oStyle:cPadding       := 5
               :Create()
            END WIDTH
         NEXT
         :Create()
      END WITH

      oCgi:SendPage( :Create() )        // Se crea el HTML final y se envía al navegador saliendo del ejecutable CGI
   END WITH

PROCEDURE MainPage()

LOCAL n, aFiles := Directory("../htdocs/fotos/*.jpg") // OJO: En Xampp y Wampp la ruta puede variar

WITH OBJECT TWebPage():New()

:cBackground := "https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/v748-toon-63_1_1.jpg?bg=transparent&con=3&cs=srgb&dpr=1&fm=jpg&ixlib=php-3.1.0&q=65&usm=15&vib=3&w=800&s=d98c67df8d5a1bf97c8a99789cb29b7a"

:cBackgroundSize := "cover"

WITH OBJECT WBevel():New( :WO )

:cTitle := "<strong>Galería de fotos</strong>"

:lShadow := .T.

:nStyle := xc_Row

:cTitleAlign := xc_Center

:oStyle:cBorder_radius := 15

:oStyle:cMargin_top := "1.656rem"

:Create()

END WITH

WITH OBJECT WBevel():New(:WO)

FOR n := 1 TO Len(aFiles)

WITH OBJECT WImage():New( :WO )

:aWidth := {6,4,3}

:cImage := "/fotos/" +aFiles[n,1]

:lResponsive := .t.

:cClass += "hoverable"

:lClickZoom := .t.

:oStyle:cBorder_radius := 15

:oStyle:cMargin_bottom := 20

:oStyle:cPadding := 5

:Create()

END WIDTH

:Create()

END WITH

oCgi:SendPage( :Create() ) // Se crea el HTML final y se envía al navegador saliendo del ejecutable CGI

END WITH

Contenido no disponible.
Por favor, acepta las cookies haciendo clic en este aviso

Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.
Esta respuesta fue modificada 3 años, 6 meses por Alfredo Sanz.

23-10-2020 a las 14:57 #1393

Gabriel Ornelas
Participante

Wow! Que sencillo lo hace Nefele. Gracias a ustedes por todo

Autor

Entradas

Mostrando 2 respuestas a los debates

Debes estar registrado para responder a este debate.