CODEWITHSUNDEEP
jquerycolorbox
vector
vector

Reputation: 7576

colorbox - list of links and contents for modal

Given the following structure:

<table class="myTable">

    <tr>
        <td class="block.productgrid.quickview.cell">
            <a class="myLink">My Link</a>
        </td>
    </tr>


    <tr>
        <td>
            <div class="contentsForColorbox">
                Some contents
            </div>
        </td>
    </tr>

</table>

... where I'd have a several tables 'myTable' like this, How can I pair up click on 'myLink' with display of 'contentsForColorbox' in colorbox?

I think I'm close but I'm missing something:

$( '.myLink', this).click( function(){
    $.colorbox({
        inline : true,
        'href': $( '.contentsForColorbox') ,
        'width': 500,
        'height': 350
    });
});

... as of now if I have 5 tables 5 of 'contentsForColorbox' will show up in the colorbox. Sigh, too long a day :-(

Upvotes: 0

Views: 110

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is the selector used - $( '.contentsForColorbox'), it targets all elements with the given class instead you need to find the target relative to the clicked link

$( '.myLink', this).click( function(){
    $.colorbox({
        inline : true,
        'href': $(this).closest('table').find('.contentsForColorbox') ,
        'width': 500,
        'height': 350
    });
});

Demo: Fiddle

Upvotes: 1

Related Questions