8d65d0ce
 andryeyev
init
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
/**
* cbpBGSlideshow.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
var cbpBGSlideshow = (function() {
var $slideshow = $( '#cbp-bislideshow' ),
$items = $slideshow.children( 'li' ),
itemsCount = $items.length,
$controls = $( '#cbp-bicontrols' ),
navigation = {
$navPrev : $controls.find( 'span.cbp-biprev' ),
$navNext : $controls.find( 'span.cbp-binext' ),
$navPlayPause : $controls.find( 'span.cbp-bipause' )
},
// current item´s index
current = 0,
// timeout
slideshowtime,
// true if the slideshow is active
isSlideshowActive = true,
// it takes 3.5 seconds to change the background image
interval = 8500;
function init( config ) {
// preload the images
$slideshow.imagesLoaded( function() {
if( Modernizr.backgroundsize ) {
$items.each( function() {
var $item = $( this );
$item.css( {'background-image': 'url(' + $item.find( 'img' ).attr( 'src' ) + ')','margin-top':'100px'} );
} );
}
else {
$slideshow.find( 'img' ).show();
// for older browsers add fallback here (image size and centering)
}
// show first item
$items.eq( current ).css( 'opacity', 1 );
// initialize/bind the events
initEvents();
// start the slideshow
startSlideshow();
} );
}
function initEvents() {
navigation.$navPlayPause.on( 'click', function() {
var $control = $( this );
if( $control.hasClass( 'cbp-biplay' ) ) {
$control.removeClass( 'cbp-biplay' ).addClass( 'cbp-bipause' );
startSlideshow();
}
else {
$control.removeClass( 'cbp-bipause' ).addClass( 'cbp-biplay' );
stopSlideshow();
}
} );
navigation.$navPrev.on( 'click', function() {
navigate( 'prev' );
if( isSlideshowActive ) {
startSlideshow();
}
} );
navigation.$navNext.on( 'click', function() {
navigate( 'next' );
if( isSlideshowActive ) {
startSlideshow();
}
} );
}
function navigate( direction ) {
// current item
var $oldItem = $items.eq( current );
if( direction === 'next' ) {
current = current < itemsCount - 1 ? ++current : 0;
}
else if( direction === 'prev' ) {
current = current > 0 ? --current : itemsCount - 1;
}
// new item
var $newItem = $items.eq( current );
// show / hide items
$oldItem.css( 'opacity', 0 );
$newItem.css( 'opacity', 1 );
}
function startSlideshow() {
isSlideshowActive = true;
clearTimeout( slideshowtime );
slideshowtime = setTimeout( function() {
navigate( 'next' );
startSlideshow();
}, interval );
}
function stopSlideshow() {
isSlideshowActive = false;
clearTimeout( slideshowtime );
}
return { init : init };
})();
|
