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
