treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Fancybox resize help please?

  • 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!
  • 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.
  • @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/
  • 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.
  • Still need help...
  • 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
    });
  • 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.
  • 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...
  • Is the "larger size" link inside an ifram? if so, it might be telling the wrong window to resize.
  • 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);
  • 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...
  • 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?
  • I scrapped all of the content from the pages, I have no idea of the cause, and I still have no solution for you :-(.