CODEWITHSUNDEEP
jquerypluginscolorbox
Heather Hins
Heather Hins

Reputation: 2395

jQuery Colorbox - Alternative to using the rel attribute?

Apparently I'm just full of Colorbox questions today. ( http://www.jacklmoore.com/colorbox/ )

The plugin is intended to be used on links, using the rel attribute for grouping / galleries.

I'm using a LI and want to group them. I tried using data-rel="group-a" and feeding the plugin -> rel: $(this).data('rel') but it doesn't seem to like that...

Any other ideas? Thanks again, I really really appreciate this.

Upvotes: 0

Views: 2466

Answers (1)

Daved
Daved

Reputation: 2082

First, the reason it's not grouping is because you are binding the colorbox to show using direct HTML references on a click action. It's individual when you fire a single instance using the $.colorbox({}) specifying the HTML. What you want to do is bind it to all items you want it to work with and use the options to specify the parameters it needs. The other thing to keep in mind is the grouping works off of classes so you need to make sure your elements have the class name you are grouping with in them.

Code:

$(document).ready(function () {
    $('.inline').colorbox({
        href: function() { return '#'+$(this).data('modal')},
        rel: function() { return $(this).data('rel')},
        inline: true,
        width: "70%"
    });
});

Updated fiddle: http://jsfiddle.net/kDK3s/1/

Since you are working with content in the page, you can use the href along with the inline option to specify the content being used is coming from the current page. You can also use a function for any of the options to access the element and return your data. You will see that the href is coming from the data-modal but has the hash sign prepended in the function, and the rel is using the same technique to get the rel data value to group according to class name.

Update: Also, if you want the title to not say "images" in it, you can get rid of it using the current option "current: ''" and you can additionally specify a title using the "title: 'something'" option that you can also pull from a data attribute if you would like.

Updated fiddle for that: http://jsfiddle.net/kDK3s/2/

Edit: I clicked POST a little too early before finishing the explanation. I also updated the fiddle link to point to the correct version with the REL coming from your data. Oops.

Upvotes: 3

Related Questions