Shiba

Adventures in WordPress

You are here: Home / WordPress Plugin / Shiba Gallery / Shiba Gallery Plugin

Shiba Gallery Plugin

by 231 Comments

The Shiba Gallery Plugin allows you to display a variety of javascript galleries within your WordPress blog. All you need to do is specify the type of gallery you want in your regular WordPress gallery shortcode.

The Shiba Gallery is very flexible and can render post, page, and gallery objects, in addition to image attachments. This article describes some of the cool things that you can achieve with the Shiba Gallery.



Shiba and Siberian rendered using TinySlideshow2.

[gallery id="10" type="tiny2" size="large" frame="white" tsize="none" autoplay="1"]

[Shiba Gallery Change-Log]

December 25th, 2015 – Shiba Gallery 4.4.5

  • Fixed lightbox to work with duplicate thumbnail images.
  • Tested for WP 4.4.

This is a very big update, so definitely test first before deploying.

More sample galleries.

How to Get Shiba Gallery.

Javascript Galleries Supported

Currently, the Shiba WordPress Gallery Plugin includes the following gorgeous Javascript libraries –

TinySlideshow by Michael Leigeber.



Example TinySlideshow Gallery

Tiny Slideshow is a very slick looking inline gallery that allows users to scroll through the images, or enjoy them in an automatic slideshow mode.

[gallery id=10 type="tiny" caption="title" size="(600, 400)" crop="1" responsive="aspect"]

NoobSlide from EfectoRelativo.net


<< Previous Stop Play > Next >>

Example NoobSlide Galleria Gallery

There is one word to describe the NoobSlide Gallery – Awesome!

If I had two words, I would say Simply Awesome!

With NoobSlide you can easily combine together various gallery type components to create a range of compelling gallery styles.

For example, to the right I have created a NoobSlide version of Galleria. At the bottom I have created a NoobSlide version of SlideViewer.

[gallery id=10 type="noobslide_galleria"]

[gallery id=10 type="noobslide_slideviewer" responsive="aspect"]

1 2 3 4 5

Example NoobSlide SlideViewer Gallery

Lightbox by Lokesh Dhakar.

Original lightbox gallery. It uses jquery and sizes properly based on browser window.

[gallery id=8162 type=lightbox size="thumbnail" caption="none"]



Example Lightbox Gallery.

Slimbox by Christophe Beyls.

Slimbox is an efficient version of Lightbox that is solely based on jQuery. Slimbox will now be used in place of Lytebox.

[gallery id=8162 type=slimbox size="thumbnail" caption="none"]



Example Slimbox Gallery.

Lytebox by Markus F. Hay.

Lytebox is not as efficient as Slimbox but it will resize images that are larger than the browser screen.

[gallery id=8162 type=lytebox size="(120,120)" caption="none"]



Example Lytebox Gallery.

Popeye 2.0 Gallery by Christoph Schüßler.



Example Popeye Gallery.

Popeye is an awesome inline gallery that allows you to expand images in-place. It also has some very well styled frames which we have also included in the Shiba Gallery Plugin.

[gallery id=10 type=popeye]

Galleria by Aino.



Example Galleria View.

Galleria is a very professional looking image gallery. It is also fast, simple, and easy to use. The classic version shown here is very similar to Tiny Slideshow in terms of functionality. However, there are a variety of other themes that can be bought at the Galleria site that offers many alternative functions and views.

[gallery id=10 type="galleria"]

Navigation List by ShibaShake

A simple list of posts or pages including their thumbnails, associated links, and a short summary. A good way to create a navigation page or navigation widget.

[gallery type="navlist" recent="1" numberposts="5" caption="description" ]


Example Navigation List.

WordPress Native Gallery

The WordPress native gallery is also supported. Just specify the type as native.

[gallery id=10 type=native size="thumbnail" responsive="aspect"]

Artist-Picture1
Artist-Picture8
Artist-Picture21

Artist-Picture22
Artist-Picture7

Example WordPress Native Gallery.

Expanded WordPress Native Gallery

The previous expanded WordPress Native Gallery has been replaced with the NoobSlide NativeX gallery. It contains thumbnails just as before, but also has a nice preview image and description panel. This gallery is most useful when displaying post, page, or gallery objects.

Just specify the type as noobslide_nativex.

[gallery id=1688 type="noobslide_nativex" size="medium"]

<< Previous Next >>

Artist-Picture1

<< Previous Next >>

Artist-Picture8

<< Previous Next >>

Artist-Picture21

<< Previous Next >>

Artist-Picture22

<< Previous Next >>

Artist-Picture7

< Playback Stop Play >

