2

ファンシーボックス2。

すべての「ボタンヘルパー」ボタンをタイトルに追加したいと思います。タイトルが左端に、ボタンが右端に配置されるようにします。

誰か教えてください、どうすればいいですか？

jquery.fancybox.css:

    /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
        bottom: 15px;
    position: relative;
    background: DarkGreen;
    color: #444;
    text-shadow: none;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

.fancybox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 8010;
}

.fancybox-title {
    visibility: hidden;
    font: 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-inside-wrap {
        position: relative;
    padding-bottom: 5px;
    font-weight: bold;
    color: white;
    text-align: left;
}

jquery.fancybox-buttons.css:

#fancybox-buttons {
        display: none;
    position: fixed;
    right: 10px;
    width: 100%;
    z-index: 8050;
}

#fancybox-buttons ul {
    display: block;
    width: 133px;
    height: 25px;
    margin: 0 auto;
    padding-right: 5px;
    list-style: none;
}

#fancybox-buttons ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#fancybox-buttons a {
    display: block;
    width: 27px;
    height: 25px;
    text-indent: -9999px;
    background-color: DarkGreen;  
    background-image: url('http://2.bp.blogspot.com/-5CNF6M2iOPM/UfVFckJ9jiI/AAAAAAAABjY/WT53trk2XUE/s1600/fancybox_buttons.png');
    background-repeat: no-repeat;
    outline: none;
}

#fancybox-buttons a:hover {
    background-image: url('http://4.bp.blogspot.com/-M6nS5WXq-lI/UfVFcvlh7MI/AAAAAAAABjU/fMbwIP_esaQ/s1600/fancybox_buttons2.png');
    background-color: ForestGreen;  
}

#fancybox-buttons a.btnPrev {
    background-position: -1px -3px;
}

#fancybox-buttons a.btnNext {
    background-position: -31px -3px;
}

#fancybox-buttons a.btnPlay {
    background-position: -1px -33px;
}

#fancybox-buttons a.btnPlayOn {
    background-position: -31px -33px;
}

#fancybox-buttons a.btnToggle {
    background-position: -1px -63px;
}

#fancybox-buttons a.btnToggleOn {
    background-position: -31px -63px;
}

#fancybox-buttons a.btnClose {
    height: 25px;
    width: 25px;
        background-position: -63px -3px;
        background-color: DarkRed;
    background-image: url('http://4.bp.blogspot.com/-M6nS5WXq-lI/UfVFcvlh7MI/AAAAAAAABjU/fMbwIP_esaQ/s1600/fancybox_buttons2.png');
}

#fancybox-buttons a.btnClose:hover  {
    background-color: Red;
}

#fancybox-buttons a.btnDisabled {
        background-color: DarkGreen;
    background-image: url('http://2.bp.blogspot.com/-5CNF6M2iOPM/UfVFckJ9jiI/AAAAAAAABjY/WT53trk2XUE/s1600/fancybox_buttons.png');
       cursor: default;
}
4

3 に答える 3

0

私自身のバージョンで、遅延や点滅はありません。
例: JSFIDDLE

JavaScript:

$(document).ready(function () {
  $(".fancybox").fancybox({
    openEffect: "elastic",
    openSpeed: 100,
    closeEffect: "elastic",
    closeSpeed: 100,
    prevEffect: "none",
    prevSpeed: 100,
    nextEffect: "none",
    nextSpeed: 100,
    minWidth: "130px",
    padding: 5,
    closeBtn: false,
    helpers: {
        title: {
            type: "inside",
            position: "top"
        },
        overlay: {
            locked: false
        }
    },
    afterLoad: function () {
        if (this.group.length > 1) {
            this.title = '<div id="fancybox-buttons"><ul><li><a class="btnPrev" onClick="javascript:$.fancybox.prev();"></a></li><li><a class="btnPlay" onClick="javascript:$.fancybox.play();"></a></li><li><a class="btnNext" onClick="javascript:$.fancybox.next();"></a></li><li><a class="btnToggle" onClick="javascript:$.fancybox.toggle();"></a></li><li><a class="btnClose" onClick="javascript:$.fancybox.close();"></a></li></ul></div> Рисунок ' + (this.index + 1) + " из " + this.group.length + (this.title ? " - " + this.title : "")
        }
        if (this.group.length < 2) {
            $.extend(this, {
                loop: false
            });
            this.title = '<div id="fancybox-buttons"><ul><li><a class="btnPrev btnDisabled"></a></li><li><a class="btnPlay btnDisabled"></a></li><li><a class="btnNext btnDisabled"></a></li><li><a class="btnToggle" onClick="javascript:$.fancybox.toggle();"></a></li><li><a class="btnClose" onClick="javascript:$.fancybox.close();"></a></li></ul></div> Рисунок ' + (this.index + 1) + " из " + this.group.length + (this.title ? " - " + this.title : "")
        }
    },
    afterShow: function () {
        $(".fancybox-wrap").easydrag();
        var e;
        e = $("#fancybox-buttons").find(".btnPlay").removeClass("btnPlayOn");
        if ($.fancybox.player.isActive) {
            e.addClass("btnPlayOn")
        }
        var t;
        t = $("#fancybox-buttons").find(".btnToggle").removeClass("btnDisabled btnToggleOn");
        if (this.canShrink) {
            t.addClass("btnToggleOn")
        } else if (!this.canExpand) {
            t.addClass("btnDisabled")
        }
    },
    onPlayStart: function () {
        $("#fancybox-buttons").find(".btnPlay").addClass("btnPlayOn")
    },
    onPlayEnd: function () {
        $("#fancybox-buttons").find(".btnPlay").removeClass("btnPlayOn")
    },
    onUpdate: function () {
        var e;
        e = $("#fancybox-buttons").find(".btnToggle").removeClass("btnDisabled btnToggleOn");
        if (this.canShrink) {
            e.addClass("btnToggleOn")
        } else if (!this.canExpand) {
            e.addClass("btnDisabled")
        }
    }
  })
});

