Lazy Load v2 – delay image loading Nivo Slider v3

Nivo Slider is a great image slider which I recently implemented on one of my WordPress blogs, the problem with the current version is all images need to be loaded first prior to running the Nivo Slider JavaScript.

After a bit of searching I found a fork by Lee Powers named Lazy Load, the update was for an older version of Nivo Slider which didn’t support responsive images.

After a bit of copy and pasting I managed to port Lazy Load to the updated Nivo Slider version.

Find the fork on Github.

For an example of Lazy Load v2 with 100 images in a Nivo Slider head over to SonyaandTravis.com.

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

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.

thydzik Google Map v2.1 released – now with KML support

The release of thydzik Goole Map version 2.1 supports KML files which once displayed can even be downloaded as GPX files.

Download from the WordPress plugin repository.

The following example uses the included example.kml file.

thydzikgooglemap(example.kml)

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="<b>Lynwood</b><br>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="<a href="http://perthmint.com.au" rel="nofollow">Perth Mint</a>" icon="$" color="ffffff"/>
<!-- Example of two lines-->
<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>
<points colour="#FF0000" width="4" opacity="0.75">
	<point lat="-32.053128" lng="115.745869" />
	<point lat="-31.963013" lng="115.836239" />
	<point lat="-31.9554" lng="115.85859" />
	<point lat="-31.956659" lng="115.869906" />
	<point lat="-32.036036" lng="115.92724" />
</points>
</markers>
  • Marker Z – no HTML, nonclickable.
  • Marker 1 – standard maker with some text.
  • Marker Default – no icon defaults to standard Google Maps marker.
  • Marker $ – symbols can even be displayed on a marker and links in the HTML.
  • Marker KP – up to two characters can be displayed.

To display a map, simply type;

thydzikgooglemap(example.xml)

For the more adventurous;

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)

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

Slimbox2 Lightbox clone with automatic image resizing

I recently moved from Lightbox 2 to Slimbox2, whilst it is a little outdated, Slimbox2 offers many advantages;

  • jQuery language – no need for Prototype/Scriptaculous
  • page doesn’t need to be loaded completely before being run
  • has its own API

Unfortunately, it is missing automatic image resizing, which I love.

With the help of Example 9 on Neil’s Slimbox Examples, I have managed to hack together this feature which I am happy about.

Modified Slimbox2 with auto resize JavaScript
Modified Slimbox2 with auto resize CSS

Example in the below Image Map;

Test Images

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

In search of the elusive Google default marker

For a number of years now I have been developing a Google Maps plugin for WordPress <end of plug>, I have even created a script to dynamically generate coloured markers with custom text. This is a great solution for hosting your own markers, but is has a lot of overhead, having to host a custom Arial font and requiring the PHP GD library installed. And even then, I still relied on Google to provide the starting coloured marker .

Google does provide an alternative, custom text and colour, but there is one problem, what if I want the classic default Google Map’s marker default marker, the one with the large black dot. Well it isn’t there. And that is where my script, dare I say, exceeded Google.

The trick was adding the large black dot to the font. You know that ugly square box you sometimes see when you don’t have the correct fonts installed square box marker, I simply replaced this with the large black dot. Any character codes that aren’t available will simply return the default style marker default marker with my script.

So that’s my implementation, but how do I migrate from my script to Google’s while keeping the default style marker. I had to find an equivalent. All the obvious choices (bullet U+2022, bullet operator U+2219 and black circle U+25CF) didn’t work.

I started sifting through thousands of markers, looking for the closest representation to the default marker. What I found was kangxi radical one U+2F00, now don’t ask me why, but for some reason this produced a black dot style marker close enough default marker, though smaller than the default. This would have to do.

collection of markers

5000+ markers in a 1mb+ png file
5000+ markers in a html page (file name is the unicode)

Note: all above inline marker examples are hosted on Google or generated with my script (view the image name to find out more).