Example NoobSlide NativeX Gallery.

Custom Image Size

You can specify the image size that you want using the standard WordPress gallery shortcode tags – full, large, medium, thumbnail. These sizes are set under Settings >> Media.

Alternatively, you can also specify your own custom size.

[gallery id="1969" type="galleria" size="(300,225)"]


Shiba and Siberian rendered using Galleria.



Shiba and Siberian rendered using Galleria.

Shiba Gallery Plugin Expanded Short-Codes

  • category – List of comma separated category ids to include in the gallery. 
    • [gallery category="109" type="nativex"]
  • tag – List of comma separated tag slugs to include in the gallery. 
    • [gallery tag="tag-a,tag-b,tag-c"]
  • tag_and – Same as above except this allows you to perform an AND operation instead of an OR. It will only return images that contain ALL of the tags in your list.
    • [gallery tag_and="tag-a,tag-b,tag-c"]
  • recent – List of recent articles. 
    • [gallery recent="1"]
  • numberposts – Number of objects to include in the gallery. 
    • [gallery category="10" numberposts="15"]
  • page – Which page of gallery objects to show. It is used in conjunction with numberposts to enable gallery paging.
    • [gallery category="10" numberposts="5" page="2"]
  • post_type – The type of objects to include (post, page, gallery, attachment, or any). 
    • [gallery category="109" type="nativex" numberposts="15" post_type="post"]
  • responsive – Specifies whether gallery should be client responsive [none, aspect, width]. Width adjusts the width of the gallery while keeping height constant. Aspect adjusts both width and height of gallery to maintain its aspect ratio. More on client responsive options.
    • [gallery category="109" responsive="aspect" type="tiny"]
  • tsize – Specify thumbnail size. Set tsize=”none” for no thumbnails.
    • [gallery category="109" tsize="(54,54)" type="tiny"]
  • frame – The type of frame to use for the gallery. Current frames include none, green, blue, gray, shadow, black, white, and border. Here are some example galleries with the different frames.
    • [gallery category="10" frame="green"]
  • link – What to use as the gallery caption and image links. Current link options include none, attachment, file, slimbox or lytebox. 
    • [gallery category="10" link="none"]
  • caption – What to use as the image captions. Current caption options include none, title, description, or permanent. More detail on the different gallery caption options.
    • [gallery category="10" caption="description"]
  • cpos – Positions the gallery caption to the [bottom, top, left, right].
    • [gallery category="109" cpos="bottom"]
  • clen – Specifies maximum caption length for the gallery.
    • [gallery category="109" clen="500"]
  • crop – Crops images in gallery.
    • [gallery category="109" crop="1"]
  • active – Specifies whether images in the gallery are active, i.e. whether the images act as links.
    • [gallery category="109" active="1"]
  • autoplay – Automatically scroll through the gallery. Any manual user action will stop autoplay.
    • [gallery category="109" autoplay="1"]

Note –
Only one of include, category, tag, recent, or id will be used. Include will be checked first, followed by category, followed by tag, and then recent. If none of these are set, id will be used.

Shiba Gallery Default Options

You can specify a default gallery type by going to Media >> Shiba Gallery.

Shiba Gallery Options Screen.
Shiba Gallery Options Screen.

From this screen you may also set the default thumbnail picture, default frame, and default captions. There is also a check box in the Default Frame section that specifies whether this default frame should also be applied to images in your blog.

The default gallery image will be used for posts and galleries that have no thumbnails assigned to them. If you do not have a default image, the plugin will just display an empty black image.

Show Shiba Galleries in Your Widget Areas

To show shiba galleries in your widget areas, simply enable gallery shortcodes for text widgets.

// Add to the init function of your functions.php file
add_filter('widget_text', 'do_shortcode');

Call Shiba Gallery Directly from PHP

If we want to call Shiba Gallery directly from PHP rather than use the WordPress gallery shortcode, we may do the following –

global $shiba_gallery;
echo $shiba_gallery->parse_gallery_shortcode("", array('id' => "10"));

How to Get Shiba Gallery.

Shiba Gallery Plugin Updates

Shiba Gallery 4.4

May 3rd, 2014

  • Updated plugin paths.
  • Added clen as a gallery shortcode attribute for controlling caption length on a gallery by gallery basis.
  • Fixed a bunch of gallery CSS styles.
  • Remove device check for slimbox javascript.
  • Noobslide now using mootools 1.4.5.
  • Updated for WordPress 3.9.
  • Tested on Chrome, Safari, IE 11.

Shiba Gallery 4.3.3

Sept 23rd, 2013

  • Added lightbox 2 gallery by Lokesh Dhakar.
  • Fixed sizing bug that occurs when server responsive option is turned off. Thanks to Susan for reporting this.
  • Assign better option default values based on gallery type.

Shiba Gallery 4.3

Sept 18th, 2013

  • Shiba Gallery is now both client and server responsive. Server responsiveness allows the server to send the right sized images based on device width. Client responsiveness allows image size to change based on browser width.
    [More on mobile responsive galleries and images]
  • Gallery images and links can now be tied to slimbox or lytebox.
  • Added new gallery shortcode attributes – crop, active, and cpos.
  • Create a slimbox gallery based on captioned images within a post.
  • Updated Shiba Gallery settings page.
  • Updated for WordPress 3.6.
  • Cleaned up styles and fixed a bunch of bugs.

Shiba Gallery 4.0

Jan 12th, 2013

  • Galleries and captioned images are now mobile responsive! The plugin uses device width to determine gallery and image sizes.

    To turn on the mobile responsive feature, go to Media >> Shiba Gallery, scroll down to the bottom, and click on the “Enable responsive galleries and images” checkbox.

    [More on mobile responsive galleries and images and what is used in this plugin]

  • Updated for WordPress 3.5.
  • Updated Tinyslideshow to version 2. The old version is still available by using type=”tiny1″
  • Fixed noobslide fast clicks causing thumbnails and images to get out of sync.
  • Collect galleria styles into the main css file.
  • Options page is now encapsulated in a class wrapper and also uses the 3.5 new media manager.
  • Removed Pslides. There are customization limitations, and the plugin already contains several thumbnail galleries including tiny1, tiny2, galleria, and noobslide.
  • A whole bunch of other fixes.

Shiba Gallery 3.7.2

Aug 7th, 2012

  • Updated for WordPress 3.4. Fixed default image pop-up menu.
  • Updated Shiba Gallery options page with more standardized permissions check.

Shiba Gallery 3.7

May 7th, 2012

  • Control thumbnail size. Specify thumbnail size using the tsize parameter. Works with Tiny Slideshow, Picture Slides, and Noobslide.
  • Galleria. A new version of Galleria has been added back to the plugin.
  • Navigation List. Useful for displaying a set of related posts or pages together with thumbnails, links, and article summaries.
  • Default value filter. Hook into the shiba_gallery_defaults filter to alter gallery default values.
  • IE8 and IE7 compability. Fixed several IE8 and IE7 compatibility issues. All galleries should now work on these browsers.

Shiba Gallery 3.5

February 15th, 2011

  • Gallery links. You now have the option to set your gallery links to file, attachment, or none.
  • Expanded WordPress captions. The standard WordPress caption shortcode has been expanded to deal with images and galleries.
  • Lytebox. The Lytebox gallery has been added back to the plugin because it resizes large images according to the browser screen whereas Slimbox does not.
  • Apostrophe in Titles. Galleries should function properly even if images have the apostrophe symbol in their titles.

Shiba Gallery 3.3

December 2nd, 2010
This is a big release with many new features.

  • Gallery frames. You may now assign a variety of styled frames to your WordPress galleries and images.
  • Gallery captions. You may now turn gallery captions on and off, as well as show image titles and descriptions.
  • Gallery paging. The page attribute is now supported in the gallery shortcode. You may easily enable gallery paging by setting numberposts and page in your gallery shortcode.
  • Gallery default options. There is now a gallery options page under Media >> Shiba Gallery. This screen allows you to set default frames, gallery types, captions, and thumbnail.
  • New galleries. Some exciting new galleries have been added including Popeye 2.0, Picture Slides, and Slimbox.
  • Gallery javascripts are now loaded at the end of the page and only as needed. If no galleries are used, then no gallery javascripts will be loaded. This will help improve page efficiency.

Shiba Gallery Plugin 3.1

April 6th, 2010

  • Plugin has been modularized and all functions are encapsulated within wrapper classes.
  • I have also integrated Shiba Gallery with the awesome YARPP plugin for showing related articles. By simply using the related tag in your gallery shortcode you may view YARPP results using any of the javascript galleries within the Shiba plugin.

Shiba Gallery Plugin 3.0

  • The Shiba Gallery Plugin has been significantly enhanced in this release with the inclusion of NoobSlide; one of the most versatile, compelling, and well-constructed Javascript galleries I have come across.
  • With NoobSlide, I was able to construct galleries that are similar in style to the previous Galleria, SlideViewer, and NativeX gallery types. Execution of galleries are now a lot faster, smoother, efficient, and clean.
  • I have replaced –
  • There is no longer any need for iframes, or background-image resizing operations. This makes the plugin faster, cleaner, and more secure.

Shiba Gallery 2.7.3

February 15th, 2010

  • There is a Fatal error bug in the Shiba Gallery 2.7 release. This is due to a missing function in the plugin. I have fixed it in the latest patch 2.7.3. Please download this important patch.
  • Many thanks to Jacob for detecting and reporting it so quickly.

Shiba Gallery Plugin 2.7

  • You can now render post, page, and gallery objects using any of the gallery types. Some new gallery short-code options have been added to facilitate this new capability.
  • We also expanded the WordPress native gallery and added it as a new gallery type (type=”nativex”).

Shiba Gallery Plugin 2.5

Shiba Gallery Plugin 2.0

  • Galleria now works on Google Chrome. It is Schweet!

Shiba Gallery Plugin 1.0

  • Detailed description of the Shiba Gallery Plugin with examples.

Future Additions

If you are particularly impressed with a Javascript gallery, please let me know and I will look into including it within the Shiba Gallery Plugin.

Please let me know if you encounter any bugs or compatibility issues. This will help me to improve the plugin and update the compatibility list above.

Thanks to all the Javascript library authors for sharing their very awesome gallery scripts with us!

Leave a Reply

Your email address will not be published.

Comments

  1. Hello, it’s been a while since I’ve needed any help. I’ve been using your plug in for a long time, have always liked the way it added a customized effect.

    I was wondering if you could take a look at my recent problem.

    When I call for the Shiba at the end of posts I have no issues
    http://fritzimages.com/blog/2012/lee-big-stopper-system/13217/

    I recently tested the noobslide which are used to create mini-blogs and the plugin freezes
    http://fritzimages.com/blog/2012/2012-nov-blog/13107/
    my post command is:
    [gallery recent="1" font-size:14 numberposts="15" gallery type="noobslide_8" size="(150,150)"]

    I’m not sure what is causing the freeze issue

    I’m reluctant to upgrade your plugin plugin or YARRP since whenever I did in the past the errors started to fly in.

    Wp 3.4
    Shiba Galery 3.5.1
    YARPP 3.21

    thanks,

    Ed

    Reply

    • Hmmm, the page is freezing because somehow the first gallery object, noobslide1 is missing. Also, the next and previous post links are showing up a bit differently. Did you make modifications to the gallery?

      Probably the best thing to do is to update both plugins on a test site (without modifications) and test things out there on a default theme.

      Also, I would try taking out font-size and use just type instead of gallery type.
      [gallery recent="1" numberposts="15" type="noobslide_8" size="(150,150)"]

      Let me know how it goes.

      Reply

      • Hi …thanks for the quick reply… I tried editing out the font size, but that had no effect. I never made in modifications to the galley that I remember, but it is of.

        What did you mean that the gallery object noobslide1 is missing ?

        The other peculiar thing is that a mouse click on the arrows of next keys do not work. I think I’ll see if any other plug in is causing an issue and maybe reload a few files.

        I’ll keep you posted….

        thanks

  2. Thx for the plugin, it is exactly what Im looking for, but:

    I need help, Im trying to use it with Delicate Theme from Elegant Themes and Shiba is breaking the slideshows from the initial page.

    Reply

  3. Hi, amazing plugin…I like it..

    But I want some change in “pslides”. if any one click on image than it will open with light-box, ya I wann the pslides effect as it is..
    so, how can i do that..?? plz help me..

    Reply

    • @Naren – I am helping my friend to build the page, and we all love the Shiba plugin so much but this question pops up several times :
      is it possible with noobslide (or pslides) that click on image title would open image with slimbox/lightbox effect?

      If you manage to do that would you be so kind to post how you did it.
      Thanks

      Reply

  4. Hi, I’m building an artist gallery website in WordPress PressWork and love the drop-shadow feature in the Shiba gallery plugin. It seems to work fine with Chrome. The problem I have with using it is that the “shadows” do not/not show up in the Firefox broswer, at least using Firefox for PC (I have vers 15.0.1.) Is there a relatively easy workaround? Would love to show off the art with Shiba. Thanks

    Reply

    • Try adding “box-shadow: 5px 5px 10px #000 !important;” to .frame4 .shiba-outer in the frames.css file. The full CSS will look like this-

      .frame4 .shiba-outer {
	box-shadow: 5px 5px 10px #000 !important;
	-moz-box-shadow: 5px 5px 10px #000 !important;
	-webkit-box-shadow: 5px 5px 10px #000 !important; }
      Reply

  5. This may be an absurd question, but I’ve combed the web pages here looking for an answer to two questions, so I thought I would ask here:

    1) Is there a document that explains all of the shortcode options for Shiba Gallery?

    2) What has to be in place for the related posts functionality to work? I’ve taken examples straight from your examples here and they display absolutely nothing on my site, in either a post or a page. What am I missing?

    Take care of you,
    -nee

    Reply

  6. Hi am trying to get a handle on wordpress and your gallery plugin an when i follow your steps NO gallery appears, (have made slimbox default) when i look at the html i see
    [gallery link="file" columns="4" orderby="rand"]

    then i tried your above code
    [gallery id=8162 type=slimbox size="(150,150)"]
    the id is for i think the galley? but where do i find the id?
    HOPE YOU CAN HELP
    THANKS IN ADVANCE
    melanie

    http://www.bunddesign.com/wordpress/logo-design/

    Reply

    • Did you attach images to the post in question?

      Here is a tutorial on how to attach images to a post.

      When you edit a post, its id appears in its url address, e.g. mysite.com/wp-admin/post.php?post=10&action=edit (id = 10). If you don’t specify an id in the gallery shortcode then it defaults to using the images that are attached to the current post (i.e. the post that contains the shortcode).

      Reply

  7. Hey Shiba’s I been using your plugin fo about 3 months now. but you know what???
    Sorry but I can’t stop my self in telling you this. “YOU ROCK, YOUR PLUGIN IS FREE BUT YOUR SUPPORT IS MORE THAN PREMIUM PLUGIN” keep up man God bless. Ummmhp I called you man but your profile is woman ?????? are you a man or woman?? 😛

    Reply

  8. Hi! First, a big THANKS for creating Shiba Gallery and the Media Library plugin. It’s exactly what I’ve been looking for.

    I’m using the gallery in “native” mode (for various reasons that are out of my control). Would it be possible to add a configuration switch to turn the additional (text) link to the image in the caption that appears under the thumbnails on and off, or can you provide me with instructions on how I can do that myself?

    An example: http://www.alex-kunz.com/dandelion-study/ – I’d like the thumbnails to be clickable, but no additional text link in the Image title.

    Thanks a lot
    Alexander.

    Reply

    • Try adding link=”none” into the gallery shortcode –

      [gallery link="none"]

      There are a variety of other shortcode options listed above.

      Reply

      • I should have mentioned that I already tried that. 🙂 Unfortunately, that removes the link from both the caption AND the image thumbnail (where I want it, so that thickbox opens). Thanks for looking…

      • Ah ok.

        You can hook into shiba_get_attachment_url. Something like this –

        add_filter('shiba_get_attachment_url', 'my_own_link', 10, 2);

function my_own_link($url, $id) {
        return wp_get_attachment_url($id);
}

        The source function is called get_attachment_url in shiba-gallery-helper.php.

      • Oh. Well, I’m not a programmer, I don’t know how to hook into things (code-wise). But with a different theme I was able to solve some of my problems (weird, but what do I know). Thanks for your help anyway!

        Oh and, if you’d have a look at the “prettyphoto” lightbox script that would be cool. 🙂

  9. Hi,

    the Plugin and all its variations are really wonderful. I’d like to use the Noobslide with a lightbox effect, i.e. clicking on the large picture will call up the lightbox. Any chance?
    Best regards
    Jacky

    Reply

  10. Hi again mate. I’ve setup the plugin for my blog and looks great! I need one more thing however. I want to have a link on every gallery “see original post” which will be a link to the post to which the images are attached to. As I see there are two possibilities for this (please feel correct me):

    1. Edit the shiba-native.php and add what?

    2. Add new meta box custom field in the Gallery post types where I would be able to enter the link manually of the original post I like to show in that certain gallery.

    Which case would be better for the job and how would I accomplish that?

    Reply

    • It depends on where you want to add the link. The easiest way is probably to hook into post_gallery or img_caption_shortcode and add the link right into the html output.

      Reply

      • I’m sorry but my php skills are not so good. Could you elaborate a bit more?
        Let me explain a bit more. My intended scenario is the following:

        Regular posts mixed with text and pictures. There would be a few sets of three thumbnail images throughout the text and the links of these thumbnail sets would take the user to a seperate gallery page where all of the images of that particular posts are grouped and showed into one big gallery. Much like the galleries on engadget.com. Well those specific gallery which contain all of the images of a specific post should have a link which takes the user back to the original post where the images are reviewed or so. I hope you understand what I’m aiming for.

        Engadget is probably the perfect example. It has review posts where a particular product is reviewed and the review is accompanied with images. When a use clicks on an image it takes him to a seperate gallery page which includes all of the images of the post which took you there. Hence the link back from gallery to the post.