Fix for auto-lightboxing links that contain rel attributes already

Works fine, thanks Matt!
Hope this fix (or a similar one) will be introduced in the plugin by the author in a new version any time soon.

What I posted bothered me a little because I know that parsing html with regex isn’t ideal and I know that the regex could fail in certain situations. For example, if the path of the link contains the text “nolb”, “lightbox” or “nobox” it would also cause the regex to fail because you can’t fullproof match only the rel attribute, at least not without extra steps. It’s really hard to fine tune regex for html parsing. The proper way is via dom parsing.

So alas, a better option. Requires PHP 5+ though. Not sure if that’s a problem or not.

function jqlb_do_regexp($content, $id){
	if (empty($content)) return $content;
	$id = esc_attr($id);

	$img_regex = "/.+\\.(?:bmp|gif|jpg|jpeg|png)/i";
	$lightbox_regex = "/(?:lightbox|\\bnolb\\b|\\bnobox\\b)/i";

	$write = FALSE;
	$dom = new DOMDocument;
	libxml_use_internal_errors(true);
	if ($dom->loadHTML($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD)) {
		$a_tags = $dom->getElementsByTagName('a');
		foreach ($a_tags as $a_tag) {
			$images = $a_tag->getElementsByTagName('img');
			$match = FALSE;
			foreach ($images as $image) {
				if ($image->hasAttribute('src')) {
					if (preg_match($img_regex, $image->getAttribute('src'))) $match = TRUE;
				}
			}
			if ($match) {
				if ($a_tag->hasAttribute('rel')) {
					if (!preg_match($lightbox_regex, $a_tag->getAttribute('rel'))) {
						$a_tag->setAttribute('rel', 'lightbox['.$id.'] '.$a_tag->getAttribute('rel'));
						$write = TRUE;
					}
				} else {
					$a_tag->setAttribute('rel', 'lightbox['.$id.']');
					$write = TRUE;
				}
			}
		}
	}
	libxml_use_internal_errors(false);

	if ($write) $content = $dom->saveHTML();

	return $content;
}

Hate that you can’t edit after a certain period. Updated to account for UTF-8 characters:

function jqlb_do_regexp($content, $id){
	if (empty($content)) return $content;
	$id = esc_attr($id);

	$img_regex = "/.+\\.(?:bmp|gif|jpg|jpeg|png)/i";
	$lightbox_regex = "/(?:lightbox|\\bnolb\\b|\\bnobox\\b)/i";

	$write = FALSE;
	$dom = new DOMDocument;
	libxml_use_internal_errors(true);
	if ($dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD)) {
		$a_tags = $dom->getElementsByTagName('a');
		foreach ($a_tags as $a_tag) {
			$images = $a_tag->getElementsByTagName('img');
			$match = FALSE;
			foreach ($images as $image) {
				if ($image->hasAttribute('src')) {
					if (preg_match($img_regex, $image->getAttribute('src'))) $match = TRUE;
				}
			}
			if ($match) {
				if ($a_tag->hasAttribute('rel')) {
					if (!preg_match($lightbox_regex, $a_tag->getAttribute('rel'))) {
						$a_tag->setAttribute('rel', 'lightbox['.$id.'] '.$a_tag->getAttribute('rel'));
						$write = TRUE;
					}
				} else {
					$a_tag->setAttribute('rel', 'lightbox['.$id.']');
					$write = TRUE;
				}
			}
		}
	}
	libxml_use_internal_errors(false);

	if ($write) $content = $dom->saveHTML();

	return $content;
}

THX!

The first solution is working for me, but not the last two, maybe because of PHP4 usage on my site I guess.

Yes I mentioned that DOMDocument is a PHP 5 requirement. There are probably some 3rd party classes that could be included and function reworked for PHP4 compatibility. I could enhance the regex solution to at least add a few more fail-safes.

Alright so here is an updated function which includes a better regex for PHP < 5. If PHP if 5 or greater it will use the DOMDocument method. Below that it will use the regex method. I added word boundaries around lightbox/nobox/nolb and also added a “nolightbox” option. So now only “nolb”, “nobox” or “nolightbox” will prevent the auto-lightboxing.

