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:

<a href="pathToBigImage/bigImageName.jpg" class="thickbox" rel="yourGalleryName" onclick="self.parent.tb_show((this.title || this.name || null),this.href,(this.rel || false), window);return false;"><img src="pathToSmallImage/smallImageName.jpg" alt="Image Title" title="Image Title" border="0"/></a>

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.

Must have books for web developers / Livros todo desenvolvedor web tem que ter

I am addicted to IT books. If this blog helped you somehow and you want to contribute please visit my amazon wish list

  • T-SQL (SQL Server 2000)
    1. To become a guru: All from Ken Henderson
    2. For begginers in T-SQL: SQL Server 2000 Programming by Example - Rojas
  • PHP
    1. PHP and MySQL Web Development - Luke Welling and Laura Thomson
  • ColdFusion
    1. All from Ben Forta
  • Javascript
    1. Javascript bible (gold edition)
  • CSS
    1. All from Eric Meyer
  • MySQL
    1. Quick Guide MySQL Crash Course - Ben Forta
    2. For critical web systems: High Performance MySQL - Jeremy D. Zawodny and Derek J. Balling
  • Web server performance and optimization
    1. Performance by Design: Computer Capacity Planning By Example


Eu sou viciado em livros especialmente de Tecnologia da Informação. Se esse blog lhe ajudou de alguma forma e vc quer retribuir por gentileza visite minha lista na amazon.com

Segue uma lista de livros que recomendo para todos os desenvolvedores web que trabalham fazendo sites dinâmicos. 

  • T-SQL (SQL Server 2000)
    1. Para se tornar um guru: Todos do Ken Henderson
    2. Para iniciantes em T-SQL: SQL Server 2000 Programming by Example - Rojas
  • PHP
    1. PHP and MySQL Web Development - Luke Welling and Laura Thomson
  • ColdFusion
    1. Todos do Ben Forta
  • Javascript
    1. Javascript bible
  • CSS
    1. Todos do Eric Meyer
  • MySQL
    1. Guia Rápido: MySQL Crash Course - Ben Forta
    2. Para sistemas criticos: High Performance MySQL - Jeremy D. Zawodny e Derek J. Balling
  • Web server performance and optimization
    1. Performance by Design: Computer Capacity Planning By Example


Consumed By Feed-Squirrel.com