Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 583
  • Last Modified:

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?
0
Ray Turner
Asked:
Ray Turner
1 Solution
 
GaryCommented:
In
#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
0
 
Ray TurnerSenior ConsultantAuthor Commented:
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.
0
 
GaryCommented:
Well did you try making the changes I said above?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Ray TurnerSenior ConsultantAuthor Commented:
Yes. I tried your suggestions.  It did not work.
0
 
HagayMandelCommented:
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'

$(document).ready(function(){ 
  $(".fancybox").fancybox({
    'width'  : 800,  'height' : 600,  'type'   : 'iframe'  
  });
}); 

Open in new window

0
 
Amar BardoliwalaCommented:
Hello rgturner,

If you can post your current code here?

Thank you.

Amar Bardoliwala
0
 
Ray TurnerSenior ConsultantAuthor Commented:
--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 : '');
            }
        });
    }
}
0
 
GaryCommented:
Are you using this fancybox?
http://fancyapps.com/fancybox/

.fancybox-nav {}

change position to fixed

.fancybox-next span {}
change right to 60%

.fancybox-prev span{}
change left to 70%

You may need to tweak the percentages.
0
 
Ray TurnerSenior ConsultantAuthor Commented:
Thanks!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now