移動「切換大小」按鈕fancybox

Question

我目前正在使用fancybox縮略圖和按鈕（僅限切換大小按鈕）的組合。默認情況下，這些按鈕出現在視口的中心，我想將它移動到圖像的右下角，基本上以與關閉按鈕相同的方式出現，或者在右下角的下方也可以。 。

我已經嘗試過相對於視口寬度的空間，但它不起作用。有沒有辦法將其相對於圖像進行定位？

我爲豐的代碼道歉 - 我不知道是什麼，包括什麼無視，所以我把它們都放在

如果你看看我的網站（未完，但我已經上傳。它幫助）你可以看到一個畫廊的問題。

Shereewalker.com

任何幫助將是非常讚賞。

這裏是我的CSS

#fancybox-buttons { 
    position: fixed; 
    left: 0; 
    width: 100%; 
    z-index: 8050;} 


#fancybox-buttons.top {top: 10px;} 

#fancybox-buttons.bottom {bottom: 10px;} 

.fancybox-close { 
    position: absolute; 
    top: -18px; 
    right: -18px; 
    width: 36px; 
    height: 36px; 
    cursor: pointer; 
    z-index: 8040; } 

#fancybox-buttons ul { 
    width: 36px; 
    height: 36px; 
    cursor: pointer; 
    margin: 0 auto; 
    list-style: none;} 


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

而且我的javascript

jQuery(document).ready(function ($) { 
    $(".fancybox").fancybox({ 
    prevEffect : 'none', 
     nextEffect : 'none', 

     // API options 
     helpers : { 
       title : { 
       type: 'outside' 
          }, 

      buttons: {}, 
      thumbs: { 
      width : 10, 
       height : 10 

      } 
     } 
    }); // fancybox 
}); // ready 

甚至更​​多的JavaScript

(function ($) { 
    //Shortcut for fancyBox object 
    var F = $.fancybox; 

    //Add helper object 
    F.helpers.buttons = { 
     defaults : { 
      skipSingle : false, // disables if gallery contains single image 
      position : 'top', // 'top' or 'bottom' 
      tpl  : '<div id="fancybox-buttons"><ul><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li></ul></div>' 
     }, 

     list : null, 
     buttons: null, 

     beforeLoad: function (opts, obj) { 
      //Remove self if gallery do not have at least two items 

      if (opts.skipSingle && obj.group.length < 2) { 
       obj.helpers.buttons = false; 
       obj.closeBtn = true; 

       return; 
      } 

      //Increase top margin to give space for buttons 
      obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30; 
     }, 

     onPlayStart: function() { 
      if (this.buttons) { 
       this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn'); 
      } 
     }, 

     onPlayEnd: function() { 
      if (this.buttons) { 
       this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn'); 
      } 
     }, 

     afterShow: function (opts, obj) { 
      var buttons = this.buttons; 

      if (!buttons) { 
       this.list = $(opts.tpl).addClass(opts.position).appendTo('body'); 

       buttons = { 
        prev : this.list.find('.btnPrev').click(F.prev), 
        next : this.list.find('.btnNext').click(F.next), 
        play : this.list.find('.btnPlay').click(F.play), 
        toggle : this.list.find('.btnToggle').click(F.toggle), 
        close : this.list.find('.btnClose').click(F.close) 
       } 
      } 

      //Prev 
      if (obj.index > 0 || obj.loop) { 
       buttons.prev.removeClass('btnDisabled'); 
      } else { 
       buttons.prev.addClass('btnDisabled'); 
      } 

      //Next/Play 
      if (obj.loop || obj.index < obj.group.length - 1) { 
       buttons.next.removeClass('btnDisabled'); 
       buttons.play.removeClass('btnDisabled'); 

      } else { 
       buttons.next.addClass('btnDisabled'); 
       buttons.play.addClass('btnDisabled'); 
      } 

      this.buttons = buttons; 

      this.onUpdate(opts, obj); 
     }, 

     onUpdate: function (opts, obj) { 
      var toggle; 

      if (!this.buttons) { 
       return; 
      } 

      toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn'); 

      //Size toggle button 
      if (obj.canShrink) { 
       toggle.addClass('btnToggleOn'); 

      } else if (!obj.canExpand) { 
       toggle.addClass('btnDisabled'); 
      } 
     }, 

     beforeClose: function() { 
      if (this.list) { 
       this.list.remove(); 
      } 

      this.list = null; 
      this.buttons = null; 
     } 
    }; 

}(jQuery)); 

Answer 1

如果你想移動toggle按鈕只有，你實際上需要克隆它，而不是移動它。

在此基礎上回答https://stackoverflow.com/a/17888534/1055987，我們可以調整成這樣：

CSS

/* hide the actual buttons helper */ 
#fancybox-buttons { 
    display: none; 
} 
/* position the clone : notice the class "clone" */ 
.clone { 
    position: absolute; 
    top: 5px; 
    right: 0; 
} 
.btnToggle.clone { 
    background-position: 3px -60px; 
    border-left: 1px solid #111; 
    border-right: 1px solid #3e3e3e; 
    width: 35px; 
    height: 35px; 
    background-image: url("{your path}/helpers/fancybox_buttons.png"); 
    background-color: #333; 
} 
.clone.btnToggleOn { 
    background-position: -27px -60px; 
} 

然後jQuery的代碼：

jQuery(document).ready(function ($) { 
    $(".fancybox").fancybox({ 
     helpers: { 
      title: { 
       type: 'inside' 
      }, 
      buttons: {} // we need this to clone 
     }, 
     afterLoad: function() { 
      // make sure we have a title 
      this.title = this.title ? this.title : " "; 
     }, 
     afterShow: function() { 
      // wait for the buttons helper 
      setTimeout(function() { 
       $("#fancybox-buttons") 
       .find(".btnToggle") 
       .clone(true, true) // clone with data and events 
       .addClass("clone") // add class "clone" 
       .appendTo(".fancybox-title") // append it to the title 
       .fadeIn(); // show it nicely 
      }, 100); //setTimeout 
     }, // afterShow 
     onUpdate: function() { 
      var toggle = $(".btnToggle.clone").removeClass('btnDisabled btnToggleOn'); 
      if (this.canShrink) { 
       toggle.addClass('btnToggleOn'); 
      } else if (!this.canExpand) { 
       toggle.addClass('btnDisabled'); 
      } 
     } 
    }); // fancybox 
}); // ready 

見JSFIDDLE

Answer 2

撥動尺寸按鈕（和縮略圖），難以對齊，因爲他們在單獨的全寬度容器中。這個標記由FancyBox爲畫廊幻燈片生成。

它看起來像這樣：

<body> 
    <div class="fancybox-wrap"> 
    <div class="fancybox-overlay"> 
    <div id="fancybox-buttons"> 
    <div id="fancybox-thumbs"> 

的.fancybox-wrap包含庫圖像和#fancybox-buttons包含切換大小按鈕。

幸運的是，OP爲切換大小按鈕創建了一個模板（tpl）......但是將它注入<body>，因此它不知道.fancybox-wrap的內容。

爲了解決這個問題只是改變這一行：

this.list = $(opts.tpl).addClass(opts.position).appendTo('body'); 

要這樣：

this.list = $(opts.tpl).addClass(opts.position).appendTo('.fancybox-wrap'); 

這只是把按鈕相同的容器內的畫廊圖像（這就是我們要對齊太）。