2013-07-26 46 views
2

Fancybox 2.如何將按鈕助手中的按鈕添加到標題(Fancybox 2)?

我想爲標題添加所有「Button helper」按鈕。 使標題與左邊緣對齊,並將按鈕與右邊緣對齊。

請問誰能告訴我,我該怎麼辦?

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

這是我所用的fancybox做過最不可思議的事情之一,但只是爲了好玩。

首先,如果你想要的按鈕助手添加到title,那麼你必須確保每一個環節都有title屬性(有些人可能不)......這樣你就可以用這個啓動:

$(document).ready(function() { 
    $(".fancybox").each(function() { 
     // make sure every element has the tile attribute 
     if (!$(this).attr("title")) { 
      $(this).attr("title", " "); //no-break space 
     } 
    }) 
}); // ready 

這將添加一個空的(無休息空間)title任何沒有任何鏈接。

另一方面,將按鈕幫助器移動到title可能有一些問題,所以最好的選擇是克隆它,然後將該克隆附加到title

讓我們設置一些CSS屬性來克隆,因此將被定位在那裏,我們希望它的title內:

/* hide the actual buttons helper */ 
#fancybox-buttons { 
    display: none 
} 
/* position the clone : notice the class "clone" */ 
#fancybox-buttons.clone { 
    position: absolute; 
    top: 5px; 
    right: 0; 
} 
/* also position the child ul */ 
#fancybox-buttons.clone ul { 
    right: 0; 
    margin: 0; 
    position: absolute; 
} 

然後,我們將使用afterShow回調在我們的fancybox自定義腳本:

  • 克隆按鈕幫手
  • clone添加到克隆的元素
  • 追加到的fancybox title
  • 顯示它(淡入它)

注意,我們將設置title位置inside做的事情是可行的。另外請注意,由於按鈕助手是在fancybox加載後添加的,我們需要等待它,然後才能克隆它;這就是setTimeout就派上用場了:

$(document).ready(function() { 
    $(".fancybox").each(function() { 
     // make sure every element has the tile attribute 
     if (!$(this).attr("title")) { 
      $(this).attr("title", " "); //no-break space 
     } 
    }).fancybox({ 
     modal: true, 
     helpers: { 
      title: { 
       type: 'inside' 
      }, 
      buttons: {} 
     }, 
     afterShow: function() { 
      // wait for the buttons helper 
      var buttons = setTimeout(function() { 
       $("#fancybox-buttons") 
        .clone(true, true) // clone with data and events 
        .attr("class", "clone") // set class "clone" (and remove class "top") 
        .appendTo(".fancybox-title") // append it to the title 
        .fadeIn(); // show it nicely 
      }, 100); //setTimeout 
     } // afterShow 
    }); // fancybox 
}); // ready 

看到它的工作:在您自己的風險JSFIDDLE

  • 使用;)

編輯

在前面的演示中,當單擊任何按鈕時,該圖標不會更改爲由OP指出的相應功能。我們需要一些額外的回調,以圖標 「切換」 功能添加到我們的克隆按鈕:

onPlayStart: function() { 
    $("#fancybox-buttons.clone").find(".btnPlay").attr('title', 'Pause slideshow').addClass('btnPlayOn'); 
}, 
onPlayEnd: function() { 
    $("#fancybox-buttons.clone").find(".btnPlay").attr('title', 'Start slideshow').removeClass('btnPlayOn'); 
}, 
onUpdate: function() { 
    $("#fancybox-buttons.clone").find(".btnToggle").toggleClass('btnToggleOn'); 
} 

新的分叉JSFIDDLE

編輯#2

要解決的onUpdate按鈕切換問題,同時滾動(根據OP的評論)當覆蓋鎖定設置爲false - overlay : {locked:false} - 我們必須替換此代碼:

onUpdate: function() { 
    $("#fancybox-buttons.clone").find(".btnToggle").toggleClass('btnToggleOn'); 
} 

本:

onUpdate: function() { 
    var toggle; 
    toggle = $("#fancybox-buttons.clone").find(".btnToggle").removeClass('btnDisabled btnToggleOn'); 
    if (this.canShrink) { 
     toggle.addClass('btnToggleOn'); 
    } else if (!this.canExpand) { 
     toggle.addClass('btnDisabled'); 
    } 
} 

JSFIDDLE

+0

感謝的想法。 我改變了你的腳本。 我的版本:[http://jsfiddle.net/5QbeL/show/](http://jsfiddle.net/5QbeL/show/) 但是在您的和我的腳本中,「播放/暫停」按鈕和「尺寸切換「按鈕背景(圖標)在我點擊其中任何一個後不會改變。 1)嘗試暫停幻燈片按暫停按鈕,該按鈕仍然會顯示暫停按鈕。 2)嘗試按下相應的按鈕來展開或縮小圖像,並且該按鈕不會改變其背景(圖標)。 –

+0

@WalterStolz:看到我編輯的答案。如果你考慮的話也請http://meta.stackexchange.com/a/5235 – JFK

+0

我想指定關於「onUpdate」回調方法函數的工作。 如果未顯示覆蓋鎖定參數(默認值),則切換大小按鈕不會更改滾動時的背景(圖標)。這很好。 如果該參數設置爲假值,則切換大小按鈕會在滾動時更改圖標。 例如:[http://jsfiddle.net/ajk89/show/](http://jsfiddle.net/ajk89/show/) 如何禁用此功能? –

0

有點晚,但我知道我會附和我的兩分錢的價值在這裏。

假設需要點擊按鈕幫助器來實現聲明函數的自定義按鈕是不正確的,並且會導致比值得的更多的問題...您甚至不需要激活按鈕幫助器。

解決方案是利用已映射到鍵的功能,並根據需要將所述功能附加到您自己的按鈕上。我下水的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)); 

請注意,我已經列入「afterShow」而不是「的onUpdate」撥動變量狀態..這是一個深思熟慮的方法,我發現在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'); 
     } 
    } 
+0

我做了我自己的版本,不同於JFK提供的版本。 我手動添加按鈕到標題。但我有興趣看到你的版本。 可以顯示JSFIDDLE工作示例嗎? –

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}