CSS:

#fancybox-buttons{position:absolute;width:100%;z-index:8050}
#fancybox-buttons ul{display:block;float:right;height:25px;list-style:none;margin:0 auto;width:155px; margin-top: -10px;}
#fancybox-buttons ul li{float:left;margin:0;padding:0}
#fancybox-buttons a{cursor:pointer;background-repeat:no-repeat;display:block;height:25px;outline:none;text-indent:-9999px;width:27px}
于 2013-08-31T03:50:43.313 に答える
0

少し遅れましたが、ここで自分の 2 セント相当のチャイムを鳴らします。

宣言された関数のカスタムボタンを実装するためにボタンヘルパーを利用する必要があるという仮定は正しくなく、価値がある以上の問題を引き起こします...ボタンヘルパーをアクティブにする必要さえありません。

解決策は、すでにキーにマップされている機能を利用し、必要に応じてその機能を独自のボタンに追加することです。したがって、Fancybox 2.1.5 を起動するための私のコードは次のようになります。

$(function() {  
    $('.fancybox').fancybox({
             scrolling      : 'yes',
             openEffect  : 'elastic',
             closeEffect : 'fade',
             openSpeed   : 600,
             closeSpeed   : 200,
             prevEffect : 'fade',
             nextEffect : 'fade',
             closeBtn  : true,
             arrows    : false,
             nextClick : false,
             helpers : {
              title : {
               type : 'inside'
              },
            //buttons : {},
              thumbs : {
               width : 75,
               height : 75
              }
             },
        afterShow: function() {
            expander = $('<a class="expander" title="Toggle size" href="javascript:;"></a>').appendTo('.fancybox-inner');
            toggle = $('.expander').on('click.fb', $.fancybox.toggle ).removeClass('hidden btnToggleOn');
            if (this.canShrink) {
                toggle.addClass('btnToggleOn');
            } else if (!this.canExpand) {
                toggle.addClass('hidden');
            }
            $('.fancybox-skin').swipe({
                  threshold : 40,

                  swipeLeft: function(event, direction) {
                        $.fancybox.next( direction );
                  },
                  swipeRight: function(event, direction) {
                        $.fancybox.prev( direction );
                  }
            });
        }

    });
}(jQuery));

「onUpdate」ではなく「afterShow」の下にトグル変数の状態を含めたことに注意してください。afterLoad の下に適用すると、ボタンの読み込みと実際にライブ要素になるまでの間に不要な遅延が発生することがわかったため、これは意図的な方法です。

編集 afterShow で「toggle」の変数状態を格納すると、更新時のクラスの追加に関連して問題が発生することがわかりました。以下を以下に変更します。

        afterShow: function() {
        /*twttr.widgets.load();*/
        expander = $('<a class="expander" title="Toggle size" href="javascript:;"></a>').appendTo('.fancybox-inner').on('click.fb', $.fancybox.toggle );
        $('.fancybox-skin')
            $('.fancybox-skin').swipe({
                threshold : 100,
                swipe:function(event, direction) {}
            });
            $('.fancybox-skin')
                .on('swipeLeft', function(){
                  $.fancybox.next();
                })
                .on('swipeRight', function(){
                  $.fancybox.prev();
            });
        },
    onUpdate: function() {
        var toggle;
        toggle = $('.expander').removeClass('hidden ToggleOn');
        if (this.canShrink) {
            toggle.addClass('ToggleOn');
        } else if (!this.canExpand) {
            toggle.addClass('hidden');
        }
    }
于 2013-08-26T23:53:21.863 に答える