I was trying to find a way of theming lightbox differently under different circumstances. I want to keep the standard style for most purposes like image galleries and then have a completely different theme for the login modal.

I had a look at the initList function and the lightbox_modal.js function so I've come up with a rather hackish solution for now.

I added a class in the modal js file to add a class modal-login to the lightbox link (obviously I'm thinking ahead here to consider adding different classes for contact form etc).

I then changed this bit of code from the initList function:

$("a[@rel^='lightmodal']:not(.lightbox-processed), area[@rel^='lightmodal']:not(.lightbox-processed)").addClass('lightbox-processed').click(function(e) {
      $('#lightbox').unbind('click');
      Lightbox.start(this, false, false, false, true);
      if (e.preventDefault) { e.preventDefault(); }
      return false;
    });

to:

$("a[@rel^='lightmodal']:not(.lightbox-processed), area[@rel^='lightmodal']:not(.lightbox-processed)").addClass('lightbox-processed').click(function(e) {
      $('#lightbox').unbind('click');
      /* Start code changes */
      var lightbox_classes = $(this).attr('class').split(' ');
      $('#lightbox').addClass(lightbox_classes[0]);
      /* End code changes */
      Lightbox.start(this, false, false, false, true);
      if (e.preventDefault) { e.preventDefault(); }
      return false;
    });

This seems to do the trick and now my lightbox has a class of modal-login and can be styled independently of other lightbox modals.

As I said, very hackish... that split on the classes is to remove lightbox-processed from the classes and I'll need to do some conditionals and just remove it from the array instead of taking the first array item (just did that to test it). This would also mean you could add more than one class and join the string again after removing lightbox-processed.

Any thoughts? Is there a better way to accomplish this, maybe through the rel on the link rather than adding classes? I'm about to head home so I'll sit tonight and try to get the code looking nicer and a little more functional then get a patch for review but comments and suggestions are very welcome.

Comments

Chris Graham’s picture

Just in case someone has noticed this yet... I've just realised I can add all the classes from the link to the lightbox and then use removeClass() in jQuery to remove lightbox-processed!!!

I really overcomplicated things there :)

Canine Coaches’s picture

subscribing

Chris Graham’s picture

Status: Active » Needs review
StatusFileSize
new1.26 KB

OK, finally got SVN diff to play ball and have my rather modest patch ready for review. I've added classes for the login and contact modals so that the outer #lightbox div gets a class of lightmodal-login or lightmodal-contact respectively.

YK85’s picture

I am in need of theming the login box that popups with lightbox2.
Mine currently looks too plain (please see attached).
Does this help with the theming of the lightbox2 login box?

A more general question - I am wanting only the login support functionality of lightbox2. Is there a different module that supports this or can someone help me do this another way to avoid installing another module?

Thanks!

stella’s picture

Status: Needs review » Fixed

Committed, thanks! However the real solution is to rewrite lightbox2 to use the Drupal.theme() function.

yaz085 - you can also look at thickbox, and possibly the popups and modalframe modules too.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.