One of the core strengths of the NoobSlide gallery is its flexibility. The package lets you customize all key aspects of how your image gallery is rendered. You can create your own gallery structures very quickly, and personalize the visual display with your own style and design.

Based on some questions by Tobi, I am also adding this capability into the Shiba Gallery plugin, so that you may add your own Noobslide galleries into the plugin framework.

Note – The Shiba Gallery plugin can be used out of the box without any PHP knowledge. This is an advanced tutorial for when you want to create your own Noobslide galleries.

How to Create a NoobSlide Gallery

There are four key sections to a Noobslide gallery -

• Javascript section – This section contains the javascript specification of the gallery. It allows us to modify Noobslide parameters such as how to animate our gallery images, and how users can interact with the gallery.
• Top section – This section contains the opening divs of our Noobslide gallery object. We can also include whatever HTML elements here that we want to appear above the gallery images.
• Image section – This section contains a list of all the images we want to include in our gallery. We can modify this section to filter out particular images, and also to control what appears in the image caption.
• Bottom section – The bottom section describes HTML elements that appear after our images. It also closes off the Noobslide gallery object.

To create our own Noobslide gallery, we can hook into any of these four areas, and specify our own javascript or HTML output. The Shiba Gallery plugin supports four WordPress filters for this purpose – shiba_js_noobslide, shiba_open_noobslide, shiba_render_noobslide, shiba_close_noobslide

The easiest way to create a new Noobslide gallery is to use an existing gallery template and just modify it.

Below I describe how to take an existing Noobslide gallery and modify it according to the features requested by Tobi.

1. Specify NoobSlide Gallery Javascript and Top Sections

Tobi wants to start with the noobslide_slideviewer gallery and modify some of its components. Therefore, we first go into the plugin shiba-noobslide.php file and look for the open_noobslide function. Then we search for slideviewer. Once there, we just copy the code and put it in our own javascript function.

Note – The code we copy includes both a javascript section and a HTML section for opening our gallery object. In this case, the HTML section is the function call to generate_containers. Therefore, we remove the line generate_containers($id, $size, $args); and put that in our open noobslide function instead.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function js_noobslide_tobi($inStr, $size, $args, $images, $all_img, $noobnum) {
	global $shiba_gallery;
 
	$id = "noobslide".$shiba_gallery->nsNum;
	$jsStr = "
		var nS{$shiba_gallery->nsNum};
		window.addEvent('domready',function(){
	";
	switch($noobnum) {
	case 'tobi':	
		if ($args['caption'] != 'none')
			$jsStr .= "var info$shiba_gallery->nsNum = document.id('$id').getNext().set('opacity',0.5);\n";
 
		$jsStr .= "	
			//SAMPLE 4-modified (walk to item)
			nS{$shiba_gallery->nsNum} = new noobSlide({
				box: document.id('$id'),
				items: $$('#$id span'),
				size: $size[0],
				handles: $$('#handles{$shiba_gallery->nsNum} span'),
 
				onWalk: function(currentItem,currentHandle){\n";
		if ($args['caption'] != 'none')
			$jsStr .="				
					info{$shiba_gallery->nsNum}.empty();
					new Element('h4').set('html',currentItem.getElement('img').getProperty('alt')).inject(info{$shiba_gallery->nsNum});\n";
		$jsStr .= "			
					this.handles.removeClass('active');
					currentHandle.addClass('active');
				}
 
			});
		});";
		break;
	default:
		return $inStr;	
	}
	return $jsStr;
}

Line 4 – Get the current noobslide gallery number. This ensures that the current gallery does not conflict with other galleries in the page.

Line 10 – Specify our noobslide gallery name. In this example, we call our gallery tobi. In our gallery shortcode, the full name of this type of gallery will be noobslide_tobi.

Lines 11-33 – Copied slideviewer contents from the shiba-noobslide.php file.

Line 38 – Return our new javascript string.

1
2
3
4
5
6
7
8
9
10
11

function open_noobslide_tobi($openStr, $size, $args, $images, $all_img, $noobnum) {
	global $shiba_gallery;
	$id = "noobslide".$shiba_gallery->nsNum;
 
	switch($noobnum) {
	case 'tobi':	
		$openStr = $shiba_gallery->noobslide->generate_containers($id, $size, $args);
		break;
	}
	return $openStr;
}

2. Repeat for NoobSlide Gallery Image and Bottom Sections

Next, we copy the slideviewer code sections in shiba-noobslide.php for the image and bottom sections of our gallery.

function close_noobslide_tobi($closeStr, $size, $images, $args, $all_img, $noobnum) {
	global $shiba_gallery;
	switch($noobnum) {
	case 'tobi':	
		$closeStr = "</div>\n"; // close noobslide	
		if ($args['caption'] != 'none')	
			$closeStr .= "<div class=\"noobslide_info_overlay shiba-caption\" style=\"width:$size[0]px;\"></div>\n";
		$closeStr .= "</div></div>\n"; // close noobmask
		$closeStr .= "<p class=\"noobslide_numcontrol\" id=\"handles$shiba_gallery->nsNum\" style=\"width:$size[0]px;\">\n";
		$i = 0;	
		foreach ( $images as $image ) {
			$num = $i+1;		
			$closeStr .= "<span class=\"noobslide_numthumb\">{$num}</span>\n";
			$i++;
		}
		$closeStr .= "</p>\n";
		$closeStr .= "<div style='clear:left;'></div>\n";
		break;
	}
	return $closeStr;
}
 
