Recharger jQuery Carrousel sur la fenêtre de redimensionnement pour modifier l'orientation de la verticale à l'horizontale

Je suis de la création d'une galerie, d'un réactif de lay-out - je suis en utilisant jQuery Manèges d'Équitation pour les vignettes.

Lorsque la fenêtre est redimensionnées à une taille inférieure à 1024px, l'orientation du carrousel doit changer de la verticale à l'horizontale ...

Je suis en train de faire comme ceci:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({
    vertical: $(window).width() > 1008,
    scroll: 3,
  });
});
</script>

... la JS simplement les crochets d'une classe, mais il ne veut pas le faire si vous redimensionnez la fenêtre du navigateur par glisser-déposer - vous avez besoin de rafraîchir la page.

Est-il un moyen de détruire le script et de le ré-initialiser à la volée?

Solution Ajoutée avec exemple de travail.

OriginalL'auteur Jayx | 2012-06-28

4

Veuillez vérifier de Travail exmpale: http://codebins.com/bin/4ldqpba/1/Jcarousel%20vertical%20on%20resize
Testé dans tous les navigateurs et fonctionne parfaitement bien. bounty est le mien 🙂
Dans l'exemple que j'ai donner seuil largeur 350 vous pouvez le tester en redimensionnant le volet de résultats, et dès que vous commencez à havin barre de défilement horizontale, il sera convertie à la verticale.

1 problème possible en fonction de vos besoins, si vous ahve tout des gestionnaires sur les images qu'ils auront disparu après la modification de l'affichage. la solution pour cela est de conclure votre #mycarousel dans un div et utiliser Jquery délégué pour gérer les événements sur l'emballage donc pas de problème avec les événements aussi.
Laissez-moi savoir si vous venez dans cette situation.

Code suivant est exactement selon votre besoin.

Lorsque la fenêtre est redimensionnées à une taille inférieure à 1024px, l'orientation du carrousel doit changer à partir de la verticale à l'horizontale .

