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
|
// INDEX (ANYTHINGSLIDER)
if($('#banner #slides aside').length>0){
$('#banner .dots ul').remove();
$('#banner #slides > aside').show();
$('#banner #slides').anythingSlider({
width : 1231, //1454// Override the default CSS width
height : 328, // Override the default CSS height
expand : false, // If true, the entire slider will expand to fit the parent element
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
showMultiple : false, // Set this value to a number and it will show that many slides at once
theme : 'default', // Theme name - adds a class name to the base element "anythingSlider-{theme}" so the loaded theme will work.
startPanel : 1, // This sets the initial panel
changeBy : 1, // Amount to go forward or back when changing panels.
hashTags : false, // Should links change the hashtag in the URL?
infiniteSlides : true, // if false, the slider will not wrap
enableKeyboard : false, // if false, keyboard arrow keys will not work for the current panel.
buildArrows : false, // If true, builds the forwards and backwards buttons
buildNavigation : true, // If true, builds a list of anchor links to link to each panel
enableNavigation : true, // if false, navigation links will still be visible, but not clickable.
toggleControls : false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
appendControlsTo : $('#banner .dots'), // A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null
enablePlay : false, // if false, the play/stop button will still be visible, but not clickable.
autoPlay : true, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
autoPlayLocked : false, // If true, user changing slides will not stop the slideshow
startStopped : false, // If autoPlay is on, this can force it to start stopped
pauseOnHover : true, // If true & the slideshow is active, the slideshow will pause on hover
stopAtEnd : false, // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
playRtl : false, // If true, the slideshow will move right-to-left
delay : 10000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
resumeDelay : 0, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
animationTime : 1000, // How long the slideshow transition takes (in milliseconds)
easing : "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
maxOverallWidth : 32766, // Max width (in pixels) of combined sliders (side-to-side); set to 32766 to prevent problems with Opera
onSlideBegin : function(event, slider){
if(slider.$targetPage.text().indexOf("Site does matter")!= -1){
$('#banner #boy').delay(1000).show().animate({left:346,opacity:1}, 1000, "easeOutExpo");
}else if(slider.$currentPage.text().indexOf("Site does matter")!= -1){
$('#banner #boy').animate({left:600,opacity:0}, 1000, "easeOutExpo", function(){
$(this).hide();
});
}
}
});
$('#banner #slides').anythingSliderFx({
inFx : {
'.slide1 h2' : { left : '0px', duration: 800, easing : 'easeOutExpo' },
'.slide1 h3' : { left : '0px', duration: 1200, easing : 'easeOutExpo' },
'.slide2 h2' : { left : '0px', duration: 800, easing : 'easeOutExpo' },
'.slide2 h3' : { left : '0px', duration: 1000, easing : 'easeOutExpo' },
'.slide2 figure' : { top : '0px', duration: 1200, easing : 'easeOutExpo' },
'.slide3 h2' : { left : '0px', duration: 800, easing : 'easeOutExpo' },
'.slide3 figure' : { top : '0px', duration: 1000, easing : 'easeOutExpo' },
'.slide3 h3' : { top : '0px', duration: 1200, easing : 'easeOutExpo' }
},
outFx : {
'.slide1 h2' : { left : '1231px', duration: 1200, easing : 'easeOutExpo' },
'.slide1 h3' : { left : '1231px', duration: 800, easing : 'easeOutExpo' },
'.slide2 h2' : { left : '1231px', duration: 1200, easing : 'easeOutExpo' },
'.slide2 h3' : { left : '1231px', duration: 1000, easing : 'easeOutExpo' },
'.slide2 figure' : { top : '328px', duration: 800, easing : 'easeOutExpo' },
'.slide3 h2' : { left : '1231px', duration: 1200, easing : 'easeOutExpo' },
'.slide3 figure' : { top : '328px', duration: 1000, easing : 'easeOutExpo' },
'.slide3 h3' : { top : '328px', duration: 800, easing : 'easeOutExpo' }
}
});
$("#banner .previous a").click(function(){
$('#banner #slides').data('AnythingSlider').goBack(true);
return false;
});
$("#banner .next a").click(function(){
$('#banner #slides').data('AnythingSlider').goForward(true);
return false;
});
} |
superbe slide animé
Répondre avec citation
Partager