Opacité sélective sur slider jQuery
Bonjour,
Je débute en Javascript, mais j'ai déjà eu l'occasion d'utiliser jQuery pour quelques travaux sur mes sites.
Néanmoins, je suis ici confronté à un problème qui dépasse de loin mes compétences !
Je réalise actuellement un site pour un groupe de musique d'amis, et chaque "page" est en fait un slide.
J'ai réussi à faire en sorte de contrôler le slider avec le menu, et tout va pour le mieux. Une dernière tâche me bloque cependant.
La largeur de mon slider est de 900 px, et mes slides sont de largeur 800px, ce qui laisse donc (volontairement !)100px sur le côté droit (ou gauche sur la dernière slide), laissant apparaître un bout du slide suivant.
Jusque là tout va bien, mais j'aimerais créer une fonction qui applique une opacité de 40% sur tous les slides, sauf l'actif, grâve à la fonction fadeTo...
J'ai donc commencer à modifier le script en ce sens (qui utilise ScrollTo, serialScroll, et localScroll), en appliquant dès le début l'opacité à toutes les div, et en enlevant pour la div #bio (enfin en la passant à 1 au lieu de 0.4).
Je pense qu'ensuite il faut que je créé une fonction, qui sera appelée par l'option OnAfter, qui changerait le paramètre de FadeTo pour enlever l'opcaité UNIQUEMENT sur le slide sélectionné. Mais après plusieurs essais, je n'y arrive pas....
Si quelqu'un pouvais m'aider, me donner une piste, voire le bout de code complet, ça serait merveilleux.
Voici le html (simplifié) :
Code:
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
|
<body>
<div id="page">
<div id="artwork">/>
</div>
<div id="header">
<div class="inner">
<div id="logo">
</div>
<div id="social">
</a>
</div>
<div id="nav">
<a class="b" href="#bio">Bio</a>
<a class="m" href="#media">Media</a>
<a class="g" href="#gigs">Gigs</a>
</div>
</div>
</div>
<div id="main">
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="bio">
<div id="content">
<h2>BIO</h2><p style="padding-right:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="panel" id="media">
<div id="content">
<h2>MEDIA</h2><p style="padding-right:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="panel" id="gigs">
<div id="content">
<h2>GIGS</h2><p style="padding-right:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/jquery.serialScroll-1.2.2-min.js"></script>
<script type="text/javascript" src="js/coda-slider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</body>
</html> |
Le js/coda-slider.js (qui doit tout gérer je pense) :
Code:
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
|
// when the DOM is ready...
$(document).ready(function () {
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
$panels.fadeTo(0, 0.4);
$("#bio").fadeTo(0, 1);
// if false, we'll float all the panels left and fix the width
// of the container
var horizontal = true;
// float the panels left if we're going horizontal
if (horizontal) {
$panels.css({
'float' : 'left',
'position' : 'relative' // IE fix to ensure overflow is hidden
});
// calculate a new width for the container (so it holds all panels)
$container.css('width', $panels[0].offsetWidth * $panels.length);
}
// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');
// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="img/left.png" width="36" height="45" />')
.after('<img class="scrollButtons right" src="img/right.png" width="36" height="45" />');
// handle nav selection
function selectNav() {
$(this)
.parents('#nav:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('#nav').find('a').click(selectNav);
// go find the navigation link that has this target and select the nav
function trigger(data) {
var el = $('#nav').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('#nav a:first').click();
}
// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset. Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ?
$container.css('paddingTop') :
$container.css('paddingLeft'))
|| 0) * -1;
var scrollOptions = {
target: $scroll, // the element that has the overflow
// can be a selector which will be relative to the target
items: $panels,
navigation: '#nav a',
// selectors are NOT relative to document, i.e. make sure they're unique
prev: 'img.left',
next: 'img.right',
// allow the scroll effect to run both directions
axis: 'xy',
onAfter: trigger, // our final callback
offset: offset,
// duration of the sliding effect
duration: 1500,
// easing - can be used with the easing plugin:
// http://gsgd.co.uk/sandbox/jquery/easing/
easing: 'swing'
};
// apply serialScroll to the slider - we chose this plugin because it
// supports// the indexed next and previous scroll along with hooking
// in to our navigation.
$('#slider').serialScroll(scrollOptions);
// now apply localScroll to hook any other arbitrary links to trigger
// the effect
$.localScroll(scrollOptions);
// finally, if the URL has a hash, move the slider in to position,
// setting the duration to 1 because I don't want it to scroll in the
// very first page load. We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
}); |
et le CSS :
Code:
1
2
3
4
5
6
7
8
|
#slider{width:900px;margin:0 auto;position:relative;}
.scroll{height:500px;width:900px;overflow:auto;overflow-x:hidden;position:relative;clear:left;}
.scrollContainer div.panel{height:500px;width:800px;background-image:url(../img/bg2.png);background-repeat:no-repeat;padding:15px;}
.scrollButtons{position:absolute;top:228px;cursor:pointer;z-index:500;}
.scrollButtons.left{left:-45px;z-index:500;}
.scrollButtons.right{right:-45px;z-index:500;}
.opacity {opacity : 0.4;-moz-opacity : 0.4;-ms-filter: "alpha(opacity=40)";} |
Merci d'avance pour toute aide !!
Je reste à votre disposition s'il vous manque des éléments...ou des questions...
Merci encore !
