Grow your CSS skills. Land your dream job.

Opening a thickbox via onclick?

  • # February 25, 2009 at 3:34 pm

    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:

    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
    # February 25, 2009 at 6:50 pm

    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

    # February 25, 2009 at 7:33 pm

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

    # February 26, 2009 at 9:52 am
    "davesgonebananas" wrote:
    Try calling tb_init(‘#mytable td’); Worth a try eh? mytable is the id of your table btw.

    Hmm…I tried this, just to see what would happen:

    Code:
    Cell Content

    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?

    # February 26, 2009 at 12:30 pm

    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
    # February 26, 2009 at 1:16 pm

    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

    # February 26, 2009 at 1:27 pm

    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

    # February 26, 2009 at 4:55 pm
    "davesgonebananas" wrote:
    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.

    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:

    Code:
    //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?

    # February 26, 2009 at 5:43 pm

    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

    # March 5, 2009 at 3:52 pm

    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:

    Code:
    table tr a {
    display: block;
    }
    Code:


    image description

    Or would that be invalid/ridiculous? :lol:

    # March 5, 2009 at 3:55 pm

    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

    # August 5, 2009 at 1:20 pm

    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.

    # October 27, 2012 at 8:07 am

    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???

    # October 28, 2012 at 10:21 am

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

    # April 12, 2013 at 6:36 am

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

Viewing 15 posts - 1 through 15 (of 16 total)

The topic ‘Opening a thickbox via onclick?’ is closed to new replies.

*May or may not contain any actual "CSS" or "Tricks".