Opening a thickbox via onclick?

[daGUY]

I’m building a site that makes extensive use of ThickBox to display images. The site has a lot of tabular data; each table cell has an image and some text. Right now, I have both the image and text in each cell set up as a thickbox link, so the user can click either one to view a larger image.

What I’d like to do, though, is make it so that if the user clicks anywhere in the entire table cell, the thickbox will open (providing a much larger click target). The problem is, in order for ThickBox to work, you have to call it by adding a "thickbox" class to your link:

Code:

Link

Since I can’t wrap a link around a table cell, what I want to do is attach an onclick event to each cell that calls the thickbox that way. But I can’t find anything about how to call a thickbox from an onclick event.

Anyone here have any ideas? Would I need to modify thickbox.js with my own code? Is this even possible? :lol:

[Rob MacKay]

well jQuery dosnt need a link to be clicked in order to work a "click" lol

Try adding a class of thickbox to the table or div wich the table is in – however you have done it, and see if thickbox pics that up… it might not, but give it a go. lol

[davesgonebananas]

Try calling tb_init(‘#mytable td’); Worth a try eh? mytable is the id of your table btw.

[davesgonebananas]

tb_init should be called when the page loads so in your code it would be

Code:

$(document).ready(function() {
tb_init(‘table#test td’);
});

That would make any td inside the table with id test a thickbox target.

[Rob MacKay]

Personally I wouldnt do it as an iFrame, I would use ajax and load the data in… I dont know how thickbox works, but the jQuery would be something like something like this…

Code:

.load(“myfile.html”);

I dont know enough about thickbox really – but to load a file into a poped up div you can do it like that

[davesgonebananas]

Ajax would be better. I’m pretty sure thickbox has built-in Ajax support – i’m not really a thickbox expert but I found this with a quick google – http://www.maxkiesler.com/index.php/des … ctionality

[davesgonebananas]

Ok where definitely getting into the realms of hacking now. Let’s rething the problem. You want users to be able to click anywhere in your td. Thickbox requires an anchor element to work properly. Let’s make the anchor element fill the entire cell. To do this we make the links block elements and give them a height 100% and give the td a height 100% to match.

Code:

table#test td {
height: 100%;

}
table#test td a {
display: block;
height: 100%;
}

Code:

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel turpis. Donec quam. Nam libero dolor, tincidunt et, sodales et, interdum nec, erat. Integer non nisi quis elit rhoncus tincidunt. Phasellus lacus erat, semper nec, placerat vitae, placerat a, eros. Quisque et tortor. Aenean gravida nisl a sem. Duis ullamcorper risus eu justo. Integer vestibulum. Mauris nulla justo, consectetur ut, auctor ut, lacinia et, velit. Ut vitae eros iaculis urna lacinia elementum. Morbi et velit. Donec sagittis semper nibh. Vestibulum lectus tortor, venenatis at, pharetra ut, mattis at, magna. Mauris vel tortor.

Link 2

Sed laoreet. Nunc ac lacus. Integer tortor tortor, ornare id, ornare in, blandit a, orci. Nunc id nulla quis pede iaculis tempus. Phasellus consectetur luctus velit. Nullam imperdiet lacus ut turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ut turpis a magna tempus volutpat. Aliquam tellus augue, molestie lacinia, varius cursus, auctor ut, velit. Integer et magna vel nibh tempor aliquet. Aliquam erat. Integer dapibus vulputate dui. Duis molestie urna et libero. Mauris auctor sem ac augue. Duis id odio. In consequat turpis. Aenean non augue.

Let me know how that fits into your solution.

Cheers,
Dave

[davesgonebananas]

Definitely don’t do that as it’s really bad practice and will result in code that doesn’t validate.

Can I see a link to the example you tried and I’ll see if I can help.

Dave

[flashaddik]

Sorry to dig up an old thread.. however I think I found a solution for making a table cell work with thickbox.

In your thickbox.js file…

Find:

Code:

$(document).ready(function(){
tb_init(‘a.thickbox, area.thickbox, input.thickbox’);//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;
});

and add td.thickbox to the tb_init parameters.

Code:

$(document).ready(function(){
tb_init(‘a.thickbox, area.thickbox, input.thickbox, td.thickbox’);//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;
});

Find:

Code:

function tb_init(domChunk){

$(domChunk).click(function(){
var t = this.title || this.name || null;
var a = this.href || this.alt;
var g = this.rel || false;
tb_show(t,a,g);
this.blur();
return false;
});

}

and add ‘|| this.abbr’ to the variable a

Code:

function tb_init(domChunk){

$(domChunk).click(function(){
var t = this.title || this.name || null;
var a = this.href || this.alt || this.abbr;
var g = this.rel || false;
tb_show(t,a,g);
this.blur();
return false;
});

}

then simply place the class="thickbox" and abbr="yourlinkhere.html" to the table cell.

Maybe someone out there can find a hole/flaw in this but it seems to work fine for me. I haven’t tested in on older browsers such as IE6.

[swapnil]

hi,
i have a code in which thickbox is used and displaying the map. i want to display it into a page rather than ajax. can you help me???

[AndrewPham]

You could have just placed a transparent linked div in the td,equal to the table cell,and it’s contents inside the div.

[sarika1182]

Hi I want to display a gallery of external images through thickbox, on click of a link.

[Paulie_D]

@sarika1182 Please start a new thread with your question.

I would help if you showed us what you have tried so far though as your question is very vague.

[Author]

Posts