Welcome, Guest

Want to take part in these discussions? If you have an account, sign in now.

If you don't have an account, apply for one now.

1. • CommentAuthorroel018
   • CommentTimeAug 17th 2006

    
   Hi folks,
   
   I have a small iframe in my page which I use for navigation.. From within this iframe, I would like to open a thickbox, however - when I do this - the thibox loads into the iframe only and thinks the iframe is the parent window..... I tried target="_parent" in the link but it doesn't work :(
   
   Does any1 have any suggestions on this ?????
   
   Thnx,
   Roel
2. • CommentAuthorcodylindley
   • CommentTimeAug 18th 2006 edited

    
   Roel
   
   I believe, but have not tired this...if you change this line of code...it will work. (line 18 in the thickbox.js file)
   
   TB_show(t,this.href,g);
   
   to
   
   
self.parent.TB_show(t,this.href,g);
   
   This change however will only make thickbox work from the iframe (and the code thickbox code as to be in the iframe and in the parent window). If you want to have it work from both the iframe and the parent window you are going to have to hardcode the click event on the links in the iframe with
   
   onclick="self.parent.TB_show((this.title || this.name || null),this.href,(this.rel || false));return false"
   
   But, again I have not tested this. Personally I think I would go the route of hardcoding the links in the iframe.
3. • CommentAuthorwa(a)r
   • CommentTimeAug 26th 2006

    
   hi at all,
   
   i had the same problem and with the suggested solution it works fine... but now another problem appeared. if i open an image from the iframe, it isn't possible to go to the next/previous picture. the links aren't shown.
   
   is there any possibility to fix it up?
4. • CommentAuthordns77x7
   • CommentTimeAug 30th 2006

    
   wa(a)r
   
   I am attempting to launch a .swf file from an iframe. You got it to work, but I can't seem to figure it out. Can you give me a link, or some guidance. The site I want to use it on is elcapfootball.org under the "Game Highlights" tab. I'm currently using the Lightbox script for our "Action Shots" and would love to use Thickbox to display the video clips of our highlights. Your issue of not being able to "go to the next/previous picture wouldn't be an issue for me. Please help me out.
   
   Thanks in advance
   dns77x7
5. • CommentAuthorwa(a)r
   • CommentTimeAug 31st 2006 edited

    
   hey dns77x7,
   
   i just changed in the original "thickbox.js" file in the function "TB_init" the following:
   
   
function TB_init(){
$("a.thickbox").click(function(){
var t = this.title || this.name || null;
var g = this.rel || false;
self.parent.TB_show(t,this.href,g); <------ edited line
this.blur();
return false;
});
}

   
   this should work... in the link, from which you'd like to call the thickbox you have to insert something like that:
   
   
<a href="your_link_url" class="thickbox" rel="your_link_description">link</a>

   
   greets
   
   ps: any suggestions for the next/previous picture?
6. • CommentAuthordns77x7
   • CommentTimeSep 1st 2006

    
   Hi wa(a)r,
   
   Thank you so much for your help. I edited the thickbox.js file as you indicated and coded each link according to the instruction, yet it still loads the .swf file in the iframe window, instead of outside the iframe window. My source code in the is:
   
   
   @import "css/global.css";
   @import "thickbox-code/thickbox.css";
   
   
   
   
   <script src="js/jquery-compressed.js" type="text/javascript">
   <script src="thickbox-code/thickbox.js" type="text/javascript">
   <script src="js/global.js" type="text/javascript">
   
   The Link is:
   
   Lindley #14 to AJ Conti #80
   
   Can you give me a link to the page that you got it to work on? It would help if I could see your source code.
   
   I wish I could help you with your next/previous issue, but I'm really a novis at coding. I only know enough to be dangerous.
   
   Many thanks,
   dns77x7
7. • CommentAuthordns77x7
   • CommentTimeSep 1st 2006

    
   IGNOR the "Lindley #14 to AJ Conti #80" link above. I tried to show you the way I coded my links.
   
   The link looks like this:
   
   <a href="paloverde/ajcontirun1.swf" class="thickbox" rel="palo verde" title="Lindley to AJ Conti">Lindley #14 to AJ Conti #80</a>
   
   dns77x7
8. • CommentAuthorwa(a)r
   • CommentTimeSep 3rd 2006

    
   hmm... maybe you should use the "jquery.js" instead of the "jquery-compressed.js". but i'm not really familiar with java script, so that's only a speculation.
   
   i changed the website with the iframe now, to one without... but if you'd like, you can download a working example with an iframe from my website, hope that will help something...
   
   download
9. • CommentAuthordns77x7
   • CommentTimeSep 6th 2006

    
   wa(a)r
   
   Thank you for all your help. I still haven't gotten it to work. I think that because the site loads the page from a CSS file, that there is a conflict in adding the thinkbox.css content to the existing css file. I tried adding the thickbox.css along with the other css file and that didn't work either. If I'm going to use Thickbox, I'll have to load the page outside the iframe in a new window.
   
   dns77x7
