Discussion :

[Gilles_73]

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 :

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
    <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 :

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
$(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é !

[SpaceFrog]

mais ne fonctionne pas sur les box chargées depuis les pages externes.

Je ne sais pas combien de fois ce sujet à été traité sur ce forum ...

Les attributions de plugins sur les objets se font classiquement dans le ready de la page.
Ainsi tous les éléments PRESENTS dans la page au moment du ready se voient affectés par les attributions scriptées dans le ready.
TOUT ELEMENT CHARGE POSTERIEUREMENT ne bénéficie donc pas des scripts du ready

Solution, repasser une moulinette d'attribution devents et de plugin après chargement des nouveaux elements (dans le callback du load dasn ton cas)
Ou attribuer les evenements dans le ready avec on() ou delegate() (ou anciennement live()) de sorte que les elements ajoutés a postériori heritent des scripts du ready

[Gilles_73]

Je ne sais pas combien de fois ce sujet à été traité sur ce forum ...

Les attributions de plugins sur les objets se font classiquement dans le ready de la page.
Ainsi tous les éléments PRESENTS dans la page au moment du ready se voient affectés par les attributions scriptées dans le ready.
TOUT ELEMENT CHARGE POSTERIEUREMENT ne bénéficie donc pas des scripts du ready

Solution, repasser une moulinette d'attribution devents et de plugin après chargement des nouveaux elements (dans le callback du load dasn ton cas)
Ou attribuer les evenements dans le ready avec on() ou delegate() (ou anciennement live()) de sorte que les elements ajoutés a postériori heritent des scripts du ready

Merci pour ta réponse mais comme je le disais, je débute en javascript et du coup j'ai pas l'expérience pour faire de telles modifications...donc si j'ai bien compris mon animation rollover doit se trouver dans l'index ? et non dans un lien externe ? et ou changer mon code ?