Grow your CSS skills. Land your dream job.

Fancybox resize help please?

  • # January 25, 2011 at 12:34 pm

    Here is a stripped down test page with absolute paths so its easy to test out possible solutions. http://goo.gl/oQ2b9

    Click the red house. When fancybox opens I want it at width 700 height 575. Then when you click the “LARGER” link Im hoping to find a way to make it resize to width 800 height 675. Currently it does not resize it just gains scrollbars.

    Thanks for your help!

    # January 25, 2011 at 12:36 pm

    Not sure if this is limited to my computer but in Chrome 8.0, when i close the fancybox, it all starts to jump like I am clicking the link non stop.

    # January 25, 2011 at 12:58 pm

    @ChristopherBurton – I get the same sort of effect after opening the fancybox, I think there is a broken Java applet being loaded.

    @Eric – the content of the fancy box is an iframe, I think you need to evaluate it’s contents first. This may help: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

    # January 25, 2011 at 4:47 pm

    Thanks guys! I changed the fancybox fire stuff so that should fix whatever issue you were having in Chrome. Here is the test page with just the basics. http://goo.gl/V58PW

    I’m poor to say the least with JS so if anyone could show me how to simply make it change to width 800 height 675 when the “LARGER” link is clicked that would be extremely helpful.

    # January 26, 2011 at 9:36 am

    Still need help…

    # January 26, 2011 at 2:11 pm

    I’ve tried to work on your working test-case. I cannot come up with much as the fancybox script crashes my browser – frustrating at best!

    I would be looking at implementing this:

    $('#iframeID').contents().find('#a.tournav').click(function(){
    $('#iframeID'). ... //resize function here
    });
    # January 26, 2011 at 5:30 pm

    Thanks for looking again. I will test in chrome to see what your seeing. But I know firefox and others have no problem. Can you possibly try to find a solution while testing in firefox? I would love to myself but am a little lost here with the js.

    # January 26, 2011 at 10:31 pm

    Just tested it in my chrome and it works fine. But that’s still aside from the issue. I only want fancybox to resize. If it doesn’t work in one browser or another that’s another issue I will work out next.

    I’ve posted this same question now in quite a few different venues. So at this point I’m guessing there is no way to do what I want. Unless someone of unlimited knowledge chimes in that is…

    # January 27, 2011 at 10:46 am

    Is the “larger size” link inside an ifram? if so, it might be telling the wrong window to resize.

    # January 27, 2011 at 1:20 pm

    I’m not putting it in any iframe that’s just how fancybox calls an outside page. But basically yes I believe it is in an iframe.

    This guys tut I ran across says to just add the following to resize the iframe. However there is no demo and I don’t really know how to add it. Any takers?

    parent.$(“#fancy_outer”).width(100); parent.$(“#fancy_outer”).height(120);

    # January 27, 2011 at 2:34 pm

    Just FYI I have the ‘page load’ issue in both Firefox and Chrome – so it’s likely an issue with my Op system, or Java environment. I say this because I have taken copies of the HTML and Script and hosted it locally to try and get a solution, but end up sending my laptop into a ball of fire…

    # January 27, 2011 at 2:55 pm

    I have no idea why this would be since it works fine in all my browsers. It can’t be the fancybox (since it’s default behavior) so it must be the java in the virtual tour. Just change the link and therefore no java. The fancybox window should load just fine and it will just show a broken link. Sorry I would fix but works fine for me?

    # January 27, 2011 at 3:16 pm

    I scrapped all of the content from the pages, I have no idea of the cause, and I still have no solution for you :-(.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".