Discussion :

[cccb24]

Bonjour à tous,

j'ai découvert une animation jquery que je souhaiterais utiliser, celle qui permet de changer d'image au survol du numéro.
Seulement, n'ayant que très peu de notions en javascript, j'aimerais votre aide pour savoir quel code est utilisé.

http://www.salutpublic.be/projets/francoise-berlanger

Merci de votre aide

[Spartacusply]

Il n'y pas d'animation jquery spécifique pour le changement d'image.

Cette animation n'est créée qu'avec la fonctionnnalité "hover" (au survol) de jquery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$("img").hover( function() {
        // Faire quelque chose quand tu entres dans l'image avec ta souris
       // Dans ton exemple, jouer sur la propriété css "opacity"
}, 
function() {
        // Faire quelque chose quand tu en sors
)

[cccb24]

Merci de votre réponse,

mais je pense que vous parlez des thumbnails en bas de page.
Je parle du slideshow avec la liste de numéro sous l'id

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

id="slideShowCount"

Ca fait pas mal de temps que je cherche comment faire cette animation sans succès.

Merci

[SpaceFrog]

Oui c'est bien ça ...
tout se trouve dans les fonctions nextSlide() et gotoSlide()

avec l'attribution / suppression d'un class 'selectedTab';

[cccb24]

Il s'agit donc de ce code ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(function() {
$("a[href^='http:']").not("[href*='salutpublic.be']").attr('target','_blank');
$('#slideshowitems li').hide().css({position:'absolute',width:'500px'});
var currentSlide = -1;
var prevSlide = null;
var slides = $('#slideshowitems li');
var interval = null;
var FADE_SPEED = 0;
$("#slideshowitems li").each(function() {
imageHeight = $("#slideshowitems img").attr("height");
imageWidth = $("#slideshowitems img").attr("width");
$("#slideshowitems").css("height", imageHeight +"px");
$("#slideshowitems").css("width", imageWidth +"px");
});
var html = '<ul id="slideShowCount">'
for (var i = slides.length - 1;i >= 0 ; i--){
html += '<li id="slide'+ i+'" class="slide"><span>'+(i+1)+'</span></li>' ;
}
html += '</ul>';
$('#credits').after(html);
$('#slideshow').bind("click",{index:i},function(){
nextSlide(); });
for (var i = slides.length - 1;i >= 0 ; i--){
$('#slide'+i).bind("mouseover",{index:i},function(event){
currentSlide = event.data.index;
gotoSlide(event.data.index);
});
};
if (slides.length <= 1){
$('.slide').hide();
}
nextSlide();
function nextSlide (){
if (currentSlide >= slides.length -1){
currentSlide = 0;
}else{
currentSlide++
}
gotoSlide(currentSlide);
}
function gotoSlide(slideNum){
if (slideNum != prevSlide){
if (prevSlide != null){
$(slides[prevSlide]).stop().hide();
$('#slide'+prevSlide).removeClass('selectedTab');
}
$('#slide'+currentSlide).addClass('selectedTab');
$('#slide'+slideNum).addClass('selectedTab');
$('#slide'+prevSlide).removeClass('selectedTab');
$(slides[slideNum]).stop().show(FADE_SPEED,function(){
$(this).css({opacity:1});
if(jQuery.browser.msie){
this.style.removeAttribute('filter');
}
});
prevSlide = currentSlide;
}
}
var upHeight = $("#row_up div.col_left").height();
var downHeight = $("#row_down div.col_left").height();
$("#row_up div.col_right").css('height', upHeight +"px");
$("#row_down div.col_right").css('height', downHeight +"px");
var uuu = $("#index").offset().top - $(window).scrollTop();
var $window = $(window);
var top = uuu - 190;
var bottom = uuu + 1000;
var openstate = 'open';
$window.wheel(function () {
if (($window.scrollTop() > top ) && ($window.scrollTop() < bottom )) {
if (openstate == 'closed') {
}
else {
var divHeight = $("#content-area").height();
$('#links').hide();
$('.title').hide();
$.tooltip.block();
$("#main").animate({"marginTop": -divHeight - 53 + "px"}, 500, function() {
$.tooltip.block();
});
$("html,body").scrollTo( 0, 500);//specify an easing equation
openstate = 'closed';
$(this).unbind(event);
}
}
});
$('#site-name span, #index h2.subtitle span').click(function () {
if (openstate == 'closed') {
if (($window.scrollTop() == 0 )) {
}
else {
$("html,body").animate({scrollTop: 0}, 900, "easeOutExpo");
}
}
else {
var divHeight = $("#content-area").height();
$('#links').hide();
$('.title').hide();
$("#main").animate({"marginTop": -divHeight - 53 + "px"}, 900, "easeOutExpo");
$("html,body").animate({scrollTop: 0}, 900, "easeOutExpo");
openstate = 'closed';
}
});
});

[SpaceFrog]

un partie de ce code ...
J'ai comme l'impression que tu vas essayer de tout copier en block en espérant que ça fasse pareil sur ton site ????

Essaye de comprends le fonctionnement, il n'est pas très complexe ! il ajoute et retire juste une class qui fait apraitre ou disparaite l'image, regarde dans le css .selectedTab il doit y avoir un display: block ? sachant que par defaut les elements sont en display none ...