définir la lecture automatique de faux/vrai sur fancybox

J'ai une image de la galerie.

jQuery("a.thumb").fancybox({
  "loop"        : true,
  "autoPlay"    : true,
  "playSpeed"   : 4000,
  "nextSpeed"   : 500,
  "prevSpeed"   : 500,
  "openSpeed"   : 500,
  "speedOut"    : 500,
  "openEffect"  : "fade", 
  "closeEffect" : "fade",
  "nextEffect"  : "fade",
  "prevEffect"  : "fade"
});

Je veux ajouter un nouveau bouton pour définir la fonction de lecture automatique de faux/vrai est-il possible?

+1 Excellente Question!
stackoverflow.com/a/9649457/1055987

OriginalL'auteur Mohamed Omezzine | 2013-01-07

  1. 1

    jsFiddle de DÉMONSTRATION de la Barre de Titre avec l'Autojeu Bouton Afficher (Images de remplacement pour la confirmation visuelle)

    jsFiddle DÉMO le Titre de Superposition avec l'Autojeu Bouton Afficher

    Vous pouvez placer un bouton à l'intérieur de la Fancybox zone de Titre que lorsque l'utilisateur clique dessus pour arrêter ou jouer à la Fancybox spectacle. Il fera aussi une image de swap pour indiquer visuellement l'actuel mode de lecture.

    Le jsFiddle DÉMO ci-dessus contient tutoriel complet commentaires.

    CSS: 

    .fancyControl {
  float: right;
  margin-left: 20px;
}

    jQuery:

    var fancyControlMode = "play";

function fancyPlay(){
  $.fancybox.play();
  $('.fancybox-title .child img').attr('src', 'http://placehold.it/40x24/00ff00/000000&text=PLAY');
  fancyControlMode = "play";
}

function fancyStop(){
  $.fancybox.play();
  $('.fancybox-title .child img').attr('src', 'http://placehold.it/40x24/ff0000/000000&text=STOP');
  fancyControlMode = "stop";
}

function fancyButton() {
  if (fancyControlMode === "play") {
    $('.fancybox-title .child').prepend('<img class="fancyControl" src="http://placehold.it/40x24/00ff00/000000&text=PLAY" />');
    $('.fancyControl').toggle(fancyStop, fancyPlay);
  } else {
    $('.fancybox-title .child').prepend('<img class="fancyControl" src="http://placehold.it/40x24/ff0000/000000&text=STOP" />');
    $('.fancyControl').toggle(fancyPlay, fancyStop);
  }
}

$(".fancybox").fancybox({
  autoPlay: true,
  afterShow: fancyButton
});
    +1 superbe grande réponse 🙂

    OriginalL'auteur arttronics

  2. 2

    Un autre moyen de le faire:

    Supposer qu'il existe case à cocher qui id="chkFlag" dans votre code html.

    var flag="";
$('#chkFlag').live("change", function() {
       if ($('#chkShowImage').attr("checked"))
             flag = true;
        else
             flag = false ;

      });

    et en fonction de votre utilisation drapeau:

     jQuery("a.thumb").fancybox({        
            'loop'              : true,
            'autoPlay'          : flag,
            'playSpeed'         : 4000,
            'nextSpeed'         : 500,
            'prevSpeed'         : 500,
            'openSpeed'         : 500,
            'speedOut'          : 500,
            'openEffect'        : 'fade', 
            'closeEffect'       : 'fade',
            'nextEffect'        : 'fade',
            'prevEffect'        : 'fade'
             });
    Essayez d'éviter d'utiliser live() comme il a été désapprouvée. on() est l'avenir!

    OriginalL'auteur Shree

  3. 0

    @arttonics, je suis époustouflé par votre fancyBox la maîtrise. Voici une autre façon:

    Contrairement à la question de @JFK lié, @Xone vous ne dites pas que vous avez besoin de la touche à l'intérieur de la zone de titre, ou même la visionneuse d'image. Vous pourriez être satisfaits avec les "boutons" aide emballés avec fancyBox. Il fournit un bouton de la barre avec "prev', "play/pause", "ensuite", "full-size" /"ajustement", et "fermer" boutons. Juste ajouter

    <script type="text/javascript" src="your-path-to/fancybox/helpers/jquery.fancybox-buttons.js"></script>

    (juste avant </body>) et

    <link rel="stylesheet" type="text/css" href="your-path-to/fancybox/helpers/jquery.fancybox-buttons.css"/>

    (en <head>; le pseudo-voies que j'ai utilisés reflètent l'endroit où les fichiers sont disponibles lorsque vous téléchargez fancyBox).

    De base de votre galerie fancyBox avec l'autojeu et les boutons de contrôle sera

    $(".fancybox-button").fancybox({
    autoPlay    : true,
    closeBtn    : false, //remove the default close button (there's one in the button bar)
    arrows      : false, //(optional) remove the default prev/next hover arrows (they duplicate the button bar's arrows)
    helpers     : {
        buttons : {} //add the buttons bar
    }
});

    Personnalisation de ces boutons doit être simple si vous êtes d'accord avec les feuilles de style CSS grâce à @fancyapps pour la fabrication de jquery.fancybox-boutons.css lisible! Je peux imaginer que vous pourriez aussi aller dans jquery.fancybox-buttons.js pour ajuster le <div id="fancybox-buttons"> il injecte.

    OriginalL'auteur henry