Définition d'une propriété d'un plugin carroussel

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:

---

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 :

Pièce jointe 505172

Cette instruction fonctionne :

Code:

---

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.

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 ?

Bonjour,

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

Code:

---

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 !

Citation:

---

Envoyé par 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 ?

---

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:

---

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>

---

Pièce jointe 505256

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

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:

---

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:

---

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' }); }); }   }

---

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)

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

Essaye également de te renseigner sur l'utilité du document ready avec jQUERY

Bonjour,

Citation:

---

Je voulais enlever les flèches de navigation uniquement pour les devices inférieurs à 850 px.

---

Pourquoi ne pas traiter cela en CSS via les Media Queries ?

Code:

---

1 2 3 4 5

@media(max-width:850px) { .fotorama__arr { display: none; } }

---