Shiba

Adventures in WordPress

You are here: Home / WordPress Programming / Create Your Own NoobSlide Gallery

Create Your Own NoobSlide Gallery

by 12 Comments

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.

function js_noobslide_tobi($inStr, $size, $tsize, $args, $images, $all_img, $noobnum) {
	global $shiba_gallery;
	$num = $shiba_gallery->nsNum;
	$id = 'noobslide'.$num;

	$jsStr = '';
	switch($noobnum) {
	case 'tobi':	
		//SAMPLE 4-modified (walk to item)
		$options = array(	'autoPlay' => ($args['autoplay']) ? 'true' : 'false',
							'handles' => "$$('#handles{$num} span')",
							'walk' => 'shibaNoobWalk.slideviewer',
							'responsive' => 'true'						);

		if ($args['caption'] != 'none') {
			$jsStr .= "var info{$num} = document.id('$id').getNext().set('opacity',{$shiba_gallery->noobslide->js->caption_opacity});\n";
		}
		$jsStr .= $shiba_gallery->noobslide->js->write_js($num, "$$('#{$id} span')", $size[0], $options);
		break;
	default:
		return $inStr;	
	}
	return $jsStr;
}

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

Line 8 – 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 9-18 – Copied slideviewer contents from the shiba-noobslide.php file.

Line 23 – Return our new javascript string.

