Back to Top

Ready Your Images for JS Media Viewers

Previous Post:

Ready Your Images for JS Media Viewers

For the past few years, a lot of Javascript Media Viewers have been developed and they are now used by a lot of WordPress users. To say the truth, who doesn’t want some fancy stuff like this?

That was made possible with ColorBox, one of the most popular JS Media Viewers out there. There are of course other viewers such as Shadowbox, Fancybox, Lightbox 2, etc. which are just as powerful. Regardless of what viewer you choose, implementing it on your website/blog require two steps: read its documentation (how to use, needed markups, etc.) and make your images viewer-ready automatically (anyone wants to manually add markups to image links?). In this tip I will take ColorBox as an example, but the process should be pretty much the same for other viewers.

Read the documentation

http://colorpowered.com/colorbox/

Instructions

The colorbox method takes a key/value object and an optional callback.
Format: $('selector').colorbox({key:value, key:value, key:value}, callback);
Example: $('a#login').colorbox({transition:'fade', speed:500});
Example: $('a.gallery').colorbox();
Example: $('button').colorbox({href:"thankyou.html"});

And it can be called directly, without assignment to an element
Example: $.colorbox({href:"thankyou.html"});

ColorBox can accept a function in place of a static value:
$("a[rel='example']").colorbox({title: function(){
    var url = $(this).attr('href');
    return '<a href="'+url+'" target="_blank">Open In New Window</a>';
}});

According to the documentation, adding ColorBox support to a link in your post can be as simple as this:

jQuery("a[rel='popup']").colorbox();

So what we have to do is to add rel='popup' to all links pointing to image files, except for some image extensions if required (this can be applied to any viewer actually.)

Ready your images

Open up your theme’s functions.php and then add the following snippet:

/** BWP Ready Images for JS Media Viewers - betterwp.net/wordpress-tips/ready-images-for-javascript-media-viewers/ */
add_filter('the_content', 'bwp_parse_image_for_jsviewer', 60);

function bwp_parse_img_link($a)
{
	$str = $a[1];
	$valid_extensions = 'gif|jpeg|jpe|jpg|png';
	if (preg_match('/href=[\'"][^"\']+\.(?:' . $valid_extensions . ')/i', $str))
	{
		if (stripos($str, 'popup') == false)
		{
			if ( false !== strpos(strtolower($str), 'rel=') )
				$str = preg_replace('/(rel=[\'"])/i', '$1popup', $str);
			else
				$str = ' rel="popup" ' . $str;
		    return '<a ' . $str . '>';
		}
	}
    return $a[0];
}

function bwp_parse_image_for_jsviewer($content)
{
	$content = preg_replace_callback('/<a ([^>]+)>/i', 'bwp_parse_img_link', $content);
	return $content;
}

This will effectively convert all links pointing to image files (with valid extensions) to popup links, i.e. links with rel='popup'. If you need more valid image extensions, simply extend the $valid_extensions variable on line 7.

Now we will need two more things: jQuery and a Javascript call to ColorBox, as stated above. For jQuery you just need to enqueue it normally or echo it directly before the Javascript call. The call to ColorBox should be similar to this:

jQuery(document).ready(function(){
	if (jQuery().colorbox) {
		jQuery("a[rel='popup']").colorbox();
	};
});

If you use Fancybox, the call is surprisingly similar:

jQuery(document).ready(function(){
	if (jQuery().fancybox) {
		jQuery("a[rel='popup']").fancybox();
	};
});

Most viewers can be called this way, except for more complicated viewers such as Shadowbox or HighslideJS, for which to work you must follow their documentations carefully.

Now if you put the above snippet into a common Javascript file (for example common.js), you will have to enqueue scripts in correct order in your theme’s functions.php:

add_action('init', 'bwp_enqueue_scripts');
function bwp_enqueue_scripts()
{
	wp_enqueue_script('jquery');
	wp_enqueue_script('colorbox-js', URL-to-colorbox-js . '/jquery.colorbox-min.js');
	wp_enqueue_script('common-js', URL-to-your-common-js . '/common.js');
}

Or if you prefer to echo the snippet directly, you can do it like this:

add_action('wp_head', 'bwp_print_scripts', 9);
function bwp_print_scripts()
{
?>
// the javascript call snippet here
<?php
}

If the viewer also comes with its own CSS files, remember to enqueue them as well. In ColorBox’s case, this should do it:

add_action('init', 'bwp_enqueue_styles');
function bwp_enqueue_styles()
{
	wp_enqueue_style('colorbox', URL-to-colorbox-css . '/colorbox/colorbox.css');
}

Now just test the viewer out and customize things to suit your needs ;). Enjoy!

Take Social Sharing to
the Next Level with Monarch!

Take Social Sharing to the Next Level with Monarch!
Print Article Trackback Trackback to this Article   Subscribe to Comments RSS Subscribe to Comments RSS

Speak Up Your Mind!

An asterisk (*) indicates a required field and must be filled.




  • Web page and e-mail addresses turn into links automatically.
  • Wrap codes in: <code lang=""></code> or <pre lang="" extra="">
  • Lines and paragraphs break automatically.

Next Post: