i using combination of fancybox thumbnails , buttons (only toggle size button). default, buttons appear in centre of viewport, move bottom right hand corner of image, appearing attached in same way close button or below right corner fine.
i have tried space relative viewport width doesn't work. there way position relative image?
i apologise abundance of code - have no idea include , disregard, i've put in.
if @ website (unfinished i've uploaded help) can see issue on gallery one.
shereewalker.com
any appreciated.
here 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;} and 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 and more javascript
(function ($) { //shortcut 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 not have @ least 2 items if (opts.skipsingle && obj.group.length < 2) { obj.helpers.buttons = false; obj.closebtn = true; return; } //increase top margin give space 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));
if want move toggle button only, need clone rather moving it.
based on answer https://stackoverflow.com/a/17888534/1055987, tweak :
css
/* hide actual buttons helper */ #fancybox-buttons { display: none; } /* position clone : notice 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; } then jquery code :
jquery(document).ready(function ($) { $(".fancybox").fancybox({ helpers: { title: { type: 'inside' }, buttons: {} // need clone }, afterload: function () { // make sure have title this.title = this.title ? this.title : " "; }, aftershow: function () { // wait buttons helper settimeout(function () { $("#fancybox-buttons") .find(".btntoggle") .clone(true, true) // clone data , events .addclass("clone") // add class "clone" .appendto(".fancybox-title") // append title .fadein(); // show 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 see jsfiddle
Comments
Post a Comment