PDA

View Full Version : [Ext.ux.Lightbox] old style grouping



karl007
23 Jun 2009, 5:33 AM
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
25 Jun 2009, 8:45 AM
thanks for posting codes, could you please attach an example? that would be better ;)

karl007
26 Jun 2009, 12:02 AM
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
26 Jun 2009, 12:52 AM
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;)