Solved

FancyBox Width

Posted on 2014-01-18
10
552 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)

856 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