Diaporama dans FancyBox Image Gallery?

Je commence tout juste à apprendre du HTML et du javascript (lire: Je ne connais pratiquement rien à ce sujet) et aimerais que ma page index.html ouvre une galerie d'images rotatives en utilisant FancyBox.Diaporama dans FancyBox Image Gallery?

J'ai tout configuré, au point que la première image apparaît dans une boîte de dialogue modale lorsque la page se charge, mais j'aimerais que la galerie passe automatiquement d'une image à l'autre, peut-être après certains intervalles de temps spécifiés. Est-ce possible? Comment ferais-je pour mettre ça en place?

Encore une fois, plus la réponse est simple, mieux c'est - parce que je ne connais pas le squat.

je me suis humble devant les assistants de programmation de notre temps ...

Source

2010-10-25 Dr.Fishtable

Vous pouvez ajouter à la fin de votre javascript:

setInterval($.fancybox.next, 10000);

Le nombre représente le temps d'attente, en millisecondes (donc dans mon exemple c'est 10 secondes). Aussi, assurez-vous, dans les options de la fancybox, de spécifier cyclic = true, sinon il s'arrêtera à la dernière image. (À moins que ce que vous voulez)

modifier: Pour ajouter une pause, vous pouvez faire quelque chose comme ce qui suit:

Au lieu de cette ligne dans votre javascript, ajoutez ceci:

var rotatingInterval = FALSE; 
function toggleRotating(fromButton) { 
    if (rotatingInterval) { 
    clearInterval(rotatingInterval); 
    rotatingInterval = FALSE; 
    } else { 
    rotatingInterval = setInterval($.fancybox.next, 10000); 
    if (fromButton) 
     $.fancybox.next(); 
    } 
} 
toggleRotating(FALSE);

Et puis vous pouvez avoir un bouton dans votre code HTML, comme ceci:

<input type="button" value="Pause" onclick="toggleRotating(TRUE);" />

Qui ferait lecture/pause.

Source

2010-10-26 00:43:50 cambraca

Impressionnant! Cela fonctionne très bien. Est-il possible d'ajouter un bouton "Pause" pour les utilisateurs finaux pour suspendre temporairement l'intervalle de défilement automatique? –

Eh bien j'espérais un bouton de pause qui serait inclus dans la boîte de dialogue, comme dans FancyBox. Est-ce possible? –

Je ne pense pas que ce soit possible sans modifier le fonctionnement interne de FancyBox, ce qui demanderait plus de travail. – cambraca

Voici comment je configure la fonction. J'ai ajouté le nombre car lors du chargement d'une galerie, les appels onStart/onComplete se déclenchent chaque fois qu'une nouvelle image est chargée. Je veux seulement le premier appel à lier setInterval à l'appel suivant.

function toggleRotating(fromButton) { 
     count = count + 1; 
     if (fromButton == false) { 
     clearInterval(rotatingInterval); 
     rotatingInterval = false; 
     count = 0; 
     } else { 
     if(count == 1) 
      rotatingInterval = setInterval($.fancybox.next, 10000); 

     } 
    }

Et voici mes variables globales et la méthode de lancement de fancybox.

var rotatingInterval = false; 
var count = 0; 
$(function() { 
    $("a.slide").attr('rel', 'presentation1').fancybox({'autoDimensions':false,'height':540,'width':720,'autoScale':false,'cyclic':true, 'onStart': function(){ toggleRotating(true); } }); 
});

Je n'ai pas créé de bouton pour arrêter la rotation. Je pense que je ferai en sorte que si vous cliquez sur les boutons suivant ou précédent, il basculera sur "false".

Source

2011-02-23 05:38:12 Ecropolis

s'il se déclenche sur chaque diapositive, mieux vaut utiliser setTimeout au lieu de setInterval? – commonpike

Pour transformer votre fancybox en diaporama une fois celui-ci ouvert, sans boutons supplémentaires, utilisez l'option "onComplete" pour régler un temporisateur pour appeler "next()". Par exemple:

jQuery("a.fancybox").fancybox({ 
    "onComplete":function() { 
     clearTimeout(jQuery.fancybox.slider); 
     jQuery.fancybox.slider=setTimeout("jQuery.fancybox.next()",5000); 
    } 
});

Source

2011-08-20 17:44:07 commonpike

Diaporama dans FancyBox Image Gallery?

Répondre

Questions connexes