how can i embed flickit with sb ?

Just starting out? Need help? Post your questions and find answers here.
skinkairewalker
Posts: 120
Joined: Tue Jun 14, 2016 7:17 pm

how can i embed flickit with sb ?

Post by skinkairewalker »

hello everyone !!

i would like some help to embed a JS library to SB

how can i use this > https://flickity.metafizzy.co/#initialize-with-jquery on sb ?
skinkairewalker
Posts: 120
Joined: Tue Jun 14, 2016 7:17 pm

Re: how can i embed flickit with sb ?

Post by skinkairewalker »

i am trying append this html code :
(source > https://bxslider.com/install/)

Code: Select all

<html>
<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.slider').bxSlider();
    });
  </script>

</head>
<body>

  <div class="slider">
    <div>I am a slide.</div>
    <div>I am another slide.</div>
  </div>

</body>
</html>

using this way in spiderbasic :

Code: Select all

Procedure.i WindowElement(Window, UseJquery.b=#True)
  Protected winObject=WindowID(Window) 
  
  !return (v_winobject && v_winobject.element)? v_usejquery? $(v_winobject.element):v_winobject.element:null; 
EndProcedure

Procedure dominsert(window.i, value.s)
  Protected windowObject=WindowElement(window) 
  
  ! var selector = v_windowobject.find('.spiderwindow-content') 
  ! selector.append(v_value)  
EndProcedure

Procedure Main(URL$, Success)
    Debug "Script URL: " + URL$
    Debug "Loading status: " + Success
    
    
    OpenWindow(0, 0, 0, 360, 80, "Led Display", #PB_Window_ScreenCentered)
    
    str.s = "<div class='slider'>"+#CRLF$
    str = str + "<div>I am a slide.</div>"+#CRLF$
    str = str + "<div>I am another slide.</div>"+#CRLF$
    str = str + "</div>"+#CRLF$
    
    dominsert(0, str)
    
    !$(document).ready(function(){
    !  $('.slider').bxSlider();
    !});
    
  EndProcedure
  
  Procedure loadjs(URL$, Success)
    
    LoadScript("https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js", @Main())
    
  EndProcedure  

  LoadScript("https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css", @Main(), #PB_Script_CSS)

but dont works ... someone know a working way ?
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: how can i embed flickit with sb ?

Post by Peter »

Hello skinkairewalker,

You got a typo in your code. You do not call the procedure loadjs(). Here is the code as I would write it:

Code: Select all

EnableExplicit

Enumeration
  #Window
  #Container
EndEnumeration

Procedure Main()
  
  Protected HTML.s
  Protected GID
  
  OpenWindow(#Window, 0, 0, 360, 200, "Led Display", #PB_Window_ScreenCentered)
  
  ContainerGadget(#Container, 0, 0, WindowWidth(#Window), WindowHeight(#Window)) : CloseGadgetList()
  
  HTML = "<div class='slider'>" + #CRLF$ +
         "  <div style='height:150px'>I am a slide.</div>" + #CRLF$ +
         "  <div style='height:150px'>I am another slide.</div>" + #CRLF$ +
         "</div>" + #CRLF$
  
  GID = GadgetID(#Container)
  
  ! $(v_gid.div).append(v_html);
  
  ! $(document).ready(function(){
  !   $('.slider').bxSlider();
  ! });
  
EndProcedure

Procedure JsLoaded(URL.s, Success)
  If Success
    Main()
  Else
    Debug "Something has gone wrong. Couldn't load '" + URL + "'"
  EndIf
EndProcedure

Procedure CssLoaded(URL.s, Success)
  If Success
    LoadScript("https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js", @JsLoaded(), #PB_Script_JavaScript)
  Else
    Debug "Something has gone wrong. Couldn't load '" + URL + "'"
  EndIf
EndProcedure

LoadScript("https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css", @CssLoaded(), #PB_Script_CSS)
Greetings ... Peter
skinkairewalker
Posts: 120
Joined: Tue Jun 14, 2016 7:17 pm

Re: how can i embed flickit with sb ?

Post by skinkairewalker »

thanks !! this works fine ..
skinkairewalker
Posts: 120
Joined: Tue Jun 14, 2016 7:17 pm

Re: how can i embed flickit with sb ?

Post by skinkairewalker »

i am trying add another carousel called https://kenwheeler.github.io/slick/ , but when i call function show this error >https://prnt.sc/rc7jq3

this is a SB code >

Code: Select all

EnableExplicit

ExamineDesktops()
Global deskwidth.i = DesktopWidth(0)
Global deskheight.i = DesktopHeight(0)

Enumeration
  #Window
  #Container
EndEnumeration

Procedure Main()
 
  Protected HTML.s
  Protected GID
 
  OpenWindow(#Window, 0, 0, deskwidth, 600, "Led Display", #PB_Window_ScreenCentered)
 
  ContainerGadget(#Container, 0, 0, WindowWidth(#Window), WindowHeight(#Window)) : CloseGadgetList()
 
  HTML = "<div class='slider'>" + #CRLF$ +
         "  <div>your content</div>" + #CRLF$ +
         "  <div>your content</div>" + #CRLF$ +
         "  <div>your content</div>" + #CRLF$ +
         "</div>" + #CRLF$
 
  GID = GadgetID(#Container)
 
  ! $(v_gid.div).append(v_html);
 
  !$(document).ready(function(){
  !    $('.slider').slick();
  !  });
 
EndProcedure

Procedure JsLoaded(URL.s, Success)
  If Success
    Main()
  Else
    Debug "Something has gone wrong. Couldn't load js'" + URL + "'"
  EndIf
EndProcedure

Procedure CssLoaded3(URL.s, Success)
  If Success
    LoadScript("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js", @JsLoaded(), #PB_Script_JavaScript)
  Else
    Debug "Something has gone wrong. Couldn't load 2'" + URL + "'"
  EndIf
EndProcedure

Procedure CssLoaded2(URL.s, Success)
  If Success
    LoadScript("https://code.jquery.com/jquery-migrate-1.4.1.min.js", @CssLoaded3(), #PB_Script_JavaScript)
  Else
    Debug "Something has gone wrong. Couldn't load 2'" + URL + "'"
  EndIf
EndProcedure

Procedure CssLoaded1(URL.s, Success)
  If Success
    LoadScript("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css", @CssLoaded2(), #PB_Script_CSS)
  Else
    Debug "Something has gone wrong. Couldn't load 1'" + URL + "'"
  EndIf
EndProcedure

LoadScript("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css", @CssLoaded1(), #PB_Script_CSS)
do you know how can i fix it ?
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: how can i embed flickit with sb ?

Post by Peter »

Code: Select all

EnableExplicit

ExamineDesktops()
Global deskwidth.i = DesktopWidth(0)
Global deskheight.i = DesktopHeight(0)

Enumeration
  #Window
  #Container
EndEnumeration

Procedure Main()
  
  Protected HTML.s
  Protected GID
  
  OpenWindow(#Window, 0, 0, deskwidth, 600, "Led Display", #PB_Window_ScreenCentered)
  
  ContainerGadget(#Container, 0, 0, WindowWidth(#Window), WindowHeight(#Window)) : CloseGadgetList()
  
  HTML = "<div class='slider'>" + #CRLF$ +
         "  <div>your content1</div>" + #CRLF$ +
         "  <div>your content2</div>" + #CRLF$ +
         "  <div>your content3</div>" + #CRLF$ +
         "</div>" + #CRLF$
  
  GID = GadgetID(#Container)
  
  ! $(v_gid.div).append(v_html);
  
  !$(document).ready(function(){
  !    $('.slider').slick();
  !  });
  
EndProcedure

Procedure CssLoaded(URL.s, Success)
  If Success
    ! require(["https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"], function() {
    Main()
    ! });
  Else
    Debug "Something has gone wrong. Couldn't load '" + URL + "'"
  EndIf
EndProcedure

LoadScript("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css", @CssLoaded(), #PB_Script_CSS)
skinkairewalker
Posts: 120
Joined: Tue Jun 14, 2016 7:17 pm

Re: how can i embed flickit with sb ?

Post by skinkairewalker »

Peter wrote:

Code: Select all

EnableExplicit

ExamineDesktops()
Global deskwidth.i = DesktopWidth(0)
Global deskheight.i = DesktopHeight(0)

Enumeration
  #Window
  #Container
EndEnumeration

Procedure Main()
  
  Protected HTML.s
  Protected GID
  
  OpenWindow(#Window, 0, 0, deskwidth, 600, "Led Display", #PB_Window_ScreenCentered)
  
  ContainerGadget(#Container, 0, 0, WindowWidth(#Window), WindowHeight(#Window)) : CloseGadgetList()
  
  HTML = "<div class='slider'>" + #CRLF$ +
         "  <div>your content1</div>" + #CRLF$ +
         "  <div>your content2</div>" + #CRLF$ +
         "  <div>your content3</div>" + #CRLF$ +
         "</div>" + #CRLF$
  
  GID = GadgetID(#Container)
  
  ! $(v_gid.div).append(v_html);
  
  !$(document).ready(function(){
  !    $('.slider').slick();
  !  });
  
EndProcedure

Procedure CssLoaded(URL.s, Success)
  If Success
    ! require(["https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"], function() {
    Main()
    ! });
  Else
    Debug "Something has gone wrong. Couldn't load '" + URL + "'"
  EndIf
EndProcedure

LoadScript("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css", @CssLoaded(), #PB_Script_CSS)
thanks you very much Peter
Post Reply