jquery, thickbox and iframe
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:
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.
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 :)
http://blog.emanuelcosta.com/tests/jquery_thickbox... and if you want to see the files in production go to http://www.sojodesign.com and click the porfolio link.
Thanks for the information on the comment box, on firefox works fine :)
Regards
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.
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?
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'));
http://codylindley.com/thickboxforum/comments.php?...
The basic idea behind it all is that Thickbox must initiate all functions in the parent window straight away. However these functions will all refer to the iframe content. Explained how it could be done for iframe and parent window (yes, the solution above misses some points btw).
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!
am i supposed to change "this.href" or "this.name" to something? or do i just leave the code how you have it???
http://www.sojodesign.com/jquery/thickbox.js