1

OK, I've seen many people struggling and different approaches on how to do this but I've been cracking my head and can't get it done.

I need to implement this photo gallery in a SPFx web part and use it on a modern page.

This is the idea:

<script type="text/javascript" src="../lib/js/external/_oldies/jquery-1.3.min.js"></script>

<script type="text/javascript" src="../lib/js/external/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="../lib/js/external/jquery.mousewheel.min.js"></script>

<script type="text/javascript" src="../lib/js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>
<script type="text/javascript" src="../lib/js/sliderkit/addons/sliderkit.counter.1.0.pack.js"></script>
<script type="text/javascript" src="../lib/js/sliderkit/addons/sliderkit.imagefx.1.0.pack.js"></script>
<script type="text/javascript" src="../lib/js/sliderkit/addons/sliderkit.delaycaptions.1.1.pack.js"></script>

<script type="text/javascript">
    $(window).load(function() {

        $(".delaycaptions-01").sliderkit({
            circular:false,
            mousewheel:false,
            keyboard:true,
            shownavitems:4,
            auto:false,
            panelfxspeed:500,
            delaycaptions:{
                delay:500, 
                position:'bottom',
                transition:'sliding',
                duration:300,
                easing:'easeOutExpo'
            }
        });
    }

</script>

<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-core.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-site.css" media="screen, projection" />


<div class="sliderkit photosgallery-captions delaycaptions-01">
    <div class="sliderkit-nav">
        <div class="sliderkit-nav-clip">
            <ul>
                <li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-01.jpg" alt="[Alternative text]" /></a></li>
                <li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-02.jpg" alt="[Alternative text]" /></a></li>
                <li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/images/photos/mini/sample-03.jpg" alt="[Alternative text]" /></a></li>
        </div>
        <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div>
        <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div>
        <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous photo"><span>Previous photo</span></a></div>
        <div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next photo"><span>Next photo</span></a></div>
    </div>
    <div class="sliderkit-panels">                      
        <div class="sliderkit-panel">
            <a href="../lib/images/photos/sample-01.jpg" title="[title]"><img src="../lib/images/photos/sample-01.jpg" alt="[Alternative text]" /></a>
            <div class="sliderkit-panel-textbox">
                <div class="sliderkit-panel-text">
                    <h4>sample-01.jpg</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
                </div>
                <div class="sliderkit-panel-overlay"></div>
            </div>
        </div>
        <div class="sliderkit-panel">
            <a href="../lib/images/photos/sample-02.jpg" title="[title]"><img src="../lib/images/photos/sample-02.jpg" alt="[Alternative text]" /></a>
            <div class="sliderkit-panel-textbox">
                <div class="sliderkit-panel-text">
                    <h4>sample-02.jpg</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
                </div>
                <div class="sliderkit-panel-overlay"></div>
            </div>
        </div>
        <div class="sliderkit-panel">
            <a href="../lib/images/photos/sample-03.jpg" title="[title]"><img src="../lib/images/photos/sample-03.jpg" alt="[Alternative text]" /></a>
            <div class="sliderkit-panel-textbox">
                <div class="sliderkit-panel-text">
                    <h4>sample-03.jpg</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                </div>
                <div class="sliderkit-panel-overlay"></div>
            </div>
        </div>
    </div>
</div>

I am trying to do things like this:

SPComponentLoader.loadScript('../lib/js/external/_oldies/jquery-1.3.min.js', 
    { globalExportsName: 'jQuery'}).then((jQuery: any): void => {
        SPComponentLoader.loadScript('../lib/js/external/jquery.easing.1.3.min.js', 
         { globalExportsName: 'easing' }).then((jQuery: any): void => {    
          SPComponentLoader.loadScript('../lib/js/external/jquery.mousewheel.min.js', 
           { globalExportsName: 'mousewheel' }).then((jQuery: any): void => {     
            SPComponentLoader.loadScript('../lib/js/sliderkit/jquery.sliderkit.1.9.2.pack.js',
             { globalExportsName: 'sliderkit' }).then((jQuery: any): void => {
              SPComponentLoader.loadScript('../lib/js/sliderkit/addons/sliderkit.counter.1.0.pack.js',
                { globalExportsName: 'counter' }).then((jQuery: any): void => {    
                SPComponentLoader.loadScript('../lib/js/sliderkit/addons/sliderkit.imagefx.1.0.pack.js', 
                 { globalExportsName: 'imagefx' }).then((jQuery: any): void => {     
                  SPComponentLoader.loadScript('../lib/js/sliderkit/addons/sliderkit.delaycaptions.1.1.pack.js',  
                  { globalExportsName: 'delaycaptions' }).then((jQuery: any): void => {      
                    jQuery(".delaycaptions-01").sliderkit({
                        circular:false,
                        mousewheel:false,
                        keyboard:true,
                        shownavitems:4,
                        auto:false,
                        panelfxspeed:500,
                        delaycaptions:{
                            delay:500, // must be equal or higher than panelfxspeed
                            position:'bottom',
                            transition:'sliding',
                            duration:300, // must be less equal or higher than panelfxspeed
                            easing:'easeOutExpo'
                        }
                    });


                  });    
                });    
              });
            });   
          });    
        });
      });

But this is so hard. And it would be so easy if I could do it a as a basic html page...

This is the plugin page:

http://www.stg-online.net/web/script/slider/sliderkit_en.html

Please help

2
  • I got it working. I simplified this using only 2 external libraries instead of 7. It turned out they are not that important. Then I kind followed kin these steps: medium.com/@NetanelBasal/… May 16, 2020 at 22:29
  • I had to change this file: JQuery.d.ts and add this line: sliderkit(options?: any, callback?: Function) : any; May 16, 2020 at 22:29

1 Answer 1

1

Below are the official docs about how to add jquery library to SPFx web part, you may take a reference:

And There is a quick way to add Jquery:

enter image description here

More references:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.