function jqlb_do_regexp($content, $id){
	if (stripos($content, '<a') === FALSE) return $content;
	if (stripos($content, '<img') === FALSE) return $content;
	$id = esc_attr($id);

	if (version_compare(phpversion(), '5.0.0', '>=') && class_exists('DOMDocument')) {
		$write = FALSE;
		$dom = new DOMDocument;
		libxml_use_internal_errors(true);
		if ($dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD)) {
			$a_tags = $dom->getElementsByTagName('a');
			if (!empty($a_tags)) {
				foreach ($a_tags as $a_tag) {
					$images = $a_tag->getElementsByTagName('img');
					$match = FALSE;
					if (!empty($images)) {
						foreach ($images as $image) {
							if ($image->hasAttribute('src')) {
								if (preg_match("/.+\\.(?:bmp|gif|jpg|jpeg|png)/i", $image->getAttribute('src'))) $match = TRUE;
							}
						}
					}
					if ($match) {
						if ($a_tag->hasAttribute('rel')) {
							if (!preg_match("/(?:\\blightbox\\b|\\bnolb\\b|\\bnobox\\b|\\bnolightbox\\b)/i", $a_tag->getAttribute('rel'))) {
								$a_tag->setAttribute('rel', 'lightbox['.$id.'] '.$a_tag->getAttribute('rel'));
								$write = TRUE;
							}
						} else {
							$a_tag->setAttribute('rel', 'lightbox['.$id.']');
							$write = TRUE;
						}
					}
				}
			}
		}
		libxml_use_internal_errors(false);

		if ($write) $content = $dom->saveHTML();

	} else {

		$a_tag_img_regex = "/(<a[^>]+href=['\"][^>]+\\.(?:bmp|gif|jpg|jpeg|png)[^>]+)>/i";
		if (preg_match_all($a_tag_img_regex, $content, $a_tag_matches, PREG_SET_ORDER)) {
			foreach ($a_tag_matches as $a_tag) {
				$new_a_tag = $a_tag[0];

				$rel_regex = "/(rel=(['\"]))(?![^>]*?(?:\\blightbox\\b|\\bnolb\\b|\\bnobox\\b|\\bnolightbox\\b))(.+?)(\\2)/i";
				$new_a_tag = preg_replace($rel_regex, '$1lightbox['.$id.'] $3$4', $new_a_tag);

				$no_rel_regex = "/(<a(?![^>]*?rel=['\"].+)[^>]+href=['\"][^>]+\\.(?:bmp|gif|jpg|jpeg|png)[^>]+)>/i";
				$new_a_tag = preg_replace($no_rel_regex, '$1 rel="lightbox['.$id.']">', $new_a_tag);

				if ($new_a_tag != $a_tag[0]) $content = str_replace($a_tag[0], $new_a_tag, $content);
			}
		}

	}

	return $content;
}

And here is a modification to jquery.lightbox.js to allow for grouping of lightboxed images with different rel attributes (as long as they both have “lightbox” or “lightbox[sameid]”).

