Infinite scroll et rollover
Bonjour
J’ai un site pratiquement finalisé mais je n’arrive pas à résoudre deux problèmes en javascript et n’ayant pas acquis assez de compétences dans ce langage (avant de me mettre au html5, css et jquery, je faisais essentiellement du flash) , c’est pourquoi je sollicite votre aide.
Mon site se compose d’un index et de pages externes, et à l’intérieur de ces pages des« box images ». Les pages externes se trouvent dans un dossier nommé pages, mes images dans un dossier images et l’index se trouve à la racine du site.
http://gillesn.perso.sfr.fr/smash/index.html
Via le script jquery isotope infinite scroll, les box des pages externes se chargent dans mon index et ce, dans un container. Tout fonctionne très bien sauf sous safari mobile ou les images de mes box ne s’affichent pas.
J’ai bien essayé dans les pages externes de changer le chemin source de mes images :
../images/img_xl.jpg au lieu de images/img_xl.jpg
Mais lorsque je change ce chemin, ça marche en effet dans safari mais plus dans les navigateurs desktop !
Et de toute façon, la logique voudrait que le chemin soit images/img_xl.jpg puisque les box sont chargées dans l’index.
A moins de mettre toutes mes pages externes à la racine du site, je n’ai pas de solution
Ci-dessous le code javascript :
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
| <script>
$(function(){
var $container = $('#container_box');
$container.isotope({
itemSelector : '.box_s,.box_m,.box_l,.box_xl',
transformsEnabled: false
});
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box_s,.box_m,.box_l,.box_xl', // selector for all items you'll retrieve
loading: {
finishedMsg: '',
img: 'images/loader.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}
);
});
</script> |
Mon second problème, c'est l’animation rollover sur mes box. J’utilise un script qui fonctionne très bien sur les box présentes dans mon index mais ne fonctionne pas sur les box chargées depuis les pages externes.
Le script est chargé depuis un lien externe mais même en plaçant ce script à l’intérieur même de mon index, j’ai le même résultat.
Le code javascript :
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
| $(document).ready(function() {
//*** Rollover effect box xl ***//
$('#container_box #box_picture_xl').append('<div class="overlay_xl"></div>');
$('#container_box #box_picture_xl').append('<div class="overlayPicto"></div>');
$('#container_box #box_picture_xl').hover(function() {
$(this).children('.overlay_xl').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);
},
function() {
$(this).children('.overlay_xl').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);
});
});
$(document).ready(function() {
//*** Rollover effect box xl ***//
$('#container_box #box_picture_l').append('<div class="overlay_l"></div>');
$('#container_box #box_picture_l').append('<div class="overlayPicto"></div>');
$('#container_box #box_picture_l').hover(function() {
$(this).children('.overlay_l').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);
},
function() {
$(this).children('.overlay_l').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);
});
});
$(document).ready(function() {
//*** Rollover effect box xl ***//
$('#container_box #box_picture_m').append('<div class="overlay_m"></div>');
$('#container_box #box_picture_m').append('<div class="overlayPicto"></div>');
$('#container_box #box_picture_m').hover(function() {
$(this).children('.overlay_m').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);
},
function() {
$(this).children('.overlay_m').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);
});
});
$(document).ready(function() {
//*** Rollover effect box xl ***//
$('#container_box #box_picture_s').append('<div class="overlay_s"></div>');
$('#container_box #box_picture_s').append('<div class="overlayPicto"></div>');
$('#container_box #box_picture_s').hover(function() {
$(this).children('.overlay_s').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);
},
function() {
$(this).children('.overlay_s').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);
});
}); |
Merci d'avance pour votre aide car je suis vraiment bloqué !
