移动“切换大小”按钮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'); 

这只是把按钮相同的容器内的画廊图像（这就是我们要对齐太）。