Solved

FancyBox Width

Posted on 2014-01-18
10
556 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
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)

729 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