Question

I am using PrettyPhoto lightbox, and trying to set a rel attribute on a link when another non-jQuery javascript library makes that link active (it sets the links class to active) so the PrettyPhotot lightbox will open. I don’t want the link to open unless it is an active link. I am successful in setting the attribute, but every link opens in the lightbox when clicked, not just the active one. No errors in FireBug.

Prettyphoto’s code is set as so:

$("a[rel^='prettyPhoto']").prettyPhoto();

The other javascripts code for the active and inactive click:

ContentFlowConf: {
    onclickActiveItem: function (item) {
        $('.active').attr('rel', 'prettyPhoto');
    },
    onclickInactiveItem: function (item) {
    $('.active').removeAttr('rel');
        $('.item').click(function(event) {
            event.preventDefault(); 
        });
    }
}

The initial html is:

 <a class="item" title="Image" href="image.jpg"><img class="content" src="thumb.jpg" alt="Image"/></a>

The other javascript sets the html to:

 <a class="item active" title="Image" href="image.jpg"><img class="content" src="thumb.jpg" alt="Image"/></a>

I am of course a novice and not sure what will make it work. I am wondering if the .live function might need to be used?

Answer 1

Solved this a follows:

onclickActiveItem : function(){
    initCBox();
},

//lots of code here...

function initCBox(){
    var img1 = $('.item.active').attr('href');
    var label = $('.item.active .content').attr('alt');
    $.prettyPhoto.open(img1, label);
}