Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question need help with Fancybox script; can't get scrollbars in gallery windows

    THANK YOU IN ADVANCE if you can offer any advice! I've gotten the whole site up and running except for this one issue and it's driving me nuts!

    I've modified a template that had Fancybox already installed and functioning; I'm having problems with my gallery windows being too big on smaller screens. Currently I have a large image and then a decent block of text below. After modifying the code in the 'main.js' file, I can get the window to fit inside a browser window on a non-Retina Macbook Pro and larger screens, but on a Macbook Air 11" the window gets cut off on the bottom (I know it's about pixels and not screen size, I just don't have the numbers on hand). It's not an issue on a phone because I can scroll the window up with a finger.

    One solution would be to enable scrolling inside the windows, but if that is possible then I haven't been able to make it work. Maybe they should be iframes and not gallery windows? If so I would need advice on how to implement that (the template did not come with any iframe examples beyond links to videos).

    Here's the site: Weirdsmobile

    Click on any of the tiles in the "Projects" section to see a Fancybox window.

    Here is all the javascript code; I got advice to add the fitToView: false and maxWidth: "95%" because the window initially did not fit on a phone screen. I then added maxHeight: "60%" to try and shrink it to fit, otherwise the full window is too large; but on smaller screens that % is still too high.

    Code:
    BRUSHED.fancyBox = function(){
    if($('.fancybox').length > 0 || $('.fancybox-media').length > 0 || $('.fancybox-various').length > 0){
    
        $(".fancybox").fancybox({               
                fitToView: false, // so we can get all the length of the title
             maxWidth: "95%", // will make it responsive; adjust to your needs
               maxHeight: "60%",
               padding : 0,
                beforeShow: function () {
                    this.title = $(this.element).attr('title');
                    this.title = '<h4>' + this.title + '</h4>' + '<p>' + $(this.element).parent().find('img').attr('alt') + '</p>';
                },
                helpers : {
                    title : { type: 'inside' },
                }
            });
    
        $('.fancybox-media').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            helpers : {
                media : {}
            }
        });
    }

  • #2
    New to the CF scene
    Join Date
    May 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •