SyntaxHighlighter problems with jQuery 1.7.1

Recently I upgraded my WordPress plugins to jQuery version 1.7.1 and noticed that Internet Explorer 8 was causing errors “‘null’ is null or not an object”. I isolated this to the SyntaxHighlighter Evolved WordPress plugin I was also uses.

On further Googling it seemed that there were issues with the XRegExp library and jQuery 1.7.1, reported by other uses on IE 6 to 9. Schabse Laks posted a fix to the problem on his blog, though this gave me a new error, so I have modified it slightly, modification on line 271;

RegExp.prototype.exec = function (str) {
	if (typeof(str) !== "string")
		str = String(str);
	var match = real.exec.apply(this, arguments),
		name, r2;

Download the resolved SyntaxHighlighter files here
shCore.max.js
shCore.js

RegexBuddy – a solution to the Regular Expressions (Regex) nightmare

For the last few months I have been using RegexBuddy, software designed to help with Regular Expressions.

After using it to create and test more than one extremely complex regular expression, I thought it was time I gave RegexBuddy some ‘big ups’.

So what is so good about RegexBuddy,

Firstly, it allows you to create regular expressions using layman’s terms, “Non printable character”, “Match between zero and unlimited times”, “Create back-reference”, etc, no longer is there a need to remember the regular expression syntax.

Secondly, I can test my regular expression with extreme ease, I can show the full matched text and any matched groupings.

Thirdly, I can directly translate the regular expression to the programming language of choice, VB, PHP, JavaScript, etc, and not have to worry about the specifics of how to form a regular expression for that specific language.

I use RegexBuddy for PHP and JavaScript, I no longer need to ‘guess’ what the regular expression will be and constantly have to upload my code to the server to try it out.

Here’s an example expression I recently used in my WordPress plugin Slimbox2 Slideshow;

Slimbox2 Slideshow v1.2 – support for WordPress Gallery Captions

Slimbox2-Slideshow version 1.2, a WordPress plugin is released, now supports displaying WordPress Gallery Captions in the lightbox.

Download it from the WordPress Plugin Directory

Remember to enable “Link thumbnails to: Image File” on the WordPress Gallery settings page.

Slimbox2 Slideshow v1.1 – support for WordPress Gallerys

Slimbox2 Slideshow has been updated to automatically at the rel=’lightbox’ tags to WordPress Gallerys.

Download it from the WordPress Plugin Directory

Remember to enable “Link thumbnails to: Image File” on the WordPress Gallery settings page, and

to enable “Automatic Gallery Image Link Tagging” on the Slimbox2 Slideshow Options page.

Slimbox2 Slideshow – WordPress plugin to add image lightbox and slideshow

Slimbox2 Slideshow is a WordPress plugin that implements a lightbox style affect to images using Slimbox2.

Functionality

The main advantage of Slimbox2 Slideshow plugin is being able to show a slide show of ALL images in every single post.
Click here to see it in action (notice the slide count).

Additional functionality;

  • automatically add rel=lightbox’ tags to images.
  • automatically re-size images to fit in browser window.
  • based on jQuery library, no need for additional libraries such as script.aculo.us or Prototype.

Examples
Slide show of all blog images (click me) – notice the slide count.

Standard images, showing grouping.
Emirates Palace at nightEmirates Palace entrance gateSonya with mangroves in the background

Image Map – yes it works
Test Images

1024x768 768x1024 800x600 600x800 640x480 480x640 320x240 240x320

Installation

  1. Upload folder ‘thydzik-slimbox2-slideshow’ to the  ‘/wp-content/plugins/’ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Under ‘Plugins’ > ‘Slimbox2 Slideshow’, you will find the ‘Slimbox2 Slideshow Options’ page. Next section will explain the options.

Configuration/Options

The following configuration settings are available with meaning;

  • Automatic Image Link Tagging – automatically add the HTML to image links to show images in a lightbox. Leave it at default ticked.
  • Automatic Resize – automatically resize images in the lightbox to fit the browser window. Large images will be shrunk and small images will be expanded.
  • Image Scaling Factor – used to determine how much of the browser window an image will be automatically resized to. The default value of 0.75 means the image will be scaled to 75% of the browser window. This value does not take into account border and caption.
  • Enable Slimbox on Image Maps – enable lightbox affect to be enabled for Image Maps.
  • Enable Slideshow on All – when ticked, all images and Image Maps will start in slideshow.
  • Slide Time – the seconds between images during a slideshow.

Slide show of all blog images

Simply create a link with url “#slide” or just “#s”. For images to appear in the slideshow, they must have a title attribute.

Why was Slimbox2 Slideshow created?

My wife and I were in a situation wanting  to show our photos to our friends, we had Lightbox but every photo needed to be ‘Next’ manually and that would only show photos in a single post. Slimbox2 Slideshow allows for one-click to start a slideshow of all your photos and sit back and enjoy.

Navigate to sonyaandtravis.com/#slideshow to see it in action.

Download Slimbox2 Slideshow from the WordPress Repository here

thydzikGoogleMap v1.5 – an inline Google map plugin for WordPress

Recently updated and confirmed still working with WordPress 3.0.

The following examples use the included example.xml file.

<markers>
<!-- Marker Z has no html to show nonclickability-->
<marker lat="-31.9554" lng="115.85859"  icon="Z" color="c89bff"/>
<marker lat="-32.053128" lng="115.745869" html="Fremantle"  icon="1" color="6b98ff"/>
<!-- Standard marker with html-->
<marker lat="-32.036036" lng="115.92724" html="Lynwood&lt;br&gt;Residence of the author" color="ffed5c"/>
<marker lat="-31.963013" lng="115.836239" html="Kings Park" icon="KP" color="97ec7d"/>
<!-- Character marker with html that includes link-->
<marker lat="-31.956659" lng="115.869906" html="&lt;a href=&quot;http://perthmint.com.au&quot; rel=&quot;nofollow&quot;&gt;Perth Mint&lt;/a&gt;" icon="$" color="ffffff"/>
<line colour="#0000FF" width="2" opacity="0.75">
	<point lat="-32.027579" lng="115.751266" />
	<point lat="-31.987404" lng="115.769463" />
	<point lat="-31.957697" lng="115.852203" />
	<point lat="-31.963814" lng="115.879326" />
	<point lat="-32.026415" lng="115.942154" />
</line>
</markers>
  • Marker Z – no HTML, nonclickable.
  • Marker 1 – standard maker with some text.
  • Marker Default – no icon defaults to standard Google Maps marker.
  • Marker $ – some symbols can even be displayed on a marker and links in the HTML.
  • Marker KP – up to two characters can be displayed.

The syntax is as follows;

thydzikGoogleMap(example.xml, width, height, zoom, maptype)

where;

  • example.xml is your xml file, and example xml file is included with thdyzikGoogleMap in the plugin directory.
  • width is the optional width parameter, if left out the default width defined in the thydzikGoogleMap options will be used.
  • height is the optional height parameter, if left out the default height defined in the thydzikGoogleMap options will be used.
  • zoom is the optional zoom level from 0 to 17 (0 being the furthest away), if left out zoom will be calculated automatically to fit all points.
  • maptype is the optional map type parameters, which can be (Normal, G_NORMAL_MAP, N), (SATELLITE, G_SATELLITE_MAP, S), (HYBRID, G_HYBRID_MAP, H), (PHYSICAL, G_PHYSICAL_MAP, P, TERRAIN or T) if left out Normal is defined.

Normal, G_NORMAL_MAP, N or left out; i.e. thydzikGoogleMap(example.xml), thydzikGoogleMap will produce a default styled map;

thydzikGoogleMap(example.xml)

SATELLITE, G_SATELLITE_MAP, S; i.e. thydzikgooglemap(example.xml, 4, S), thydzikGoogleMap will produce a satellite styled map. Note I have included a zoom of 4, and used the abreviation ‘S’;

thydzikgooglemap(example.xml, 4, S)

HYBRID, G_HYBRID_MAP, H; i.e. tHyDzIkGoOgLeMaP(example.xml,hYbRiD,450,225), thydzikGoolgeMap will produce a hybrid styled map. Note I have included a width and height, and proved that capitalisation is not of concern;

tHyDzIkGoOgLeMaP(example.xml, hYbRiD, 450,225)

PHYSICAL, G_PHYSICAL_MAP, P, TERRAIN or T; i.e thydzikGoogleMap(example.xml,TERRAIN), thydzikGoogleMap will produce a terrain styled map;

thydzikGoogleMap(example.xml,TERRAIN)

Reading XML from different folder
The XML can be in any location, as long as the whole path is specified i.e. thydzikgooglemap(http://thydzik.com/geocaching/karratha-mar08/karratha-mar08.xml). Yes, even links in the marker text are preserved.

thydzikgooglemap(http://thydzik.com/geocaching/karratha-mar08/karratha-mar08.xml)

Reading XML from different domain
The XML can even be on a different domain, as long as the whole path is specified. i.e. thydzikgooglemap(http://sonyaandtravis.com/maps/our-nullarbor-adventure-clare-melbourne08.xml).

thydzikgooglemap(http://sonyaandtravis.com/maps/our-nullarbor-adventure-clare-melbourne08.xml)

thydzik Google Map v1.4.7 – inline WordPress Google Maps

I have released an updated version of thydzik Google Map which allows for coloured and variable text markers, see the example below.

thydzikGoogleMap(example.xml)

Unfortunately, it now requires FreeType being compiled into PHP. If FreeType is not installed only the default marker and markers A-Z will be usable, with anything else being replaced with the default marker.

Download the latest from the WordPress Plugin Directory.

thydzikGoogleMap v1.4.5 – an inline Google map plugin for WordPress

thydzikGoogleMap v1.4.5 is now available with significant improvements, including

  • The Google Maps Javascript and thydzikGoogleMap Javascript is downloaded only as needed, speeding up page loading of all pages without maps.
  • Removal of <head> code means thydzikGoogleMap will only be present when called.
  • Compressed thydzikGoogleMap code.
  • Multiple maps can now be created in a single post!
  • Map type can be changed from default by providing an additional ‘map type’ parameter.

thydzikGoogleMap produces valid XHTML and allows for easy creation of Google Maps in your WordPress posts from XML map data.

Grab the latest from the WordPress repository.

Examples of the newest functionality below:

Using either: Normal, G_NORMAL_MAP, N or left out; i.e. thydzikGoogleMap(example.xml), thydzikGoogleMap will produce a default styled map

thydzikGoogleMap(example.xml)

Using either: SATELLITE, G_SATELLITE_MAP, S; i.e. thydzikgooglemap(example.xml, 4, S), thydzikGoogleMap will produce a satellite styled map. Note I have included a zoom of 4, and used the abreviation ‘S’.

thydzikgooglemap(example.xml, 4, S)

Using either: HYBRID, G_HYBRID_MAP, H; i.e. tHyDzIkGoOgLeMaP(example.xml,hYbRiD,450,225), thydzikGoolgeMap will produce a hybrid styled map. Note I have included a width and height, and proved that capitalisation is not of concern.

tHyDzIkGoOgLeMaP(example.xml, hYbRiD, 450,225)

Finally, using either: PHYSICAL, G_PHYSICAL_MAP, P, TERRAIN or T; i.e thydzikGoogleMap(example.xml,TERRAIN), thydzikGoogleMap will produce a terrain styled map.

thydzikGoogleMap(example.xml,TERRAIN)

As always, comments and suggestions welcome. In a future update I will try to incorporate rounded corners :)