3

画像ギャラリーがあります。

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

自動再生を false/true に設定する新しいボタンを追加したいのですが可能ですか?

4

3 に答える 3

2

これを行う別の方法：

HTML に id="chkFlag" というチェック ボックスがあるとします。

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

      });

そしてあなたの関数ではフラグを使用します：

 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'
             });
于 2013-01-07T09:59:07.623 に答える
1

自動再生表示ボタン付きのjsFiddleデモタイトルバー （視覚的な確認のための代替画像）

自動再生表示ボタン付きのjsFiddleデモタイトルオーバーレイ

Fancyboxのタイトル領域内にボタンを配置すると、クリックするとFancyboxの表示が停止または再生されます。また、現在の再生モードを視覚的に示すために画像の交換も行います。

上記のjsFiddleDEMOには、完全なチュートリアルコメントが含まれています。

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
});
于 2013-01-07T14:15:58.780 に答える
0

@arttonics、私はあなたのfancyBoxの熟練度に圧倒されました。別の方法は次のとおりです。

リンクされた@JFKの質問とは異なり、@Xoneは、ボタンをタイトル領域内、またはライトボックスフレーム内に配置する必要があるとは言いません。fancyBox に同梱されている「ボタン」ヘルパーに満足するかもしれません。「前へ」、「再生/一時停止」、「次へ」、「フルサイズ」/「フィット」、および「閉じる」ボタンを備えたボタンバーを提供します。追加するだけ

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

（直前</body>）と

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

(<head>私が使用したプレースホルダー パスは、fancyBox をダウンロードしたときにファイルが見つかった場所を反映しています)。

自動再生とコントロール ボタンを備えた基本的な fancyBox ギャラリーは、

$(".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
    }
});

これらのボタンのカスタマイズは、CSS に問題がなければ簡単に行うことができます。@fancyapps に感謝します。jquery.fancybox-buttons.js にアクセスして<div id="fancybox-buttons">、注入するものを微調整することになるかもしれないと想像できます。

于 2013-05-17T22:04:09.347 に答える