OK, I’ve seen many individuals struggling and totally different approaches on how to do that however I have been cracking my head and might’t get it completed.
I must implement this photograph gallery in a SPFx net half and apply it to a contemporary web page.
That is the concept:
<script sort="textual content/javascript" src="../lib/js/exterior/_oldies/jquery-1.3.min.js"></script>
<script sort="textual content/javascript" src="../lib/js/exterior/jquery.easing.1.3.min.js"></script>
<script sort="textual content/javascript" src="../lib/js/exterior/jquery.mousewheel.min.js"></script>
<script sort="textual content/javascript" src="../lib/js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>
<script sort="textual content/javascript" src="../lib/js/sliderkit/addons/sliderkit.counter.1.0.pack.js"></script>
<script sort="textual content/javascript" src="../lib/js/sliderkit/addons/sliderkit.imagefx.1.0.pack.js"></script>
<script sort="textual content/javascript" src="../lib/js/sliderkit/addons/sliderkit.delaycaptions.1.1.pack.js"></script>
<script sort="textual content/javascript">
$(window).load(operate() {
$(".delaycaptions-01").sliderkit({
round:false,
mousewheel:false,
keyboard:true,
shownavitems:4,
auto:false,
panelfxspeed:500,
delaycaptions:{
delay:500,
place:'backside',
transition:'sliding',
period:300,
easing:'easeOutExpo'
}
});
}
</script>
<hyperlink rel="stylesheet" sort="textual content/css" href="../lib/css/sliderkit-core.css" media="display, projection" />
<hyperlink rel="stylesheet" sort="textual content/css" href="../lib/css/sliderkit-demos.css" media="display, projection" />
<hyperlink rel="stylesheet" sort="textual content/css" href="../lib/css/sliderkit-site.css" media="display, 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/pictures/photographs/mini/sample-01.jpg" alt="[Alternative text]" /></a></li>
<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/pictures/photographs/mini/sample-02.jpg" alt="[Alternative text]" /></a></li>
<li><a href="#" rel="nofollow" title="[link title]"><img src="../lib/pictures/photographs/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="Earlier line"><span>Earlier line</span></a></div>
<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Subsequent line"><span>Subsequent line</span></a></div>
<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Earlier photograph"><span>Earlier photograph</span></a></div>
<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Subsequent photograph"><span>Subsequent photograph</span></a></div>
</div>
<div class="sliderkit-panels">
<div class="sliderkit-panel">
<a href="../lib/pictures/photographs/sample-01.jpg" title="Learn how to use jQuery plugins in typescript?"><img src="../lib/pictures/photographs/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/pictures/photographs/sample-02.jpg" title="Learn how to use jQuery plugins in typescript?"><img src="../lib/pictures/photographs/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/pictures/photographs/sample-03.jpg" title="Learn how to use jQuery plugins in typescript?"><img src="../lib/pictures/photographs/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’m making an attempt to do issues like this:
SPComponentLoader.loadScript('../lib/js/exterior/_oldies/jquery-1.3.min.js',
{ globalExportsName: 'jQuery'}).then((jQuery: any): void => {
SPComponentLoader.loadScript('../lib/js/exterior/jquery.easing.1.3.min.js',
{ globalExportsName: 'easing' }).then((jQuery: any): void => {
SPComponentLoader.loadScript('../lib/js/exterior/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({
round:false,
mousewheel:false,
keyboard:true,
shownavitems:4,
auto:false,
panelfxspeed:500,
delaycaptions:{
delay:500, // should be equal or greater than panelfxspeed
place:'backside',
transition:'sliding',
period:300, // should be much less equal or greater than panelfxspeed
easing:'easeOutExpo'
}
});
});
});
});
});
});
});
});
However that is so exhausting. And it might be really easy if I might do it a as a primary html web page…
That is the plugin web page:
http://www.stg-online.web/net/script/slider/sliderkit_en.html
Please assist