Resize Jquery d'un slider

Version imprimable

Bonjour,

Je viens de développer le nouveau site de l'agence dans laquelle je travail, http://www.infra-red.be.
Il y a un slideshow sur la page d'accueil et pour des raisons de visibilité, il se redimensionne pour des résolutions plus petites.
Ceci est fait en jquery et fonctionne parfaitement...sur firefox seulement.

Le problème est que le bloc image se redimensionne correctement ainsi que la première image au chargement de la page.
Les photos qui "glissent" ensuite dans le slider ne sont pas redimensionnées par contre.
Et le plus étrange est que si vous allez sur une autre page puis que vous retourner sur l'accueil (ou que vous re-cliquez sur le lien accueil directement), tout fonctionne parfaitement dans n'importe quel navigateur...
Je suppose donc qu'il s'agit d'un problème de chargement du script mais je ne trouve aucune solution.

Voici le script de redimension :
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 $(document).ready(function() { function imageresize() { var contentwidth = $('html').width(); if ((contentwidth) < '1400'){ $( ".resizeme" ).aeImageResize({ height: 400, width: 650 }); $('.beeCodes-general-frame').css({"width":"650px"}); $('.beeCodes-general-frame').css({"height":"303px"}); $('.beeCodes-slider').css({"width":"650px"}); $('.beeCodes-slider').css({"height":"303px"}); $('.beeCodes-hover-2').css({"width":"650px"}); $('.beeCodes-hover-2').css({"height":"303px"}); $('.beeCodes-content-scroll').css({"width":"650px"}); $('.beeCodes-content-scroll').css({"height":"303px"}); $('.beeCodes-slider-item').css({"width":"1610px"}); $('.beeCodes-slider-item').css({"margin-left":"-805px"}); $('.beeCodes-slider-frame-in').css({"width":"650px"}); $('.link-hide').css({"width":"650px"}); $('.link-hide').css({"height":"303px"}); /*$('.beeCodes-left-frame').css({"padding-right":"350px"}); $('.beeCodes-right-frame').css({"padding-left":"350px"});*/ } } imageresize();//Triggers when document first loads $(window).bind("resize", function(){//Adjusts image when browser resized imageresize(); }); });
Et le code qui lie mon image au script :

Code:

$_slider_image .= '<img src="'. $thumbnail[0] .'" width="'. $thumbnail[1] .'" height="'. $thumbnail[2] .'" class="resizeme" >';

Si vous pouviez m'aider à trouver un solution se serai extra.

Merci

Bonsoir

Je vous suggère d'essayer :

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
<script>
    $(function(){
        // le dom est prêt mais pas les images
 
    });
 
    $(window).load(function(){
        // le dom est prêt, les images sont chargées et la page est complète.
 
        // $_slider_image .= '<img src="'. $thumbnail[0] .'" width="'. $thumbnail[1] .'" height="'. $thumbnail[2] .'" class="resizeme" >';
 
        function imageresize(){
            var contentwidth = $("body").innerWidth();
 
            if ((contentwidth) < '1400'){ 
                $( ".resizeme" ).aeImageResize({ height: 400, width: 650 }); 
 
                $('.beeCodes-general-frame').css({"width":"650px"}); 
                $('.beeCodes-general-frame').css({"height":"303px"}); 
 
                $('.beeCodes-slider').css({"width":"650px"}); 
                $('.beeCodes-slider').css({"height":"303px"}); 
 
                $('.beeCodes-hover-2').css({"width":"650px"}); 
                $('.beeCodes-hover-2').css({"height":"303px"}); 
 
                $('.beeCodes-content-scroll').css({"width":"650px"}); 
                $('.beeCodes-content-scroll').css({"height":"303px"}); 
 
                $('.beeCodes-slider-item').css({"width":"1610px"}); 
                $('.beeCodes-slider-item').css({"margin-left":"-805px"}); 
 
                $('.beeCodes-slider-frame-in').css({"width":"650px"}); 
 
                $('.link-hide').css({"width":"650px"}); 
                $('.link-hide').css({"height":"303px"}); 
 
                // $('.beeCodes-left-frame').css({"padding-right":"350px"}); 
                // $('.beeCodes-right-frame').css({"padding-left":"350px"});
            }  
        } 
 
        imageresize(); // Triggers when document first loads     
 
        $(window).resize(function(){ // Adjusts image when browser resized 
            imageresize(); 
        });
    });
</script>

05/07/2011, 11h42
InfraRed

Bonjour,

Merci pour cette solution.
Mais malheureusement elle ne fonctionne pas non plus...

De plus, j'ai du remplacer le

Code:

$(window).load(function(){

par

Code:

$(document).ready(function() {

car sans cela, le script ne fonctionnait pas du tout pour le redimensionnement.
Je ne sais pas si cela joue sur le bon fonctionnement de votre code ?
05/07/2011, 22h02
danielhagnoul

Bonsoir

Je viens de jeter un coup d'oeil rapide sur les codes de votre page de test et je trouve des scripts à foison éparpillé partout dans le HTML.

Dans ces conditions, je comprends mieux votre dernier message, je ne peux rien faire pour vous.
06/07/2011, 09h59
InfraRed

Bonjour,

Les scripts éparpillés un peu partout dans le code vient du faite que nous avons acheter un thème worpress pour avoir accès à certaines fonctionnalités et donc que la structure de base était déjà ainsi...

N'y a-t-il vraiment rien à faire pour se problème de chargement du script ?

Pouvez-vous aussi m'expliquer pourquoi lorsque l'on (re-)clique que le lien "Home" (ou qu'on change de page et qu'on reviens sur l'accueil), le script fonctionne parfaitement ?
C'est un mystère que je ne comprends vraiment pas...

Merci