Перемещение кнопки «toggle size» 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 содержит кнопку размера тумблера.

К счастью, ОП было создание шаблона (tpl) для кнопки переключения размера ... но впрыскивание в <body> так не знал о содержании .fancybox-wrap.

Чтобы исправить это просто изменить эту строку:

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

Для этого:

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

Это просто ставит кнопки в том же контейнере, как галереи изображений (что мы хотим, чтобы выровнять слишком).