10. • CommentAuthorchriscolden
    • CommentTimeOct 24th 2006 edited

     
    Hi all,
    
    I have a fix for the next / previous links not working when using the first mod.
    
    Ok firstly Id like to surgest you use the following hard coding method as stated above (1st reply by codylindley) to break out of the frame, with a slight modification, which will become apparent soon. I've added a referance to the window.
    onclick="self.parent.TB_show((this.title || this.name || null),this.href,(this.rel || false), window);return false;"
    
    Ok now to get the prev / next working with group images. Edit the following line to include the same window referance.
    
    Line 18
    TB_show(t,this.href,g);
    to
    TB_show(t,this.href,g,window);
    
    Line 24
    function TB_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
    to
    function TB_show(caption, url, imageGroup, refWindow) {//function called when the user clicks on a thickbox link
    
    Line 62
    TB_TempArray = $("a[@rel="+imageGroup+"]").get();
    to
    TB_TempArray = refWindow.$("a[@rel="+imageGroup+"]").get();
    
    Line 120
    TB_show(TB_PrevCaption, TB_PrevURL, imageGroup);
    to
    TB_show(TB_PrevCaption, TB_PrevURL, imageGroup, refWindow);
    
    Line 130
    TB_show(TB_NextCaption, TB_NextURL, imageGroup);
    to
    TB_show(TB_NextCaption, TB_NextURL, imageGroup, refWindow);
    
    Thats it. 5 Lines later and your all set. Hope this helps someone and is not too confusing. Took me a few hours to work this one out.
    
    Chris
11. • CommentAuthorarno
    • CommentTimeNov 4th 2006 edited

     
    Hello,
    
    I had the same problem with the iframe, but it has been solved thanks to the first post of codylindley. It works fine.
    However I did have this problem with the next / previous link, and i tried your code, Chris. But I just cannot make it work :/
    Well basically when i click on the thumbnail, the image opens in the same window, like a "normal" link. In my iframe i have this code :
    
<a href="big_image_url"><img src="thumbnail_url" onclick="self.parent.TB_show((this.title || this.name || null),
this.href, (this.rel || false), window);return false;"/></a>

    
    is that ok ?
    I guess there's a problem with calling TB_show function, since it's the only thing not well described here and i am so bad at programming.
    Thanks for your help !
    
    Arno
12. • CommentAuthorhexica
    • CommentTimeNov 7th 2006

     
    Hi guys,
    
    I was extatic when I found this thread - I thought it'd save me!
    
    For some reason codylindley's fix in the second post in this thread doesnt seem to work for me. Could this be because I'm using the newest version of Thickbox?
    
    The link to my website with the issue is: http://www.theloop.uk.com/final/member2.php
    
    I've reverted it back to the original script so you can see the iframe problem - click any of the photos in the middle page, then select a date, thn try clicking on a photo. I've combined Plogger with Thickbox - or at least tried to!
13. • CommentAuthorMagic
    • CommentTimeNov 9th 2006

     
    Hi all,
    
    Everythig was fine, until I tried to solve prev-next problem.
    I followed chriscolden's instructions and now images are opening two times after a click. One in iframe and another one as it should, above everything.
    Any ideas what could be wrong
