Skip to content

Commit

Permalink
file arrangement
Browse files Browse the repository at this point in the history 
move api-event-handling.js,
api-play-pause-playto-goto-next-prev-autoplay-append-remove-reload-properties-destroy.js
  • Loading branch information
jssor committed Feb 4, 2018
1 parent f428a50 commit fa9b4f7
Show file tree
Hide file tree
Showing 9 changed files with 419 additions and 417 deletions.
7 changes: 4 additions & 3 deletions .gitattributes
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,10 @@
# Code Language Spec
demos/* linguist-documentation
demos-jquery/* linguist-documentation
examples/* linguist-documentation
examples-jquery/* linguist-documentation
# examples/* linguist-documentation
# examples-jquery/* linguist-documentation
skin/* linguist-documentation
transitions/* linguist-documentation
img/* linguist-vendored
svg/* linguist-vendored
svg/* linguist-vendored
*.html linguist-documentation
248 changes: 3 additions & 245 deletions examples-jquery/api-event-handling.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,251 +8,6 @@

<!-- #region Jssor Slider Begin -->
<!-- Source: https://www.jssor.com -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {

var jssor_1_SlideshowTransitions = [
{ $Duration: 500, $Delay: 30, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 2049, $Easing: $Jease$.$OutQuad },
{ $Duration: 500, $Delay: 80, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Easing: $Jease$.$OutQuad },
{ $Duration: 1000, x: -0.2, $Delay: 40, $Cols: 12, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Assembly: 260, $Easing: { $Left: $Jease$.$InOutExpo, $Opacity: $Jease$.$InOutQuad }, $Opacity: 2, $Outside: true, $Round: { $Top: 0.5 } },
{ $Duration: 2000, y: -1, $Delay: 60, $Cols: 15, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Easing: $Jease$.$OutJump, $Round: { $Top: 1.5 } },
{ $Duration: 1200, x: 0.2, y: -0.1, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $Jease$.$InWave, $Top: $Jease$.$InWave, $Clip: $Jease$.$OutQuad }, $Round: { $Left: 1.3, $Top: 2.5 } }
];

var jssor_1_options = {
$AutoPlay: 1,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};

var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

//#region event handling

//$JssorSlider$.$EVT_PARK
function JssorSliderParkEventHandler(slideIndex, fromIndex) {
//fires when carousel stopped sliding and parked at current slide
//slideIndex: the index of current slide
//fromIndex: the index of previous slide

var args = [slideIndex, fromIndex];
console.log("$JssorSlider$.$EVT_PARK args: " + args.join(","));
}

//$JssorSlider$.$EVT_CLICK
function JssorSliderClickEventHandler(slideIndex, event) {
//slideIndex: the index of slide which is clicked
//event: native event fired by browser

var args = [slideIndex, "event"];
console.log("$JssorSlider$.$EVT_CLICK args: " + args.join(","));
}

//$JssorSlider$.$EVT_MOUSE_ENTER
function JssorSliderMouseEnterEventHaldler() {
//fires on mouse enter
console.log("$JssorSlider$.$EVT_MOUSE_ENTER");
}

//$JssorSlider$.$EVT_MOUSE_LEAVE
function JssorSliderMouseLeaveEventHandler() {
//fires on mouse leave
console.log("$JssorSlider$.$EVT_MOUSE_LEAVE");
}

//$JssorSlider$.$EVT_DRAG_START
function JssorSliderDragStartEventHandler(position, virtualPosition, event) {
//position: real position of the carousel
//virtualPosition: virtual position of the carousel
//event: native event fired by browser

var args = [position, virtualPosition, "event"];
console.log("$JssorSlider$.$EVT_DRAG_START args: " + args.join(","));
}

//$JssorSlider$.$EVT_DRAG_END
function JssorSliderDragEndEventHandler(position, virtualPosition, startPosition, virtualStartPosition, event) {
//position: real position of the carousel
//startPosition: real position that drag starts at
//virtualPosition: virtual position of the carousel
//virtualStartPosition; virtual position that drag starts at
//event: native event fired by browser

var args = [position, virtualPosition, startPosition, virtualStartPosition, "event"];
console.log("$JssorSlider$.$EVT_DRAG_END args: " + args.join(","));
console.log("$LastDragSucceeded: " + jssor_1_slider.$LastDragSucceeded());
}

//$JssorSlider$.$EVT_SWIPE_START
function JssorSliderSwipeStartEventHandler(position, virtualPosition) {
//position: real position of the carousel
//virtualPosition: virtual position of the carousel

var args = [position, virtualPosition];
console.log("$JssorSlider$.$EVT_SWIPE_START args: " + args.join(","));
}

//$JssorSlider$.$EVT_SWIPE_END
function JssorSliderSwipeEndEventHandler(position, virtualPosition) {
//position: real position of the carousel
//virtualPosition: virtual position of the carousel

var args = [position, virtualPosition];
console.log("$JssorSlider$.$EVT_SWIPE_END args: " + args.join(","));
}

//$JssorSlider$.$EVT_LOAD_START
function JssorSliderLoadStartEventHandler(slideIndex) {
//fires before image load
//slideIndex: the index of slide

var args = [slideIndex];
console.log("$JssorSlider$.$EVT_LOAD_START args: " + args.join(","));
}

//$JssorSlider$.$EVT_LOAD_END
function JssorSliderLoadEndEventHandler(slideIndex) {
//fires after image load
//slideIndex: the index of slide

var args = [slideIndex];
console.log("$JssorSlider$.$EVT_LOAD_END args: " + args.join(","));
}

//$JssorSlider$.$EVT_FREEZE
function JssorSliderFreezeEventHandler() {
//fires on slider freeze
console.log("$JssorSlider$.$EVT_FREEZE");
}

//$JssorSlider$.$EVT_POSITION_CHANGE
function JssorSliderPositionChangeEventHandler(position, fromPosition, virtualPosition, virtualFromPosition) {
//fires continuously while carousel sliding
//position: current position of the carousel
//fromPosition: previous position of the carousel
//virtualPosition: current virtual position of the carousel
//virtualFromPosition: previous virtual position of the carousel

var args = [position, fromPosition, virtualPosition, virtualFromPosition];
console.log("$JssorSlider$.$EVT_POSITION_CHANGE args: " + args.join(","));
}

//$JssorSlider$.$EVT_STATE_CHANGE
function JssorSliderStateChangeEventHandler(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) {
//given a slide parked, the life cycle of current slide is as below, progressBegin --> idleBegin --> idleEnd --> progressEnd
//this event fires at any state of 'progressBegin', 'idleBegin', 'idleEnd' and 'progressEnd'
//slideIndex: the index of slide
//progress: current time (in milliseconds) in the whole process
//progressBegin: the begining of the whole process (generally, starts to play slideshow and caption)
//idleBegin: comes to the idle period, will wait for a period which is specified by option '$Idle'
//idleEnd: the idle period is over, plays the rest caption
//progressEnd: the whole process is completed

//tipical usage
if (progress == progressEnd) {
//the animation of current slide is completed
}
else if (progress == idleEnd) {
//the idle period of current slide is over
}
else if (progress == idleBegin) {
//comes to the idle period
}
else if (progress == progressBegin) {
//the animation of current slide is at the beginning
}
else if (progress < 0) {
//the animation of current slide is aborted, the progress value is negative only in this case
var realProgress = -progress - 1;
}

var args = [slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd];
console.log("$JssorSlider$.$EVT_STATE_CHANGE args: " + args.join(","));
}

//$JssorSlider$.$EVT_PROGRESS_CHANGE
function JssorSliderProgressChangeEventHandler(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) {
//this event fires continuously within the process of current slide
//tipical usage
var progressString = Math.round(progress / progressEnd * 100) + "%";

var args = [slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd];
console.log("$JssorSlider$.$EVT_PROGRESS_CHANGE args: " + args.join(","));
}

//$JssorSlider$.$EVT_SLIDESHOW_START
function JssorSliderSlideshowStartEventHandler(slideIndex, progress, progressBegin, slideshowBegin, slideshowEnd, progressEnd) {
//within the whole process of a slide, there may be slideshow to run
//this event fires when slideshow begin

var args = [slideIndex, progress, progressBegin, slideshowBegin, slideshowEnd, progressEnd];
console.log("$JssorSlider$.$EVT_SLIDESHOW_START args: " + args.join(","));
}

//$JssorSlider$.$EVT_SLIDESHOW_END
function JssorSliderSlideshowEndEventHandler(slideIndex, progress, progressBegin, slideshowBegin, slideshowEnd, progressEnd) {
//within the whole process of a slide, there may be slideshow to run
//this event fires when slideshow end

var args = [slideIndex, progress, progressBegin, slideshowBegin, slideshowEnd, progressEnd];
console.log("$JssorSlider$.$EVT_SLIDESHOW_END args: " + args.join(","));
}

//#region listen jssor slider events

jssor_1_slider.$On($JssorSlider$.$EVT_PARK, JssorSliderParkEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_CLICK, JssorSliderClickEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_MOUSE_ENTER, JssorSliderMouseEnterEventHaldler);
jssor_1_slider.$On($JssorSlider$.$EVT_MOUSE_LEAVE, JssorSliderMouseLeaveEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_DRAG_START, JssorSliderDragStartEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_DRAG_END, JssorSliderDragEndEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_SWIPE_START, JssorSliderSwipeStartEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_SWIPE_END, JssorSliderSwipeEndEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_LOAD_START, JssorSliderLoadStartEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_LOAD_END, JssorSliderLoadEndEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_FREEZE, JssorSliderFreezeEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_POSITION_CHANGE, JssorSliderPositionChangeEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_STATE_CHANGE, JssorSliderStateChangeEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_PROGRESS_CHANGE, JssorSliderProgressChangeEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_SLIDESHOW_START, JssorSliderSlideshowStartEventHandler);
jssor_1_slider.$On($JssorSlider$.$EVT_SLIDESHOW_END, JssorSliderSlideshowEndEventHandler);

//#endregion

//#region unlisten jssor slider events

//jssor_1_slider.$Off($JssorSlider$.$EVT_CLICK, JssorSliderClickEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_DRAG_START, JssorSliderDragStartEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_DRAG_END, JssorSliderDragEndEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_LOAD_START, JssorSliderLoadStartEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_LOAD_END, JssorSliderLoadEndEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_MOUSE_ENTER, JssorSliderMouseEnterEventHaldler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_MOUSE_LEAVE, JssorSliderMouseLeaveEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_PARK, JssorSliderParkEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_POSITION_CHANGE, JssorSliderPositionChangeEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_PROGRESS_CHANGE, JssorSliderProgressChangeEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_SLIDESHOW_START, JssorSliderSlideshowStartEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_SLIDESHOW_END, JssorSliderSlideshowEndEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_STATE_CHANGE, JssorSliderStateChangeEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_SWIPE_START, JssorSliderSwipeStartEventHandler);
//jssor_1_slider.$Off($JssorSlider$.$EVT_SWIPE_END, JssorSliderSwipeEndEventHandler);

//#endregion

//#endregion
});
</script>
<style>
/*jssor slider loading skin spin css*/
.jssorl-009-spin img {
Expand Down Expand Up @@ -337,5 +92,8 @@
</div>
</div>
<!-- #endregion Jssor Slider End -->
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/jssor.slider.min.js"></script>
<script src="api-event-handling.js"></script>
</body>
</html>
Loading

0 comments on commit fa9b4f7

Please sign in to comment.