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:
<a class=\"thickbox\" href=\"...\">Link</a>
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:
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
The page dims and the thickbox progress bar pops up, but then nothing happens - presumably because I'm calling the function, but I'm not actually passing any data to it (so it doesn't know what to load).
I'm using thickbox as an iframe, so it's actually displaying another page. How do I pass the URL of the page I want to open?
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...
.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
That would make any td inside the table with id test a thickbox target.
Okay, we're getting closer...:lol:
Thickbox.js already calls tb_init when the page is finished loading, so I added my table cells (td.container) to the function:
//on page load call tb_init $(document).ready(function(){ tb_init('a.thickbox, area.thickbox, input.thickbox, td.container');//pass where to apply thickbox imgLoader = new Image();// preload image imgLoader.src = tb_pathToImage; });
Now when I click on the table cell, the page dims and the loading animation pops up...but then it just sits there indefinitely, because it doesn't know what to display. With a normal link, it would scan the href attribute and then display whatever that points to in the thickbox. But a table cell doesn't have any attribute like that, so how would I tell the thickbox what to display?
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.
table#test td { height: 100%;
} table#test td a { display: block; height: 100%; }
<table id=\"test\"> <tbody> <tr> <td><a href=\"#\">Link</a></td> <td>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. </td> </tr>
<tr> <td><a href=\"#2\">Link 2</a></td> <td>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. </td> </tr> </tbody> </table>
That seems to make sense, yet it doesn't want to work. I set the link to block with 100% width and height, and also 100% width and height on the table cell. Even with that, everything looks and works exactly the same, except the active area for the link now stretches to the right edge of the table cell, rather than ending when the text ends. There's regular text in the table cells too, maybe that's screwing it up?
What about this...could I wrap the table cells in a link set to display: block? Like this:
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:
$(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.
$(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:
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
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.
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:
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:
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
Hmm...I tried this, just to see what would happen:
The page dims and the thickbox progress bar pops up, but then nothing happens - presumably because I'm calling the function, but I'm not actually passing any data to it (so it doesn't know what to load).
I'm using thickbox as an iframe, so it's actually displaying another page. How do I pass the URL of the page I want to open?
That would make any td inside the table with id test a thickbox target.
I dont know enough about thickbox really - but to load a file into a poped up div you can do it like that
Okay, we're getting closer...:lol:
Thickbox.js already calls tb_init when the page is finished loading, so I added my table cells (td.container) to the function:
Now when I click on the table cell, the page dims and the loading animation pops up...but then it just sits there indefinitely, because it doesn't know what to display. With a normal link, it would scan the href attribute and then display whatever that points to in the thickbox. But a table cell doesn't have any attribute like that, so how would I tell the thickbox what to display?
Let me know how that fits into your solution.
Cheers,
Dave
What about this...could I wrap the table cells in a link set to display: block? Like this:
table tr a {display: block;
}
Or would that be invalid/ridiculous? :lol:
Can I see a link to the example you tried and I'll see if I can help.
Dave
In your thickbox.js file...
Find:
$(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.
$(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:
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
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.
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???
You could have just placed a transparent linked div in the td,equal to the table cell,and it's contents inside the div.
Hi I want to display a gallery of external images through thickbox, on click of a link.
@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.