Fixed lightbox for tinymce for image sets support

- 4 Posts
Attila Reply #1, 13 years, 10 months ago
Hi,

The problem I had is that the TinyMCE and the CKEditor both do not support setting the rel property of a lightbox link to support image sets.

Default lightbox recognizes lightbox links by the rel attribute of the anchor element set to lightbox. Something like
```
<a rel="lightbox" href="blah.jpg">...</a>
```
Would make lightbox be activated when the link is clicked.

For grouping of images, so that next and previous buttons are enabled in the lightbox, and the number of images in the set is shown as well, lightbox accepts the rel value as follows:
```
<a rel="lightbox[saturday_picknick]" href="blah.jpg">...</a>
```
So that all images with lightbox[saturday_picknick] are grouped together.

However, TinyMCE and CKEditor both do not support setting the rel attribute to such detail. CKEditor does not support setting the attribute at all, TinyMCE has a dropdown which does allow you to set lightbox as value, but not lightbox[...].

The solution I came up with is to adapt lightbox.js to also use the type attribute of the anchor (I have no idea if this is a safe attribute to use improperly, please let me know!). This makes it so that TinyMCE supports it, since CKEditor does not even allow you to set the rel attribute, you would have to use other attributes to identify lightbox links, this should be easy to do.

In this way the following syntax is supported for implementing lightbox image sets:
```
<a rel="lightbox" type="saturday_picknick" href="blah.jpg">...</a>
```
Here is the code of the adapted lightbox.js file replacing the code in line 216 to 227 in Lightbox 2.04:
```
// adapted to be TinyMCE
if ((imageLink.type == '')){
    // if image is NOT part of a set, add single image to imageArray
    this.imageArray.push([imageLink.href, imageLink.title]);
} else {
    // if image is part of a set..
    this.imageArray = 
	$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"][type="' + imageLink.type + '"]').
	collect(function(anchor){ return [anchor.href, anchor.title]; }).
	uniq();
    
    while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}
```
Please let me know if there is another way to support lightbox image sets with TinyMCE.

Otherwise, enjoy the fix and have fun

1 Posts

AxMann Reply #2, 9 years, 6 months ago

Hi,
I am using Slimbox2 (http://www.digitalia.be/software/slimbox2) and was therefore unable to implement your wonderful fix. However, using Slimbox2 I found I could make the following changes to the slimbox2.js file to allow me to use the links 'type' attribute rather than it's 'rel' attribute. I.e. in MODx I can now add 'lightbox-[slideshowName]' to the link's 'type' attribute by selecting the thumbnail in TinyMCE > Insert/edit link option > Advanced > Target MIME type: lightbox-[slideshowName] (see attached screenshot).

Note: Between the //START and //END in the code below I commented out two lines of the original code and replaced with my changed version; essentially just substituting 'type' for 'rel' in four places.

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
	jQuery(function($) {
		//START AxMann: Changed to use the links 'type' attribute, rather than 'rel', because MODx does not allow manipulation of 'rel' in the editor (except for adding only 'lightbox')
		//$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
		//	return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		$("a[type^='lightbox']").slimbox({/* START: Put custom options here */}, null, function(el) {
			return (this == el) || ((this.type.length > 8) && (this.type == el.type));
		//END AxMann: Changed to use the links 'type' attribute, rather than 'rel', because MODx does not allow manipulation of 'rel' in the editor (except for adding only 'lightbox')	
		});
	});
}