EmanuelCosta.com

E-Commerce, SEO/SEM/Online Marketing, Web Development, Usability, WordPress & WooCommerce

Home » jquery, thickbox and iframe

jquery, thickbox and iframe

Posted on Written by

I am using jquery‘s thickbox 3.1 for an image gallery. My problem started because the previous developer made the site using iframes. I strong recommend you not using iframes or frames, and there are many reasons for you to not using them.

Of course this is a hack, and the best scenario you shouldn’t use frames and then do the coding in “perfect” manner.

In order to make the thickbox work inside an iframe you must do the following:

1 – Add jquery and thickbox files to both main and iframe pages. This is required so the previous and next link works on the inline popup (thickbox).

2 – Make the following changes to the thickbox.js file

2.1. – Replace the code inside the function tb_init(domChunk) tb_show(t,a,g); to self.parent.tb_show(t,a,g,window);

2.2. – Replace
function TB_show(caption, url, imageGroup)
to
function TB_show(caption, url, imageGroup, refWindow)

2.3. – Replace
TB_TempArray = $(“a[@rel=”+imageGroup+”]”).get();
to

TB_TempArray = refWindow.$(“a[@rel=”+imageGroup+”]”).get();

2.4. – Replace
tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
to
tb_show(TB_PrevCaption, TB_PrevURL, imageGroup, refWindow);

2.5. – Replace
tb_show(TB_NextCaption, TB_NextURL, imageGroup);
 to

tb_show(TB_NextCaption, TB_NextURL, imageGroup, refWindow);

3 – Now the code for your links must be something like this:
Image Title

That’s all you need. It took me while to figure this out. On the internet I found some information but it was confusing so I decided to compile everything in one post. I hope this helps anyone looking to do the same.

Comments

  3. Sem says

    Ah same issue as sarah and janus though when using pdf file (fine with image)… I guess remains a slightly desparate hack (a compliment!)

  5. whiplash injury says

    You got a really useful blog I have been here reading for about an hour.
    I am a newbie and your success is very much an inspiration for me. Keep up the good post!

  7. playground surfaces says

    I would like to thank you for the endeavors you have made in publishing this article. I am trusting the same best work from you in the future as well. In fact your fanciful writing abilities has inspired me to start my own blog now. Genuinely the blogging is spreading its wings rapidly. Your write up is a fine example of it.

  10. Sem says

    Ah same issue as sarah and janus though when using pdf file (fine with image)… I guess remains a slightly desparate hack (a compliment!)

  16. Adam Luz says

    This fix did not work for me. Is it possible you could upload your js file and offer it for download?

    Thanks
    Adam
    PS. Your comment box is acting weird. If I don’t use enter it does not go to a new line and I can’t see my text anymore. Might want to shorten the width. IE7 🙂

  18. Sarah says

    Thank you for the time you’ve clearly put into this, but after trying to implement your changes three times (each after re-downloading a fresh set of the thickbox.css, thickbox.js, and jquery.js files), I’m still having problems.

    The thickbox is now outside the iframe and in the parent window, but, it’s displaying on the left-hand side of the screen, with half of the image off-screen. The screen overlay effect, the image caption, next/previous buttons, and close options aren’t showing up either.

    Any ideas? The website you linked is beautiful, by the way.

  19. Emanuel Costa says

    Hi Sarah, I don’t know on top of my head what could be the problem on your page. Can you give me the link to your gallery? Cheers

  20. Eamon says

    This worked a treat followed the code verbatim, had a link inside a google map i wanted to open into a thickbox

  21. leizel.monceda says

    Sincerely, your article goes to the nitty-gritty of the topic. Your pellucidity leaves me wanting to know more. I will instantly grab your feed to keep up to date with your website. Sounding Out thanks is simply my little way of saying bravo for a remarkable resource. Accept my warmest wishes for your incoming publication.

    <a href="http://www.playgroundsurfaces.co.uk">wet pour prices</a>

  22. whiplash says

    I genuinely liked reading through your post!. Quality material. I might advise you to come up with blogposts even more often. By doing this, having this kind of a worthy website I think you will probably rank higher in the search engines.

    whiplash

    http://www.whiplash1.co.uk

  24. SativoOne says

    This works!!!! we need the last version of thickbox and jquery, and replace "TB_TempArray = refWindow.$("a[@rel="+imageGroup+"]").get();" by "TB_TempArray = refWindow.$("a[rel="+imageGroup+"]").get();". But…the same script not is working when y call this from other thickbox frame :(…..

  25. becky says

    I’m sorry I’m still kind of new at this- but in the section where you wrote "your code for your links must be something like this:

    am i supposed to change "this.href" or "this.name" to something? or do i just leave the code how you have it???

  26. Zuriel says

    I am trying to get thickbox to invoke from a Frameset, the middle frame has a link that pops up a iframe. I am unable to get this working once the middle frame runs from inside the frameset.

    if i pull the frameset apart and just open middle frame by itself, it works perfectly.

    the 2 things that don’t work are

    1) the overlay does not cover the entire frameset. there are 150 pixels at the top of the page that aren’t covered because of the top navigation frame.

    2) the self.parent.tb_remove(); code does not work inside my iframe to close the thickbox.
    the code worked when the page loads by itself, but once the frameset loads self.parent no longer is pointing to the correct thing…

    any ideas?

  27. Zuriel says

    i want to add that what I am asking has nothing to do with the code you posted… this is just using the default thickbox. i just figured you could potentially know since you just got done writing code with a similar issue.

  29. Debt management advice says

    Thanks for your page. I find out that your blog are one of those interesting blog in social media marketing. Sharing informative facts makes me conclude that you are one of those top blogs online. Keep it up!

  30. francis says

    this looks like the solution I’m after (trying to open a thickbox containing a flash video display from within an iframe) but I’m a complete novice at js – can you give me an indication of the values I should associate with this string? onclick="self.parent.tb_show((this.title || this.name || null),this.href,(this.rel || false), window);return false;">

  31. janus says

    Hi, i’ve got bit of the same problem as Sarah.
    My image get enlarged outside the iframe-wich is good- but the buttons of the thickbox and the overlay are both gone. Does anyone has a solution?

    Thanx!

  32. Favio says

    Thank you so much!, I used it in a thickbox that loads an iframe content (im not using it for images).
    Greetings from Argentina.
    Favio.-

  33. accident compensation says

    a very nice post.. many people want to learn about SEO and Intenet marketing as well

  34. Nate says

    I’m struggling with something similar, but not quite the same.
    I want to make a Thickbox with the iframe query parameter append html in a div of the parent window
    I’ve tried many things and nothing seems to work.

    Here’s the url that opens the thickbox:

    /test/index.cfm?height=422&width=465&productID=9&TB_iframe=true&TB_iframe=true

    Here’s a few things that I’ve tried in this thickbox window that don’t
    work:

    console.log($(this).parent(‘#numberofCartItems’).text());
    $(this).(‘#numberofCartItems’,parent).empty();
    $(‘#numberofCartItems’,parent).empty();
    $(‘#numberofCartItems’).empty();
    $(‘#numberofCartItems’).parent().empty().append("1");
    console.log($(‘div:contains("3")’).text());
    console.log($(this).parents(‘div’));

Need quick tech advice? Pick my brain:

Discover more from EmanuelCosta.com

Subscribe now to keep reading and get access to the full archive.

Continue reading