14. • CommentAuthorralfgassner
    • CommentTimeNov 9th 2006 edited

     
    Hi,
    
    codylindley's fix works for a few weeks, and now "self.parent.TB_show(t,this.href,g);" won't work :(
    I've no idea why.
    
    Ralf
15. • CommentAuthoradelecolle
    • CommentTimeNov 30th 2006

     
    Hello,
    
    I am able to open iframe links in parent with this:
    
    <img src="small.gif" alt="Single Image" onclick="self.parent.TB_show((this.title || this.name || null),'large.gif',(this.rel || false));return false">
    
    I'm new at this, but hope this helps.
    
    Arnaud
16. • CommentAuthoradelecolle
    • CommentTimeNov 30th 2006

     
    This is a series of tests. I'm thinking about switching over from lightbox to thickbox. It's sloppy but take a look at the 2 iframes.
    
    http://www.rivingtonclub.com/tbox_tests.html
    
    Arnaud
17. • CommentAuthoremanweb
    • CommentTimeSep 27th 2007

     
    It took me while to understand the solution sent to this page so I posted on my blog detailed information:
    http://blog.emanuelcosta.com/index.cfm/2007/9/27/jquery-thickbox-and-iframe
18. • CommentAuthorSarah
    • CommentTimeSep 29th 2007

     
    I have tried all of the suggestions here, as well as the instructions on the blog that emanweb posted. Unfortunately, I still cannot get my thickbox images to display in the parent window - they're still stuck in the iframe.
    
    Following emanweb's blog, the most progress I made was to have the image display on the left-hand side of the window, with half of the image off-screen. However, the screen overlay effect, image test, prev/next buttons, and close link all disappeared on that attempt as well. Codylindley's hardcoding suggestion didn't seem to have an effect. Wa(a)r's suggestion made my image appear as a normal link to an image would (as in, a link to image.jpg), rather than as any kind of thickbox. With Chriscolden's instructions, two images appeared - one as a thickbox in the iframe, and another half-offscreen on the left side of the parent window, with no next,previous, close, or description text.
    
    After all of this, breaking out of the iframe is my main concern. If the previous/next links work, that would be great, but they're of far less concern to me than making sure the images display in the parent, rather than the iframe window. Does anyone have any suggestions? As I'm not a skilled programmer, I wondered if there's maybe something that I was supposed to adjust to fit my page/images that perhaps I misunderstood. I essentially copied and pasted the fixes listed here, but if I'm supposed to customize any of it (such as the "onclick" section), I'm not sure where to do that. Any advice would be extremely helpful.
19. • CommentAuthorkym
    • CommentTimeOct 1st 2007

     
    Hi Sarah
    
    Have you been able to solve this problem. I am faced with the same issue and followed lots of sugestions with no success.
    
    Any help would be great.
20. • CommentAuthorkym
    • CommentTimeOct 4th 2007

     
    Hello All
    
    Regarding this problem I followed the instructions of Emanuel posted elswhere
    
    http://blog.emanuelcosta.com/index.cfm/2007/9/27/jquery-thickbox-and-iframe
    
    After I modified the thickbox.js file as per the instructions an installed the links in the head section of both the iframed page and the parent page, it started working. The extra onclick javascript that he mentions doesnt seem to be required, it just works?!?!.
    
    Good luck everyone
21. • CommentAuthorminibb_paul
    • CommentTimeJan 15th 2008 edited

     
    I have followed all advices mentioned above as well, including emanuelcosta blog which I have found first, but still with no luck. After all I have deeply thought the problem out myself and got luck to get it working with the latest version of Thickbox 3.1. I appreciate the solutions posted in this thread but I think they all are missing a bit. At some point I've got luck to open the image from the images gallery of Thickbox under the parent window, however Previous / Next menus were not visible at all.
    
    Below is the step-by-step solution which absolutely worked for me in all aspects (except propably Esc button was not working for Close but I simply removed it). Sharing it here with you guys and hope this free attempt will help someone else as much as my free forum software project helps ;-)
    
    0. For the first you must be sure your "native" Thickbox version is set up and working correctly. For this you must open the file which is referred in the iframe in the separate browser window and test it through. Your iframe should include all referrences to the initial thickbox.js and .css files.
    
    1. Be sure also your iframe has id and name attributes with the same value (for example, id="items_list" name="items_list")
    
    2. Duplicate the latest version of thickbox.js in 2 copies, naming thickbox_parent.js and thickbox_iframe.js. At this point you must understand that your parent window and iframe must include different versions of .js files which we will modify as described below.
    
    3. Modify thickbox_iframe.js and leave only the top part of file where tb_pathToImage is declared as much as two functions:
    
    //on page load call tb_init
    and
    //add thickbox to href & area elements that have a class of .thickbox
    
    I recommend to remove all other functions from that file.
    
    4. Now, in the function tb_init change
    
    tb_show(t,a,g);
    
    to
    
    self.parent.tb_show(t,a,g,window);
    
    Save the file - we're done with this copy.
    
    5. Modify thickbox_parent.js and apply the changes proposed above by mr. Chris Colden, i.e. change:
    
    function tb_show(caption, url, imageGroup)
    
    to
    
    function tb_show(caption, url, imageGroup, refWindow)
    
    then
    
    TB_TempArray = $("a[@rel="+imageGroup+"]").get();
    
    to
    
    TB_TempArray = refWindow.jQuery("a[@rel="+imageGroup+"]").get();
    
    then
    
    tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
    
    to
    
    tb_show(TB_PrevCaption, TB_PrevURL, imageGroup, refWindow);
    
    then
    
    tb_show(TB_NextCaption, TB_NextURL, imageGroup);
    
    to
    tb_show(TB_NextCaption, TB_NextURL, imageGroup, refWindow);
    
    finally (this is the one which solution above misses!!)
    
    tb_init("#TB_ajaxContent a.thickbox");
    
    to
    
    refWindow.tb_init("#TB_ajaxContent a.thickbox");
    
    So there should be 5 places to modify where the parent window should refer to the iframe which actually opens the Thickbox and all the Thickbox content must be listed in this iframe.
    
    Save and close this file after you've done.
    
    6. Now it's the time to put links to the thickbox files in both iframe and your parent HTML. You must have something like this for iframe:
    
    <script src="js/jquery.js" type="text/javascript" language="javascript">
    <script src="js/thickbox_iframe.js" type="text/javascript" language="javascript">
    
    and like this for the parent:
    
    <script src="js/jquery.js" type="text/javascript" language="javascript">
    <script src="js/thickbox_parent.js" type="text/javascript" language="javascript">
    
    7. Also don't forget to copy loadingAnimation.gif under the proper images folder and specify it under tb_pathToImage variable of both files.
    
    8. As kym mentioned above, for me it was not necessary as well to insert additional onclick tags for a href's in the iframe content as Cody Linley described initially. It should all work if you skip this point.
    
    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.
    
    Don't hesitate to post your comments about my solution here or even better just drop me a note on my own forums where you can safely post as a guest without registration because after problem is solved I won't get back here :-) Cheers!