Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Opening a thickbox via onclick?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #24233
    daGUY
    Member

    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:

    #54324
    Rob MacKay
    Participant

    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

    #54331

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

    #54348

    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.

    #54349
    Rob MacKay
    Participant

    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

    #54350

    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

    #54356

    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

    #54729

    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

    #61798
    flashaddik
    Member

    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.

    #112750
    swapnil
    Member

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

    #112819
    AndrewPham
    Participant

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

    #131509
    sarika1182
    Member

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

    #131518
    Paulie_D
    Member

    @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.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Opening a thickbox via onclick?’ is closed to new replies.