First change is to the selector in the “doLightBox()” function:
jQuery('a[rel*="lightbox"]').not( 'a[rel*="nolightbox"]' ).lightbox({

Note this could inadvertantly select something with “ANYTEXTlightboxANYTEXT” other than “nolightbox” but I think since we are only targeting the rel tag it’s safe to use this. Unfortunately the jquery contains word selector only allows for whitespace around the word and won’t match “lightbox[##]”.

Second change is in the “start(imageLink)” function. Snipit picks up a the $("a").each(function(){ iteration statement:

[...]
$("a").each(function(){
	if(!this.href || !this.rel || !imageLink.rel /*|| (this.rel != imageLink.rel)*/) {
		return;
	}

	var this_rel_arr = this.rel.split(" ");
	var imageLink_rel_arr = imageLink.rel.split(" ");
	var matched = false;

	match_loop:
	for (i = 0; i < this_rel_arr.length; i++) {
		if (this_rel_arr[i].indexOf('lightbox') > -1) {
			for (x = 0; x < imageLink_rel_arr.length; x++) {
				if (this_rel_arr[i] == imageLink_rel_arr[x]) {
					matched = true;
					break match_loop;
				}
			}
		}
	}
	if (!matched) return;

	var jqThis = $(this);
[...]

Pastebin of unminified file (jquery.lightbox.js): https://pastebin.com/b9Dx4RRA

Minified (jquery.lightbox.min.js): https://pastebin.com/ULwybZNB

Note: the plugin uses the minified file.

edited: 10:19 AM EST … forgot to check that the rel tag values I was matching against actually contained ‘lightbox’ ><

Update to jqlb_do_regexp function / DOMDocument method in wp-jquery-lightbox.php. I was verifying that the img src had bmp|gif|jpg|jpeg|png but not that the actual href on the link was linking to one.

function jqlb_do_regexp($content, $id){
	if (stripos($content, '<a') === FALSE) return $content;
	if (stripos($content, '<img') === FALSE) return $content;
	$id = esc_attr($id);

	if (version_compare(phpversion(), '5.0.0', '>=') && class_exists('DOMDocument')) {
		$write = FALSE;
		$dom = new DOMDocument;
		libxml_use_internal_errors(true);
		if ($dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD)) {
			$a_tags = $dom->getElementsByTagName('a');
			if (!empty($a_tags->length)) {
				foreach ($a_tags as $a_tag) {
					$img_tags = $a_tag->getElementsByTagName('img');
					if (!empty($a_tag->getAttribute('href')) && !empty($img_tags->length)) {
						$img_tag = $img_tags->item(0);
						if (preg_match("/^.+?\\.(?:bmp|gif|jpg|jpeg|png)/i", $a_tag->getAttribute('href')) && !empty($img_tag->getAttribute('src'))) {
							if ($a_tag->hasAttribute('rel')) {
								if (!preg_match("/(?:\\blightbox\\b|\\bnolb\\b|\\bnobox\\b|\\bnolightbox\\b)/i", $a_tag->getAttribute('rel'))) {
									$a_tag->setAttribute('rel', 'lightbox['.$id.'] '.$a_tag->getAttribute('rel'));
									$write = TRUE;
								}
							} else {
								$a_tag->setAttribute('rel', 'lightbox['.$id.']');
								$write = TRUE;
							}
						}
					}
				}
			}
		}
		libxml_use_internal_errors(false);

		if ($write) $content = $dom->saveHTML();

	} else {

		$a_tag_img_regex = "/(<a[^>]+href=['\"][^>]+\\.(?:bmp|gif|jpg|jpeg|png)[^>]+)>/i";
		if (preg_match_all($a_tag_img_regex, $content, $a_tag_matches, PREG_SET_ORDER)) {
			foreach ($a_tag_matches as $a_tag) {
				$new_a_tag = $a_tag[0];

				$rel_regex = "/(rel=(['\"]))(?![^>]*?(?:\\blightbox\\b|\\bnolb\\b|\\bnobox\\b|\\bnolightbox\\b))(.+?)(\\2)/i";
				$new_a_tag = preg_replace($rel_regex, '$1lightbox['.$id.'] $3$4', $new_a_tag);

				$no_rel_regex = "/(<a(?![^>]*?rel=['\"].+)[^>]+href=['\"][^>]+\\.(?:bmp|gif|jpg|jpeg|png)[^>]+)>/i";
				$new_a_tag = preg_replace($no_rel_regex, '$1 rel="lightbox['.$id.']">', $new_a_tag);

				if ($new_a_tag != $a_tag[0]) $content = str_replace($a_tag[0], $new_a_tag, $content);
			}
		}

	}

	return $content;
}

Hey Matt your first code works fine here. The others don’t for some reason. However since i’m using infinite scroll it stops showing the lightbox if the user scrolls down and clicks on a image that gets loaded that way. It used to work before this update and i made no changes whatsoever except that bit of code you provided. Any thoughts? Thanks

I’m not familiar with that plugin. Did you try removing any “rel” tags from those images? Did you try doing both my last php and the Java code updates? Anything in the php error log?

Thanks for helping out and working on this. I’ve been busy with the usual end-of-semester stuff – sorry for the delay. I just released 1.4.8 which should fix all of this.

Matt; you’ve put a lot of work into this problem so the teacher in me feel like I should provide some comments.

First and foremost, in case you want to keep using your own modifications I want to point out that

if (stripos($content, '<a') === FALSE) return $content;
if (stripos($content, '<img') === FALSE) return $content;

should probably be considered a bug, and points to larger problem with all your solutions. WP jQuery Lightbox applies to links (to images). There is no need for any img-tags, so the second test will exclude lots of potential valid uses.

I really like the idea here though, to run a quick-&-dirty check to see if we even need to filter the content further. That’s smart!

From your initial post:

edit: added support for checking for “nobox” or “nolb” in the rel tag to override automatic lightboxing. “nolightbox” or anything with “lightbox” in the word will also override it.

This way lies madness. What you’re doing here is taking a very straightforward default behaviour (eg: if it’s not “lightbox” it’s not lightboxed), inverts it and end up making the problem vastly more complicated to solve.

1) Your jquery selector (a[rel^=”lightbox”]) forces the lightbox text to be the first value in the rel tag’s values. e.g. rel=”something lightbox[123]” does not work but rel=”lightbox[123] something” does. The selector would need to be changed to probably some sort of regex to properly select everything.

That’s a fair point. I might look into letting WP jQuery Lightbox play nice with other users of the rel-attribute. ??

There is no need for any img-tags, so the second test will exclude lots of potential valid uses.

Yea that’s certainly a mistake and not something I considered.

What you’re doing here is taking a very straightforward default behaviour (eg: if it’s not “lightbox” it’s not lightboxed), inverts it and end up making the problem vastly more complicated to solve.

You lost me here. The plugin automatically light boxes links without having to manually specify “lightbox.” You previously had instructed that if you want to override the lightbox, then specify anything in the rel field. This would cause the plugin to add a second rel tag which would inevitably break the jquery selector from selecting it and also what caused the problem with the latest version of WordPress (the new version of WP puts these tags in automatically now).

The fix that I outlined was to allow for the automatic light boxing of images that already have data in the rel tag. I haven’t gotten a chance to see what changes you’ve made to update the plugin but the idea of me adding support for “nolb” , “nobox” etc was to provide a way for a link NOT to get automatically lightboxed. Other plugins use similar words to prevent auto-lightboxing so it kind of makes it easier for users to switch between if they are supported.

That’s a fair point. I might look into letting WP jQuery Lightbox play nice with other users of the rel-attribute. ??

Again I’m confused… All users of the latest WP version are using the rel attribute now. WP automatically inserts tags in there.

This would cause the plugin to add a second rel tag […]

That’s not intended behavior. The plugin should bail if there’s a pre-existing rel-attribute. Hence “just set any other rel-attribute”.

Again I’m confused… All users of the latest WP version are using the rel attribute now. WP automatically inserts tags in there.

Right. WP have decided that the rel attribute is needed for [other things] so I can’t assume clean rels anymore. I will have to make my plugin play nice.