You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
4.5 KiB
76 lines
4.5 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>LayerSlider API demo</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
|
<link rel="stylesheet" href="../documentation/assets/css/doc.css">
|
|
<link rel="stylesheet" href="../documentation/assets/css/font.css">
|
|
<link href="http://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet" type="text/css">
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">
|
|
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
|
|
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
|
|
<!--[if lt IE 9]>
|
|
<script src="../documentation/assets/js/html5.js"></script>
|
|
<![endif]-->
|
|
|
|
<!-- LayerSlider stylesheet -->
|
|
<link rel="stylesheet" href="../layerslider/css/layerslider.css" type="text/css">
|
|
<!-- External libraries: jQuery & GreenSock -->
|
|
<script src="../layerslider/js/jquery.js" type="text/javascript"></script>
|
|
<script src="../layerslider/js/greensock.js" type="text/javascript"></script>
|
|
<!-- LayerSlider script files -->
|
|
<script src="../layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
|
|
<script src="../layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
|
|
|
|
</head>
|
|
<body class="nobg">
|
|
<div id="slider-wrapper">
|
|
<div id="layerslider" style="width:1280px;height:720px;max-width:1280px;">
|
|
<div class="ls-slide" data-ls="slidedelay:4500; transition2d: all;">
|
|
<img src="sliderimages/bg1.jpg" class="ls-bg" alt="Slide background"/>
|
|
</div>
|
|
<div class="ls-slide" data-ls="slidedelay:3300; transition2d: all;">
|
|
<img src="sliderimages/bg41.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:-200px;left:-78px;white-space: nowrap;" data-ls="offsetxin:0;durationin:3600;easingin:easeOutQuad;rotatein:-35;scalexin:2;scaleyin:2;offsetxout:0;durationout:1500;rotateout:35;scalexout:2;scaleyout:2;" src="sliderimages/bokeh.jpg" alt="Bokeh"><img class="ls-l" style="top:81px;left:434px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;easingin:easeOutQuart;fadein:false;rotatein:20;scalexin:1.2;scaleyin:1.2;offsetxout:0;offsetyout:bottom;durationout:1000;fadeout:false;rotateout:-10;" src="sliderimages/tucan.png" alt="Tucan"><img class="ls-l" style="top:254px;left:634px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;easingin:easeOutQuart;fadein:false;rotatein:20;scalexin:1.2;scaleyin:1.2;offsetxout:0;offsetyout:bottom;durationout:1000;fadeout:false;" src="sliderimages/brench.png" alt="Brench">
|
|
</div>
|
|
<div class="ls-slide" data-ls="slidedelay:2000; transition2d: all;">
|
|
<img src="sliderimages/bg7a.jpg" class="ls-bg" alt="Slide background"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="example-wrapper">
|
|
<div id="example">
|
|
<section>
|
|
<h4>API demo</h4>
|
|
<p>
|
|
We would like to show you of the API of LayerSlider WP. You can see in the log window (below the slider) which API function called.
|
|
</p>
|
|
<p class="c-api i">
|
|
</p>
|
|
<p>
|
|
<a href="../documentation/documentation.html#slider-examples">back to examples</a>
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Initializing the slider -->
|
|
<script>
|
|
jQuery("#layerslider").layerSlider({
|
|
twoWaySlideshow: true,
|
|
skin: 'glass',
|
|
hoverPrevNext: false,
|
|
cbInit: function(element) { jQuery('.c-api').append( jQuery('<span>function cbInit() called</span><br>' ) ); } ,
|
|
cbStart: function(data) { jQuery('.c-api').append( jQuery('<span>function cbStart() called</span><br>' ) ); },
|
|
cbStop: function(data) { jQuery('.c-api').append( jQuery('<span>function cbStop() called</span><br>' ) ); },
|
|
cbPause: function(data) { jQuery('.c-api').append( jQuery('<span>function cbPause() called (pauseOnHover)</span><br>' ) ); },
|
|
cbAnimStart: function(data) { jQuery('.c-api').append( jQuery('<span>function cbAnimStart() called, current slide is: '+data.curLayerIndex+', next slide is: '+data.nextLayerIndex+'</span><br>' ) ); },
|
|
cbAnimStop: function(data) { jQuery('.c-api').append( jQuery('<span>function cbAnimStop() called</span><br>' ) ); },
|
|
cbPrev: function(data) { jQuery('.c-api').append( jQuery('<span>function cbPrevt() called</span><br>' ) ); },
|
|
cbNext: function(data) { jQuery('.c-api').append( jQuery('<span>function cbNext() called</span><br>' ) ); },
|
|
skinsPath: '../layerslider/skins/'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|