qui est revers formulaire de l'exemple, comme pour moi, il ne fait plus de sens que si la largeur est inférieure à rendre à la verticale.
```
jQuery(document).ready(function() {
    var widthCheck = 1008;
    var resizeTimer = null,
        verticalFlg = $(window).width() > widthCheck;
    var obj = jQuery('#mycarousel').clone();
    $('#mycarousel').jcarousel({
        vertical: verticalFlg,
        scroll: 2
    });
    jQuery(window).resize(function() {
        resizeTimer && clearTimeout(resizeTimer); //Cleraring old timer to avoid unwanted resize calls.
        resizeTimer = setTimeout(function() {
            var flg = ($(window).width() > widthCheck);
            if (verticalFlg != flg) {
                verticalFlg = flg;
                $('#mycarousel').closest(".jcarousel-skin-tango").replaceWith($(obj).clone());
                $('#mycarousel').jcarousel({
                    vertical: verticalFlg,
                    scroll: 2
                });
            }
        }, 200);
    });
})
```
On y est presque - en fait, il fonctionne à 100%, mais je suis de jQuery erreurs (pas affecter la fonctionnalité). jCarousel: Non largeur/hauteur de l'ensemble des éléments. Cela va provoquer une boucle infinie. L'abandon... ... je suis aussi de ne pas voir dans votre exemple, mais je ne suis pas en utilisant un des thèmes par défaut (qui peut prendre des dispositions pour les valeurs manquantes d'ailleurs). De toute façon - beau travail ... avoir une bounty 🙂
est le conteneur cachés deviennent tout moment pendant le redimensionnement. si vous pouvez fournir quelque lien de travail ou du code plus je peux aider au débogage.
Merci ... c'est sur local uniquement pour un projet que je ne peux pas rendre public à l'heure actuelle. Tout fonctionne bien, malgré les erreurs dans la console qui indique que le CSS n'est pas chargée (d'où le JS ne peut pas calculer la taille de l'écrêtage du conteneur), mais les styles SONT réellement chargés et tout s'affiche/fonctions de l'amende juste. Merci encore pour l'aide, je vais vérifier sur vous, parfois, une fois que j'ai cette mise en scène et peut vous permettre d'accéder. Cheers

OriginalL'auteur gaurang171
1

Ou vous pouvez regarder la source. Je suppose que vous utilisez la version 0.2

Regardant le source
https://github.com/jsor/jcarousel/blob/0.2/lib/jquery.jcarousel.js
nous pouvons voir qu'il y a deux lignes (80 et 81), qui sont fait uniquement dans l'objet de l'init. Ces lignes sont
```
this.wh = !this.options.vertical ? 'width' : 'height';
this.lt = !this.options.vertical ? (this.options.rtl ? 'right' : 'left') : 'top';
```
aussi cette ligne à 149
```
if (!this.options.vertical && this.options.rtl) {
  this.container.addClass('jcarousel-direction-rtl').attr('dir', 'rtl');
}
```
Il peut être si vous ajoutez-les à la fonction de rappel, vous obtiendrez de meilleurs résultats.

Vous pouvez également essayer la version 0.3 du plugin.

Avant de répondre:

Ne peux pas le tester moi-même en ce moment, mais essayez ceci:
```
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({
    vertical: $(window).width() > 1008,
    scroll: 3,
    reloadCallback: function () {
        this.options.vertical = $(window).width() > 1008;
    },
  });
});
</script>
```
Pas d'aller - je commence à penser que la seule façon d'y parvenir est de simplement recharger la page lorsque l'utilisateur modifie la taille de la fenêtre du navigateur à moins de 1024 de large, et d'oublier au sujet de re-chargement du script.

OriginalL'auteur Hogan

<script type="text/javascript">
    jQuery(document).ready(function() {
      var sizeCheck = function() {
        return $(window).outerWidth() >= 1024
      }
      jQuery('#mycarousel').jcarousel({
        vertical: sizeCheck(),
        scroll: 3,
      });
      var jCarousel = jQuery('#mycarousel').data('jcarousel');
      window.onresize = function() {
        jCarousel.options.vertical = sizeCheck(); //maybe you have to access the option through jCarousel.plugin.options.vertical
        jCarousel.reset();
      }
    });
    </script>

Peut-être que cela fonctionne.

Désolé, pas de travail - il réellement supprime les miniatures du carrousel dès que vous re-taille. Une fois la fenêtre d'affichage réduit à moins de 1024, j'obtiens un message d'erreur indiquant que la largeur & hauteur n'est pas définie (en supposant que parce que la verticale de la classe crochet n'est pas mis à jour).

OriginalL'auteur Simon

Je n'ai pas testé le code suivant, mais je suis assez sûr que le code suivant devrait fonctionner:

<script type="text/javascript">
    var carousel;
    jQuery(window).resize(function() {
        if(carousel !== undefined) carousel.destroy();
        carousel = jQuery('#mycarousel').jcarousel({
            vertical: $(window).width() > 1008,
            scroll: 3,
        });
    });
</script>

ou encore mieux, quelque chose le long des lignes de:

<script type="text/javascript">
    var carousel;
    jQuery(document).ready(function() {
        carousel = jQuery('#mycarousel').jcarousel({
            vertical: $(window).width() > 1008,
            scroll: 3,
        });
    });
    jQuery(window).resize(function() {
        //NOT SURE WHICH OF THE BELOW LINES WOULD WORK, try both and check which works
        carousel.options.vertical = $(window).width() > 1008;
        carousel.vertical = $(window).width() > 1008;
        carousel.reload();
    });
</script>

Si elle ne le fait pas, vous devez ajouter un console.log(carousel) de votre code et de vérifier ce que le prototype de la sortie de valeur (case à F12). Il devrait être quelque chose le long des lignes de détruire (ou alternativement vérifier console.log($.jcarousel())).

OriginalL'auteur David Mulder

Vous devez vous connecter pour publier un commentaire.