RayT
asked on
FancyBox Width
Is there a way to make FancyBox keep the width the same so that that navigation buttons stay in the same position regardless of the image's width?
ASKER
Here's the problem:
O [Image] O
O [ ] O
The O represent the navigation buttons. I want the buttons to remain in the same position regardless of the width of the image.
O [Image] O
O [ ] O
The O represent the navigation buttons. I want the buttons to remain in the same position regardless of the width of the image.
Well did you try making the changes I said above?
ASKER
Yes. I tried your suggestions. It did not work.
From the documentation (under available options):
key width => Width for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false'
key width => Width for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false'
$(document).ready(function(){
$(".fancybox").fancybox({
'width' : 800, 'height' : 600, 'type' : 'iframe'
});
});
Hello rgturner,
If you can post your current code here?
Thank you.
Amar Bardoliwala
If you can post your current code here?
Thank you.
Amar Bardoliwala
ASKER
--CSS
.fancybox-close {
top: 0;
right: 0;
}
.fancybox-nav {
width: 60px;
}
.fancybox-nav span {
visibility: visible;
opacity: 0.5;
}
.fancybox-nav:hover span {
opacity: 1;
}
.fancybox-next {
right: -60px;
}
.fancybox-prev {
left: -60px;
}
.fancybox-close {
right: -50px;
}
--Javascript
var FancyBox = {
InitGallery: function () {
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
nextEffect: 'none',
prevEffect: 'none',
padding: 5,
margin : [20, 60, 20, 60],
helpers: {
title: {
type: 'outside'
},
buttons: {}
},
afterLoad: function () {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
}
}
.fancybox-close {
top: 0;
right: 0;
}
.fancybox-nav {
width: 60px;
}
.fancybox-nav span {
visibility: visible;
opacity: 0.5;
}
.fancybox-nav:hover span {
opacity: 1;
}
.fancybox-next {
right: -60px;
}
.fancybox-prev {
left: -60px;
}
.fancybox-close {
right: -50px;
}
--Javascript
var FancyBox = {
InitGallery: function () {
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
nextEffect: 'none',
prevEffect: 'none',
padding: 5,
margin : [20, 60, 20, 60],
helpers: {
title: {
type: 'outside'
},
buttons: {}
},
afterLoad: function () {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks!
#fancybox-left-ico, #fancybox-right-ico {}
Change the position from position:absolute; to position:fixed;
In
#fancybox-right:hover span {}
Change the right:20px; to right:30%;
In
#fancybox-left:hover span {}
Change the left:20px; to left:30%;
You may need to tweak the percentages.
This is about the best you can get with some simple css