function render_noobslide_tobi($renderStr, $size, $args, $images, $all_img, $noobnum) {
	switch($noobnum) {
	case 'tobi':
		break;
	}		
	return $renderStr;
}

Once we finish specifying our 4 gallery rendering functions, we only need to link them to our Shiba Gallery filters.

// Add in the init function of your theme functions.php file
add_filter('shiba_js_noobslide', 'js_noobslide_tobi', 10, 6);
add_filter('shiba_open_noobslide', 'open_noobslide_tobi', 10, 6);
add_filter('shiba_render_noobslide', 'render_noobslide_tobi', 10, 6);
add_filter('shiba_close_noobslide', 'close_noobslide_tobi', 10, 6);

At this point, we may want to test our new noobslide_tobi gallery to see if it works -

[gallery type="noobslide_tobi"]

The result should be the standard noobslide_slideviewer gallery. Now comes the fun part.

1 2 3 4 5 6 7 8 9

3. Move the Navigation Numbers to the Top

The navigation numbers are currently specified at the bottom section, in close_noobslide_tobi. To place them at the top, we look for -

$closeStr .= "<p class=\"noobslide_numcontrol\" id=\"handles$shiba_gallery->nsNum\" style=\"width:$size[0]px;\">\n";
$i = 0;	
foreach ( $images as $image ) {
	$num = $i+1;		
	$closeStr .= "<span class=\"noobslide_numthumb\">{$num}</span>\n";
	$i++;
}
$closeStr .= "</p>\n";
$closeStr .= "<div style='clear:left;'></div>\n";

We remove the code above from close_noobslide_tobi and paste it into the top of open_noobslide_tobi, right before the generate_containers command.

Then we change all instances of $closeStr to $openStr since it now resides in the gallery top section. Our open_noobslide_tobi function now looks like this -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function open_noobslide_tobi($openStr, $size, $args, $images, $all_img, $noobnum) {
	global $shiba_gallery;
	$id = "noobslide".$shiba_gallery->nsNum;
 
	switch($noobnum) {
	case 'tobi':	
		$openStr = "<p class=\"noobslide_numcontrol\" id=\"handles$shiba_gallery->nsNum\" style=\"width:$size[0]px;\">\n";
		$i = 0;	
		foreach ( $images as $image ) {
			$num = $i+1;		
			$openStr .= "<span class=\"noobslide_numthumb\">{$num}</span>\n";
			$i++;
		}
		$openStr .= "</p>\n";
		$openStr .= "<div style='clear:left;'></div>\n";
		$openStr .= $shiba_gallery->noobslide->generate_containers($id, $size, $args);
		break;
	}
	return $openStr;
}

1 2 3 4 5 6 7 8 9

Awesome! Now the numbers are at the top.

4. Add a Thumbnail Section

Next, Tobi wants to add a thumbnail section below the images. To do this, we again look into shiba-noobslide.php for a section on rendering thumbnails. We can find this in the bottom section of noobslide_galleria or noobslide_thumb.

The thumbnail rendering code is as follows -

// get maxw amd maxh of thumbnails
$all_img = array();
$maxW = 0; $maxH = 0;
 
foreach ( $images as $image ) {		
	$img = $shiba_gallery->get_attachment_image_src($image->ID, array($shiba_gallery->THUMB_W, $shiba_gallery->THUMB_H));			
	$all_img[] = $img;
 
	$w = intval($img[1]); $h = intval($img[2]);
	if ($w > $maxW) $maxW = $w;
	if ($h > $maxH) $maxH = $h;
}
 
 
$closeStr .= "<div id=\"handles{$shiba_gallery->nsNum}_more\" class=\"noobslide_thumbs\" style=\"width:{$size[0]}px;\">\n";
// draw thumbnails
foreach ($all_img as $img) {
	$padding = $shiba_gallery->get_padding(array($maxW,$maxH), $img);
 
	$closeStr .= "<div style=\"float:left;\"><img src=\"{$img[0]}\" width=\"{$img[1]}\" height=\"{$img[2]}\" style=\"padding:{$padding}\"/></div>\n";
}
$closeStr .= "</div>\n";
$closeStr .= "<div style='clear:left;'></div>\n";

If we add the code above to our close_noobslide_tobi function, we get our thumbnails, as is shown below.

1 2 3 4 5 6 7 8 9

However, there is a problem. If you click on the thumbnails it is not active.

To activate the thumbnails in our gallery, we must add it to our javascript noobslide specification in our gallery javascript section.

var handles{$shiba_gallery->nsNum}_more = $$('#handles{$shiba_gallery->nsNum}_more div');
 
//more handle buttons
nS{$shiba_gallery->nsNum}.addHandleButtons(handles{$shiba_gallery->nsNum}_more);

