Wordpress Logo

When I was building the property gallery for greekislandpropertyfinders I wanted to use a fancy javascript image gallery like Galleria, however I came across a problem with Galleria in that it couldn’t display more than one gallery on any page. It’s open-source so I used the source code to help write my own version and turned it into a WordPress plugin with the features I needed.

The plugin isn’t all that generalised, so I’m not sure it’ll be useful to many people but I think it’s a tool worth sharing.

Plugin features:

  • This plugin doesn’t change the WordPress media gallery admin interface – galleries are created and inserted into pages/posts as normal (i.e. using the media upload GUI + the
    [gallery]
    shortcode). WordPress authors won’t need to change or learn anything new.
  • The plugin makes efficient use of WordPress media (no front-end image resizing via CSS!) which means it doesn’t matter if one of your authors uploads a load of 3MB images to a gallery – it’ll still run fast.
  • The plugin doesn’t pre-download images that aren’t needed – it displays a loading spinner image when the user is waiting for a image on load.
  • Should be easy to style the gallery in your own way – uses CSS classes and IDs.
  • The user can click on the main image to cycle through the gallery.
  • Uses jQuery for cross-browser hover fade effects.
  • Small JS footprint: 2854 bytes.
  • Outputs valid XHTML (unlike the default WordPress gallery!).

Screenshot of the plugin:

Screenshot of Bitvolution-image-galleria plugin

Click to enlarge

Demo of plugin: www.greekislandpropertyfinders.co.uk/what-we-are-finding.

Download the plugin from the WordPress.org plugin directory.

