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 – 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