livequery not working with groups

StackOverflow https://stackoverflow.com/questions/4629508

Question

I am using some nice plugins from jQuery for using AJAX based sites. Now I came to the problem that I would like to use livequery for specifying my slimbox. The problem is, that it doesn't get my groups as stated in the linkFiler function.

$(document).ready(function () 
{
    $('a[rel^="lightbox"]').livequery(function()
    {
        $(this).slimbox(null, function(el) // link mapper
        {
            return [el.href, el.title + '<br/><a href=\"' + el.href + '\">Download</a>'];
        }
        , function(el) // links filter
        {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        });
    });
});

What's going wrong? In one of my pages (Biography), the slimbox only works when I refresh the page on that site, but not when clicking through my pages. The groups aren't working in the Discography section of the site.

Parts of the bio and discography pictures are as follows:

<a href="albumCover.jpg" rel="lightbox-disco"><img src="albumCover_thumb.jpg" alt=""></a>

<a rel="lightbox" href="bandPic.png"><img style="float:right;margin-left:1em;" src="bandPic_thumb.png" alt=""></a>

Thanks in advance!

UPDATE

I found my problem in the slimbox code, because it uses the this to be its links. So everytime livequery is fired, the this is overwritten and should actually contain the full selector. Maybe I can solve this by just saying:

$('a[rel^="lightbox"]').livequery(function()
{
    $('a[rel^="lightbox"]').slimbox(null, function(el) // link mapper
...

But doing that would make livequery fire a lot of times towards slimbox, which is not wanted behaviour. Is there a nicer way to make it not fire so often?

UPDATE2

As for the other questio in the biography pages. livequery updates on removing the image, but all the other sites are done properly on adding the images... How strange...

Was it helpful?

Solution

I actually found the solution, but it is rather strange. If someone reads this and can explain this to me, it would be nice. Somehow, livequery makes a difference in my code between empty <head> tags and filled ones. So, when I have a <style> tag inside my subpage (such as BIO or DISCO), even if it's empty, the livequery works. If I have an empty <head> tag, the livequery only works on leaving the page. Which was strange. Now I just created an empty <style> tag and every page works fine.

As for the groups problem, I did my livequery a bit different, so the livequery isn't called as much anymore. In my HTML, I'm sure that there is always a <div class="content"> in every subpage. So I could do a livequery such as:

$('.content').livequery(function()
{
    $('a[rel^="lightbox"]').slimbox(null, function(el) // link mapper
...

The problem with slimbox, is that it can just take the complete selector as its scope. So changing slimbox to a different selector, will disable the old one. In its code, it does something like this:

var links = this; // where this is the $(selector)
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top