31 Responses to WordPress image gallery plugin

  1. Ls says:

    Hey Bitvolution,

    I really like this gallery and I am using it for a website. It is really basic and that”s what I like about it. I think it is quite a good tool. The only problem is that it has no image captioning. You did not implement this yet did you?

    Greets and thanks for sharing this!
    Ls

    • Tom Fotherby says:

      Thanks Lauren,
      You’re right, image captioning would be a useful feature (and good for SEO) – I have released a new version of the plugin (v0.1) which supports it. To add a caption to any image in the gallery fill in the caption textbox in the WordPress gallery dialog.

      Thanks for your feedback,
      Tom

  2. Valentijn says:

    Hi

    Using 0.03 version of WP galleria in 2.9.1
    And using php4 on iis7 win system.

    I changed 2 things :

    // Member variables
    var $bitvol_galleria_version; //instead of public…

    And changed : function BitvolutionImageGalleria() //instead of public function BitvolutionImageGalleria()

    At this moment this php4 hack works for now :-)

    • Tom Fotherby says:

      Hi,

      I use PHP 5 so didn’t know the plugin wasn’t working in PHP 4. Thanks for the info on making it work with PHP 4.

      What is the convention when it comes to backwards compatibility? Do most other plugins work with PHP 4? Should I change my code so it works with PHP 4?

  3. Angela says:

    I’m fairly new to the wordpress scene. I uploaded your plugin wanting to use it to display a gallery on a page. Everything is looking good so far…. the plugiin uploaded & I activated it. Now where do I go to upload the pics to it? or how do I get it to display on the page?

    Thanks for your help.

  4. Sherry Haney says:

    How do you remove an image from the gallery for a particular page, but not from the media completely. In other words, I am working on a site for a client and they will have several pages of images. But they want to move an image from one page to another. When I open the page to remove that image from that particular gallery, it removes it completely.

  5. tom says:

    @Angela:
    > Now where do I go to upload the pics to it?
    The plugin does not change the WordPress interface in any way – to upload a pic to the gallery you click the “add a image” button on the WordPress write interface (or the “Add New” button on the Media Gallery page).

    > how do I get it to display on the page?
    The same as normal WordPress galleries – see http://www.youtube.com/results?search_query=wordpress+add+gallery for video tutorials. Once you have added your pics to a post or page you can display it by writing “[gallery]” in the post text (but usually the WordPress interface does this for you automatically).

    @Sherry Haney:
    > How do you remove an image from the gallery for a particular page, but not from the media completely.
    You have to use the “exclude” option in the gallery shortcode, see: http://codex.wordpress.org/Gallery_Shortcode . Yes, this is fiddly! Lets hope WordPress updates the media management interface one day.

  6. Colby says:

    the plugins nasty
    needed it over the original galleria for the exclude
    had to tweak a few things but its awesome up and running, thanks

  7. Dani says:

    Hi! I really loved this plugin. It is almost perfect. A thing that I miss is to show a “description” of image. Not just the “caption”. Can you help me?
    I tried, but him show twice the “caption” and “description” of each image.
    My e-mail: difluir@gmail.com
    Thanks a lot!

    • tom says:

      Correct me if I’m wrong but I think the plugin is working in the way that WordPress intends the caption vs description to work. If you have a gallery without my plugin enabled, the caption is shown on the gallery thumbnail, and the description is shown when the user has clicked the thumbnail and is viewing the full image. This assumes the gallery has the “Link thumbnails to:” set to “Attachment Page” not “Image File”.

  8. luca says:

    Hi!
    very good plug-in, but what happens with sidebars?
    the sidebar content you see in this page is not the real one (the sidebar is now displaying the bottom sidebar content of the page :S. the aside has totally disappeared): http://www.buyflatbarcelona.com/flats/rambla-del-raval-36/

    What do you think? What could be the prob.?

    Thanks!!!

  9. luca says:

    sorry, problem solved! (and it was not a plug-in problem!)

  10. Victor says:

    Well, it seems that I am finally seen how this really works, but… the pictures appear kind of out of the box and the main one (the one that is shown big) is not big enough to fullfil the space. What am I doing wrong? Do the pictures have to have a special pixel size? Well, I’ve already tried that and keeps same problem.
    WP3.0.5 (I’ve tried under 3.1 and it is even worst! Nothing appears!!)
    Try going into my web.
    name: user
    pass: user

  11. Victor says:

    Hi Tom.

    Please, u already have my website, same as user&pass. Can you have a look?
    I don’t understand why there is a blue tryangle in each thumbnail (that when u click on it open in big the picture in the middle of the website).Please, I just want it as the example above (even like that without the PREVIOUS/NEXT buttons), or it could be as the exemple http://www.greekislandpropertyfinders.co.uk/what-we-are-finding. What am I doing wrong?
    WP 3.0.5, very few plugins installed.

    Thank u

    Victor

  12. Victor says:

    ok, I see this is something due to my theme!! Boldy. If I change it for another it does not happen anymore. mmh! Now I have some more info to keep trying.
    Thanks

    • Tom says:

      Hi Victor,
      I guess the Bitvolution Image Galleria plugin is not compatible with your theme. This incompatibility is quite common.
      The plugin works by binding to the “post_galleryfilter to override the default WordPress gallery.

       /**
        * Bind our own callback to the "post_gallery" filter to override the default WordPress gallery template.
        * Original is defined in gallery_shortcode() in wp-includes/media.php
        */
        add_filter( 'post_gallery', array(&$this, 'bitvol_galleria_shortcode'), 10, 2 );
      

      If another theme or plugin does the same thing, then an incompatibility arises. It is usually possible to solve the issue by editing the theme code to comment out the line that defines the filter. I often create a child theme so that I can remove a filter that I don’t want using remove_filter in the functions.php file without needing to affect the original theme.

  13. Christopher says:

    Great plugin. The only problem is that sometimes the link in ie7 don’t work. I know its this plugin because we disabled/enabled other plugins and we narrowed it down to this. Basically, links in the nav/sidebar of our wordpress theme don’t click out anymore. Any idea why that is?

  14. Jean says:

    It looks your your great plugin is not compatible with WP 3.1. The minute I edit it (even inserting a single carriage return in the code, without touching any header), it gets deactivated by WP with a message stating that The plugin does not have a valid header. I tried that with 2 different installations of WordPress. I looked at the headers and could not find anything special about them. For the moment, I turned back to 3.0.5 because I can’t live without your plugin!
    Do you have a clue about this? I suspect it could be a single bit of code that causes this deactivation.

    • Tom says:

      Hi Jean,
      You could well be right, but I do run this plugin on various WordPress installations that are running WP 3.1 without the same troubles as you. Two examples are http://www.stokerowaccommodation.com/gallery and http://www.greekislandpropertyfinders.co.uk/what-we-are-finding

      • Jean says:

        I waited for a newer version of WP. Today I upgraded a copy of my site to 3.2.1, with my modified version of the plugin being instantly deactivated with the same deactivation message stating that The plugin does not have a valid header. I re-installed your original plugin with success, added a return between to blocks of code in bitvolution-image-galleria.php and got the same deactivation message. I edited the file with Dreamweaver 11. What I found out today is that if I edit the file within wp-admin, the plugin seems to be safely saved. So the culprit is Dreamweaver (a trustworthy program) – or a bit of code in the php file that Dreamweaver does not like or understand. Could that give you a hint ? Of course, I will re-edit the files with the wp-admin editor and come back with my results.

        • Jean says:

          Today, I tried to add a return between, again, two blocks of code, in my modified version of the plugin, with WP editor, so that the file would be somehow rewritten by it, before upgrading WP core from 3.0.5 to 3.2.1. And it worked! The plugin was not deactivated on Admin reload after upgrade, did not generate any error message, and seems to be working flawlessly! So, in conclusion, there is an interaction between the original plugin code, Dreamweaver 11 and WP 3.1 and above… I suspect some invisible character being written by Dreamweaver, but when I compare the WP-admin-editor-modified file with Dreamweaver’s one, TextWrangler does not find any difference between the two except the extra carriage return… Could saving the php file with the WP editor change a record in the database? So, I don’t come with a final explanation, but have found the workaround to avoid Dreamweaver to edit the plugin’s files in the future. And again, I LOVE your plugin, it is the only one I found that fitted so well our needs.

          • Tom says:

            Thanks Jean, for documenting your struggles so well here. It could help out someone else if they come across a similar issue. (I’m afraid I didn’t know how to solve it and I’ve never used Dreamweaver so can’t investigate closer).

  15. carl says:

    Hi Tom,

    thanks for the great plugin. I am having a few issues which I hope you can help me with. The gallery works fine apart from the fact that the thumbnails are all over the place (you can see what I mean here: http://carlwebb.com/wordpress/?page_id=129). Have you seen something like this before or am I just doing it wrong!)

    Thanks for any help you can give me.

    CARL

    • Tom says:

      Hi Carl,

      Yes, I have seen this before. It occurs because, by default, my plugin uses thumbnails that are not the normal WordPress thumbnail size. You need to go to Settings->Media and change the thumbnail size as described in Step 3 of the installation instructions at http://wordpress.org/extend/plugins/bitvolution-image-galleria/installation/

      Why did I choose this plugin size and not the normal WordPress one? It is much more space efficient and faster and works better for the sort of websites I work on.

      There are other gallery plugins that use the default WordPress thumbnail sizes or automatically scale the images (a performance sin in my eyes).

  16. Lauren Serge says:

    Hi Bitvolution!

    I am using the bitvolution gallery for a project (again) and I wanted to tweak it to my needs but can not figure out how to do that exactly.
    Basically I want only the thumbnails to be visible at first. Then when you click on a thumbnail the .mainImageDiv slides open. How could I do that?
    If you could explain me where I could alter that in the code I can try to figure it out myself!

    I am a big fan of Bitvolution, sorry for all the requests ;)
    Greets,
    Lauren

    • Tom says:

      Hi Lauren,
      It could be possible if you have have some jQuery-fu? You’ll need to edit the plugin jQuery code. You’ll need to have mainImageDiv hidden initially then use jQuery slideDown() on the thumbnail click event. The tricky bit will be to make it work when there are multiple galleries on one page.

  17. Frank says:

    Is it possible to integrate this plugin with some lightbox effect, so when you click on on the medium image, it will show the “large” image in a pop up lightbox effect?

  18. Salustiano Muniz says:

    Just came here to thank you for the plugin. I’m using on a website I’m developing.

    If I see you around, remember me to pay you a beer ;)