Discussion :

[sebgac]

Bonsoir,

Je voulais définir une fonction d'un plugin carroussel fotorama que j'ai trouvé sur le net. Je voulais enlever les flèches de navigation uniquement pour les devices inférieurs à 850 px.

Pour cela, j'ai suivi la doc de cette page : https://fotorama.io/docs/4/options/

Dans mon code javascript, j'ai donc rajouté la fonction suivante :

Code javascript :

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

1
2
3
4
5
6
7
function smallDevWithoutArrows() {
        if (window.matchMedia("(max-width: 850px)").matches) {
            $('.fotorama').fotorama({
                arrows : false
              });
        }
    }

Je pense avoir juste, et pourtant cela ne fonctionne pas. Ce qui est bizarre, c'est lorsque je rentre l'instruction directement dans la console, cela fonctionne parfaitement ... Regardez l'image ci dessous :



Cette instruction fonctionne :

Code javascript :

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

1
2
3
$('.fotorama').fotorama({
                arrows : false
              });

Cela me dit que que .fotorama n'est pas une fonction ... Pourtant je charge bien le script jQuery dans ma page, vu que le carroussel fonctionne parfaitement. J'imagine que j'ai raté un concept mais je ne vois pas quoi.


Mon site : http://photo.sebgac.com

Merci d'avance pour votre aide.

[SpaceFrog]

est tu certain que les chargements sont fait chronologiquement dans le bon ordre ?

le plugin Jquery doit être chargé avant que tu ne l'initialises sur un élément de la page
a quel moment ta fonction est elle lancée ?

[Invité]

Bonjour,

si on regarde dans ton fichier main.js, il doit manquer des :

Code :

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

1
2
3
4
5
$(window).on('load',...
 
$(window).on('resize',...
 
$(window).on( 'load resize',...

Remarque : tu devrais aussi faire un effort pour réduire la taille/poids des images.
Certaines font plus de 1.5Mo !

[sebgac]

Bonjour,

Merci pour ta remarque concernant les photos, c'est une chose que je pense aussi faire, avec le source set, mais cela viendra après, j'essaie de corriger les bugs de fonctionnement.

$(window).on('resize',... // mais où cela manque ? A un moment j'avais rajouté $(document).on('click', '#asie', function () { pour écouter les évenements rajoutés par jQuery. Est-ce que $(window).on('resize',... a quelque chose à voir avec ça ?

j'essaie de faire un truc comme ça :

Code javascript :

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

1
2
3
4
5
6
if (window.matchMedia("(max-width: 850px)").matches) {
            console.log('ARROW3');
            $(document).on('fotorama', function (e, fotorama) {
                fotorama.setOptions({ nav: e.type === 'fotorama:arrows' && 'false' });
            });
        }

sur le modèle d'un script précédent qui fonctionne bien et qui enlève les miniatures en mode plein écran

Code javascript :

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

1
2
3
4
5
6
7
8
function fullscreenWithoutThumbnails() {
        if (window.matchMedia("(max-width: 850px)").matches) {
            $(document).on('fotorama:fullscreenenter fotorama:fullscreenexit', function (e, fotorama) {
                fotorama.setOptions({ nav: e.type === 'fotorama:fullscreenexit' && 'thumbs' });
            });
        }
 
    }

[Invité]

Bon...

Perso, j'utilise Slick Slider.
Voir les démos :

• "Responsive Display", qui permet de définir des break points (Ça évite de se prendre le chou à rajouter des bouts de codes "exotiques" !)
• "Slider Syncing", qui relie 2 sliders (pour avoir des vignettes/thumbs, par exemple)

[sebgac]

Ok, merci, je vais regarder ça. Mais j'aimais bcp le rendu de fotorama, à voir.

[sebgac]

est tu certain que les chargements sont fait chronologiquement dans le bon ordre ?

le plugin Jquery doit être chargé avant que tu ne l'initialises sur un élément de la page
a quel moment ta fonction est elle lancée ?

J'ai essayé de mettre le script juste après celui du plugin de cette façon mais cela ne fonctionne pas pour autant

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
 
<script>
 
$('.fotorama').fotorama({
  arrows: false
});
 
 
</script>

Normalement le script du plugin est bien lancé avant d'évoquer la fonction, donc cela devrait marcher