Solved

FancyBox Width

Posted on 2014-01-18
10
547 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
 

Author Comment

by:Ray Turner
ID: 39791760
Yes. I tried your suggestions.  It did not work.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now