Solved

FancyBox Width

Posted on 2014-01-18
10
550 Views
Last Modified: 2014-01-19
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
Comment
Question by:Ray Turner
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39791357
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
 

Author Comment

by:Ray Turner
ID: 39791639
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
 
LVL 58

Expert Comment

by:Gary
ID: 39791645
Well did you try making the changes I said above?
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:Ray Turner
ID: 39791760
Yes. I tried your suggestions.  It did not work.
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 39791774
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
 
LVL 11

Expert Comment

by:Amar Bardoliwala
ID: 39791858
Hello rgturner,

If you can post your current code here?

Thank you.

Amar Bardoliwala
0
 

Author Comment

by:Ray Turner
ID: 39792023
--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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39792309
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
 

Author Closing Comment

by:Ray Turner
ID: 39792613
Thanks!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question