We collect all our thumbnails and set it to the handles_more variable. Then we activate the thumbnails by calling the addHandleButtons noobslide function.

1 2 3 4 5 6 7 8 9

Success!

Our new js_noobslide_tobi function now looks like this -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

function js_noobslide_tobi($inStr, $size, $args, $images, $all_img, $noobnum) {
	global $shiba_gallery;
 
	$id = "noobslide".$shiba_gallery->nsNum;
	$jsStr = "
		var nS{$shiba_gallery->nsNum};
		window.addEvent('domready',function(){
	";
	switch($noobnum) {
	case 'tobi':	
		if ($args['caption'] != 'none')
			$jsStr .= "var info$shiba_gallery->nsNum = document.id('$id').getNext().set('opacity',0.5);\n";
		$jsStr .= "var handles{$shiba_gallery->nsNum}_more = $$('#handles{$shiba_gallery->nsNum}_more div');\n";
		$jsStr .= "	
			//SAMPLE 4-modified (walk to item)
			nS{$shiba_gallery->nsNum} = new noobSlide({
				box: document.id('$id'),
				items: $$('#$id span'),
				size: $size[0],
				handles: $$('#handles{$shiba_gallery->nsNum} span'),
 
				onWalk: function(currentItem,currentHandle){\n";
		if ($args['caption'] != 'none')
			$jsStr .="				
					info{$shiba_gallery->nsNum}.empty();
					new Element('h4').set('html',currentItem.getElement('img').getProperty('alt')).inject(info{$shiba_gallery->nsNum});\n";
		$jsStr .= "			
					this.handles.removeClass('active');
					currentHandle.addClass('active');
				}
 
			});";
		$jsStr .= "//more handle buttons\n";
		$jsStr .= "nS{$shiba_gallery->nsNum}.addHandleButtons(handles{$shiba_gallery->nsNum}_more);\n";
		$jsStr .="});";
		break;
	default:
		return $inStr;	
	}
	return $jsStr;
}

5. Scrolling Title and Description

Finally, Tobi wants to add a section below that has the title and description of the current image.

An example of this feature can be found in noobslide_4. We can just repeat the process described above to add it to our new gallery.

Shiba Gallery Hook Details

1. shiba_open_noobslide

Specify the top section of your Noobslide gallery. It passes on 6 arguments –

• $openStr -A string which contains the current default top section content. You can alter what goes into your gallery by returning a new top section string.
• $size – A two element array containing the width and height of the gallery in pixels.
• $args – An associative array containing attributes (e.g. caption, frame) from the gallery shortcode.
• $images – The list of WordPress objects (posts, pages, galleries, or attachments) to include in the gallery based on the input shortcode.
• $all_img – Array containing the list of images associated with the WordPress objects above. These are the results returned by applying the WordPress get_attachment_image_src function on our list of input objects.
• $noobnum – The Noobslide gallery identifier. For example, noobslide_slideviewer will have -

  $noobnum = 'slideviewer'

2. shiba_render_noobslide

Specify the images in your Noobslide gallery. It passes on 6 arguments which are similar to the ones specified above.

• $renderStr – A string which contains the current image to include in your gallery. It should only contain specification for a single image. You can remove or add in images by altering this string.
• $size – Size to set the image to.
• $args – An associative array containing attributes (e.g. caption, frame) from the gallery shortcode.
• $image – Current WordPress object to include (could be post, page, gallery, or attachment object).
• $img – 3 element array containing the image URL, image width and image height. This is the result returned by the WordPress get_attachment_image_src function.
• $noobnum – Same as above.

3. shiba_js_noobslide

Specify the javascript section of your Noobslide gallery. It passes on the same 6 arguments as shiba_open_noobslide.

4. shiba_close_noobslide

Specify the bottom section of your Noobslide gallery. It passes on the same 6 arguments as shiba_open_noobslide.

Related Articles

<< Previous Next >>

NoobSlide - One Gallery to Rule Them All

NoobSlide is one of the most versatile, efficient, and compelling Javascript galleries I have seen. Many thanks to its creators for making something so awesome! NoobSlide is now part of the Shiba Gallery Plugin so that you may insert its galleries into your blog with a simple WordPress gallery shortcode. Below are the 8 common NoobSlide examples...

<< Previous Next >>

Shiba Gallery 3.3

The Shiba Gallery Plugin allows you to display your WordPress galleries using a variety of Javascript libraries including Noobslide, TinySlideshow, SlimBox, Popeye, Picture Slides, and the WordPress native gallery. You can display as many galleries as you want, and have different types of galleries within the same blog page. Here is a detailed...

<< Previous Next >>

Shiba Gallery 3.5

The Shiba Gallery Plugin allows you to display your WordPress galleries using a variety of Javascript libraries including Noobslide, TinySlideshow, SlimBox, Lytebox, Popeye, Picture Slides, and the WordPress native gallery. You can display as many galleries as you want, and have different types of galleries within the same blog page. Here is...

<Playback Stop Play >

NoobSlide - One Gallery to Rule Them All

Shiba Gallery 3.3

Shiba Gallery 3.5