The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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.

    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

    This reply has been reported for inappropriate content.

    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:

    # January 25, 2011 at 4:47 pm

    This reply has been reported for inappropriate content.

    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.

    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

    This reply has been reported for inappropriate content.

    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'). ... //resize function here
    # January 26, 2011 at 5:30 pm

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed