[Ext.ux.Lightbox] old style grouping

[karl007]

Hello everyone...

I missed the old style grouping (rel="lightbox[group1]" or rel="lightbox-group2"), especially to replace the "Original" Lightbox without changing the links.

Here is a fix I wrote:

actAsLightbox: function() {
    var sel = 'a[rel^=lightbox]';
    if(selectors.indexOf(sel) === -1)
        selectors.push(sel);
    Ext.fly(document).on('click', function(ev){
        var target = ev.getTarget(sel);    
        if (target) {
            // a group? lightbox[g1] || lightbox-g1 ...
            if (target.rel != 'lightbox') {
                var group = true;
                // ] are not allowed in DomQuery string
                var groupSel = 'a[rel^="' + target.rel.replace( ']', '') + '"]'
            }
            ev.preventDefault();
            this.open(target, groupSel || sel, group || false);
        }
    }, this);
}, 

copy this method in the Ext.ux.Lightbox Object.

Example Code:

  <!-- these are one Group -->
  <a rel="lightbox[g1]" href="..."><img src="..."/></a>
  <a rel="lightbox[g1]" href="..."><img src="..."/></a>
  <a rel="lightbox[g1]" href="..."><img src="..."/></a>

  <!-- and these are another Group -->
  <a rel="lightbox_g2" href="..."><img src="..."/></a>
  <a rel="lightbox_g2" href="..."><img src="..."/></a>

  <!-- and these are a single lightbox image -->
  <a rel="lightbox" href="..."><img src="..."/></a>

  <script>
    Ext.onReady(function() {   
      // enables the Lightbox to work as the origin Lightbox
      Ext.ux.Lightbox.actAsLightbox();
    });
  </script>

testet with FF3.0 and Safari3

[hello2008]

thanks for posting codes, could you please attach an example? that would be better

[karl007]

I 've add HTML example code to the first post. An real example make no sense, because it only changes the usage of the Lightbox, not the look.

[hello2008]

I 've add HTML example code to the first post. An real example make no sense, because it only changes the usage of the Lightbox, not the look.

ok, get it