function open_noobslide_tobi($inStr, $size, $tsize, $args, $images, $all_img, $noobnum) {
	global $shiba_gallery;
	$num = $shiba_gallery->nsNum;
	
	$openStr = '';
	switch($noobnum) {
	case 'tobi1':	
		$openStr .= $shiba_gallery->noobslide->generate_containers($num, $size, $tsize, $args);
		break;
	default:
		return $inStr;
	}
	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($inStr, $size, $tsize, $args, $images, $all_img, $noobnum) {
	global $shiba_gallery;
	$num = $shiba_gallery->nsNum;

	$closeStr = '';
	switch($noobnum) {
	case 'tobi':	
		$closeStr .= "</div>\n"; // close noobslide	
		$closeStr .= $shiba_gallery->noobslide->generate_caption($num, $args['caption'], $size[0], $args['cpos']);
		$closeStr .= "</div></div>\n"; // close noobmask
			
		$closeStr .= $shiba_gallery->noobslide->generate_numcontrol("handles{$num}", $size[0], $images); 
		break;
	default:
		return $inStr;
	}
	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, 7);
add_filter('shiba_open_noobslide', 'open_noobslide_tobi', 10, 7);
add_filter('shiba_close_noobslide', 'close_noobslide_tobi', 10, 7);
add_filter('shiba_render_noobslide', 'render_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 10

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 .= $shiba_gallery->noobslide->generate_numcontrol("handles{$num}", $size[0], $images);

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 $closeStr to $openStr since it now resides in the gallery top section. Our open_noobslide_tobi function now looks like this –

function open_noobslide_tobi($openStr, $size, $args, $images, $all_img, $noobnum) {
	global $shiba_gallery;
	$id = "noobslide".$shiba_gallery->nsNum;
	
	switch($noobnum) {
	case 'tobi':	
		$openStr .= "<div style='width:300px;margin:0px auto;padding-bottom:10px;'>\n";
		$openStr .= $shiba_gallery->noobslide->generate_numcontrol("handles{$num}", $size[0], $images); 
		$openStr .= "</div>\n";
		$openStr .= $shiba_gallery->noobslide->generate_containers($num, $size, $tsize, $args);
		break;
	default:
		return $inStr;
	}
	return $openStr;
}

Lines 7 and 9 simply add some padding to the bottom of the number controls.

1 2 3 4 5 6 7 8 9 10

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 –

		if ($tsize[0]) {
			$closeStr .= $shiba_gallery->noobslide->generate_thumbnails("handles{$num}_more", '', $size[0], $tsize, $images);
			$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 10

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{$num}_more = $$('#handles{$num}_more div');

//more handle buttons
nS[{$num}].addHandleButtons(handles{$num}_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 10

Success!

Our new js_noobslide_tobi function now looks like this –

function js_noobslide_tobi($inStr, $size, $tsize, $args, $images, $all_img, $noobnum) {
	global $shiba_gallery;
	$num = $shiba_gallery->nsNum;
	$id = 'noobslide'.$num;

	$jsStr = '';
	switch($noobnum) {
	case 'tobi':	
		//SAMPLE 4-modified (walk to item)
		$options = array(	'autoPlay' => ($args['autoplay']) ? 'true' : 'false',
							'handles' => "$$('#handles{$num} span')",
							'walk' => 'slideviewer'						);

		$jsStr .= "var handles{$num}_more = $$('#handles{$num}_more div');\n";
		if ($args['caption'] != 'none') {
			$jsStr .= "var info{$num} = document.id('$id').getNext().set('opacity',{$shiba_gallery->noobslide->js->caption_opacity});\n";
		}
		$jsStr .= $shiba_gallery->noobslide->js->write_js($num, "$$('#{$id} span')", $size[0], $options);
		
		// Insert in handling of new thumbnail buttons
		$addStr = "//more handle buttons\n";
		$addStr .= "nS{$num}.addHandleButtons(handles{$num}_more);\n";

		$jsStr = substr_replace($jsStr, $addStr, -4, 0);
		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 7 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.
  • $tsize – A two element array containing the width and height of the gallery thumbnails 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 7 arguments as shiba_open_noobslide.

4. shiba_close_noobslide

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

Leave a Reply

Your email address will not be published.

Comments

  1. Hi,
    awesome plug-in, well done!

    I’m struggling with another widget that was up until recently functioning well.
    it’s called clustrmaps and is meant to appear like this: http://clustrmaps.com/index.htm, however, it is currently looking as follows: http://www.hbconmain.com/what-is-the-gospel/
    for some reason, the display is coming out all strange.

    I contacted the developers and they don’t seem to have an answer, was hoping you could provide some assistance?

    thanks

    Reply

  2. Hello

    I have added noobSlide and have buttons below the picture which allow you to go to the next slide. but beside these buttons, I would like that the slides are changing automatically. Can you please tell me how to implement this? My code currently looks like this:

    window.addEvent(‘domready’,function(){
    var ns = new noobSlide({
    box: $(‘slides’),
    items: $$(‘div’,’slides’),
    size: 960,
    handles: $$(‘#handles img’),
    //handle_event: ‘mouseenter’,
    onWalk: function(currentItem,currentHandle){
    this.handles.removeClass(‘active’);
    currentHandle.addClass(‘active’);
    }
    });
    });

    Reply

    • In the meantime I extended my code to the following, but it still does not work:

      window.addEvent(‘domready’,function(){
      var ns = new noobSlide({
      box: $(‘slides’),
      items: $$(‘div’,’slides’),
      size: 960,
      autoplay: true,
      fxOptions:{duration:1000,wait:false},
      interval: 2000,
      handles: $$(‘#handles img’),
      onWalk: function(currentItem,currentHandle){
      this.handles.removeClass(‘active’);
      currentHandle.addClass(‘active’);
      }
      });
      })

      Reply

      • Thanks a lot, that was the problem!

        Autoplay does now work, but that leads me to another problem: I have 3 slides. After the 3rd one, they disappear and the position, where the slides should be, is empty?!

        Any idea about that?

      • I would look at the ‘items’ attribute which is where all the items are listed. If there are more items listed than what is actually available, then it will try to keep going and the slides may disappear.

  3. PLEASE HELP ME!!!

    I’m working with noobslide and I can not understand how to put a little code to the numbers at the bottom of the slider. I need that when a number is clicked a variable is clear “$clear(perfunc)”. I do not know where to put this line of code..

    If you contact me, I’ll send you the link, so you can understand what I’m asking for, and maybe you’ll find usefull the cycle I’ve applied to the slider for make it stops at the last slide. (I would love to have an infinity corousel without that “rollback” effect, but it was impossible)

    Please help me, my client is always ask me about…

    Reply

      • I do not thik so.. let’s check http://www.3820.it/3820.html

        Maybe I can fix this problem without the counter’s code that make the slider stops at the last slid, findig out how to make it run infinity without that rollbabk effect..

      • Hmmm, I don’t think I understand your original question.

        If you want to change the image transitions, then modity the fxOptions attribute.
        If you want to perform some action on the last element, then I believe you can check for the last element in the onWalk function.

    • Do you mean you want each post to contain a gallery of all the images that are associated with it?

      The Shiba Gallery plugin can be used to render images that are associated with posts, pages, or custom post types. To attach a gallery to every post, link into the_content hook and add in the proper gallery shortcodes.

      Reply