Photo Galleria Plugin for Wordpress

Photo Galleria is a simple, yet elegant, Wordpress plugin for photographers and designers who want to beautify their Wordpress photo galleries using an elegant jquery script. The Photo Galleria plugin synchronizes Galleria with Wordpress’ built-in media manager. Simply upload photos as normal and the Photo Galleria plugin will create a photo gallery with fade-in and fade-out effects common on flash-based websites. All the transitions happen inline without having to navigate to multiple Wordpress attachment pages. Pretty neat, eh?

Photo Galleria displays the thumbnail images that Wordpress creates for you and displays the original, high resolution uploaded image. Both are constrained proportionally via css. You can control their display size via the two CSS files included with the plugin. By default, the thumbnails display at 125px by 125px square and the image displays at 950px wide. Virtually every aspect of the presentation of Photo Galleria can be controlled via CSS.

Example gallery

Photo Galleria demo

Resources

Download

Changelog

Version 0.2

Commit date: Nov. 8, 2009

  • Now works with latest jquery (1.3.2)
  • Uses enqueue_script
  • Compressed CSS
Version 0.1

Commit date: May. 31, 2008

  • Initial commit

Tested with Firefox (Mac & PC), Safari, Internet Explorer 7.

82 Responses Comments RSS

  1. logicalnot says:

    It looks promising.
    But the gallery doesn’t display the same way depending on the chosen template. Most of the time the gallery is just plain ugly — ex: completly offset on the sidebar.

  2. @logicalnot – you need to modify the attached css files to make photo galleria fit the width of your site.

  3. WOW!!!! this is just what I’ve been looking for.. so simple to use and elegant. It also works on older posts that have images. this is awesome!!

  4. great work! a wonderful plugin, thank you.

  5. Great plugin, can’t wait to try it out!

  6. I should’ve read your ‘to do’ list as I’ve just spent considerable time trying to figure out how to display the main image at load ;-)

    I found this during my research:

    http://devkick.com/talk/topic/62/

    In my opinion, your plugin needs to display the main image first and glad to see it is number 1 on your to do list ;-)

  7. Thad, I did a small change in your plugin. It may help who wants that the gallery loads the first image. Also, it gives a different markup for home and categories (just showing the first image).

    I created a discussion in your forum. Files are there.
    http://www.peqno.com/Cc5c6

    Example is here:
    http://www.cumplice.net/wp_teste/?p=19

  8. i’ve just upload photo but i found this message:
    “The uploaded file could not be moved to /mounted-storage/home70b/sub004/sc40547-CMVP/mes56.com/wp-content/uploads.”
    can you tell me how to resolve this?

  9. Thad, I would happily donate to your plugin if it displayed the main image as well as thumbs, not instead of.

    Displaying a main image is fundamental to Galleria.

  10. I can’t seem to figure out what I am doing wrong, the plugin wont work for me.

    I uploaded the file to plugins folder, activated it, used the google API AJAX plugin and activated that, deleted any Javascript from the header and from the Photo Galleria plug in.

    When I upload images and click insert gallery all I see is a next and previous button but I dont see any images?

    Any one any ideas what I am doing wrong?

  11. @garrison – This isn’t so much a plugin issue as it is a Galleria issue. To my knowledge, it is impossible to use both the “active” state and custom thumbnails. I’ve attempted to ask the developer about this, but can’t get a response….which I translate to mean it aint possible. Without the ability to use custom thumbnails, page load times dramatically increase, as does the flexibility to use thumbnail size specified from within WP.

    @Jay – check to see that you don’t have two JQUERY’s in the head of your site.

  12. Thanks Thad but are you saying it’s impossible to do in WordPress?

    The demo on the developer’s site shows the main image from load AND thumbnails at the same time. In essence that’s the whole selling point of Galleria.

    I’ve seen an example of Galleria being successfully implemented on this WP blog:

    http://blogthemesplus.com

    Main image loads, and then thumbnails. Is this possible to achieve with your plugin?

  13. @ Garrison – No, it is possible. Originally, I built the plugin with this functionality. I removed it because I wasn’t able to load custom thumbnails simultaneously with the active state. Outside of the WP code, it is easily possible to load custom thumbs and the active state.

    I personally preferred giving readers the option of choosing their own entry point. In future editions, I’ll likely package this into an option checkbox within an photo galleria admin page. This, as it stands, is the beta release.

  14. at the version i downloaded, it seems like the last is not closed, so instead of

    $output .= “\n\n”;

    it should be:

    $output .= “\n\n”;

    after that everything worked fine for me. thanks – was exactly what i needed.

  15. I like the theme of your blog This is a job well done and this is great advice, Thankyou!

  16. People should be sharing more free things like this. Its what keeps the Internet buzzin’.

  17. This is a good Gallery

  18. Is there a way to switch the position of the image and the thumbnails? say i want the thumbnails smaller and stacked to the left with the image next to it. or the image on the bottom with the thumbnails floated on top.

    where would i edit that. theres nothing in the CSS of that nature and im not too good at editing jQuery/js/php.

    any help?

  19. Nice try but there are some things that really don’t work well on this. First off, it loads all main images in the background so if you have multiple posts on a page, the page takes forever to load. Also, if you have multiple posts per page that have images, posts lower on the page load the main image in the space reserved for the first post. Very confusing for the user and impossible to navigate.

  20. My students and I are having the same problem as Jay. We’ve installed the Google AJAX plugin and deleted the two instances of javascript in the plugin.

    When the page loads, there is still a Galleria-related jQuery in addition to the one generated by the Google AJAX plugin, but I can’t see how it’s still being applied:

    jQuery(function($) {

    $(‘.gallery’).addClass(‘galleria’); // adds new class name to maintain degradability

    $(‘ul.galleria’).galleria({
    history : false, // activates the history object for bookmarking, back-button etc.
    clickNext : true, // helper for making the image clickable
    insert : ‘#main_image’, // the containing selector for our main image

    I’ve looked at my header.php file for the Options theme, but don’t see any javascript that’d be conflicting, unless it’s courtesy the Smoothgallery plugin that came with the theme, though that doens’t look like it runs jQuery.

  21. I should add that this plugin looks like it rocks and has my students psyched to get using it. They’re very excited to get this Web site going and a good part of that is the gorgeous innovation this plugin will bring to the site. Thank you for creating this.

  22. For me as a photographer is useful information! Thank you!

  23. Hi Please Can you help me. I’m currently testing wordpress 2.6.2 on my website – http://www.littlecuriosityshop.co.uk/wordpress. I installed Galleria from the wordpress plugin database – http://wordpress.org/extend/plugins/galleria-wp/installation/
    I followed all the instructions, but don’t understand how to follow step 5 in wp 2.6.2 admin
    5. In your post/page, describe short code tag ‘[galleria]‘.

  24. Hi I’ve managed to get galleria to work on my site. How do I make the numbers on the thumbnails disappear? Do I have to edit something in the css file?

    Thanks
    Judi

  25. The Demo link doesn’t work…

  26. I could not get the demo link to work either!!!

  27. Link is very deadish…

  28. I’m a novice at this but when I activate the Gallaria plugin – it breaks the Modularity theme. Basically my home page then stops having a slide show, makes “image1″ full size and static, and breaks the slider below.

    Any advice would be much appreciated as I really want to use this but can’t without messing up my site: http://www.melbourne-photographer.com

  29. got a crazy problem. photo galleria spans my pages when used with Monochrome Lite.

    I have a couple of static tables in the sidebar, but they seem to be ok – all proportional. they do work with all the other content. but if I insert a gallery the sidebar goes… “downstairs”:

    page:
    http://www.albertodottavi.net/about/events/

    post:
    http://www.albertodottavi.net/technology-drive/

    any hint about this? thanks a lot

    PS and, oh, thanks :) really great job with themes and plug-ins. love ‘em

  30. The demo link is down, but you can still download the .zip if you “register” and “log in” to the Graph Paper Press site itself.

  31. I want to add the gallery directly into the loop on the single.php file. I can’t use the [galleria] shortcode on the post content because the post gallery needs to show up in a separate tab that I have manually added to my posts.

    I tried but it didn’t work. I will really appreciate if somebody can help me to do this.

  32. Hello Thad,

    I am into this problem as the previous user that the main image doesn’t load until one image is clicked from the thumbnails.

    I have tried the normal workarounds on the internet as making <li class=”active”… but it does not work for me …

    I am very much frustrated as I have been trying a lot.

    I would be very thankful if you can tell me the workaround for it …

    I am really stuck!

    Many Thanks !!!

  33. Photo Galleria is one of the better plugins that i’ve come across recently and i think i should be able to incorporate it into my Gustav Klimt Blogs reasonably easily.

  34. Hi,

    thanks for this great plugin! i was able to integrate it with jcarousel for a clients blog!
    could have never happened without this plugin, so thank you!

    pvf

  35. Whoops! Whatever you are looking for cannot be found.

  36. @Everyone – I just updated the plugin and added the demo to this page. The new plugin works with the latest version of jQuery that is packaged with Wordpress.

  37. The plugin doesn’t work for me. While it does turn the images into thumbnails, it doesn’t make them are clickable. Also, the mouse cursor doesn’t change to a hand. And there is no big image on top.

    I have Wordpress 2.8.5.

    Your example works fine for me. So, it’s not my computer. Let me know what you think.

    Also, your support forum is free, correct?

    • I fixed one problem, but noticed another. I removed the auto-framing option of my theme. It added extra html, which was the plugin’s jquery code did not expect. So I can view the gallery on each post’s page now.

      The new problem I noticed is: on the home page, where the most recent blog posts are shown, the thumbnails have an error message “error loading [filename].” Maybe this one is really a bug with the plugin. Not sure. Let me know.

      By the way, I’m using plugin 0.2.2, and it’s the first time I’ve ever used the plugin.

  38. I downloaded the plugin and couldn’t get it to work like the example above either. Everything seems fine except for the size of the main image which is just barely bigger than the thumbnails. Any ideas why? I have not modified any of the css files for the plugin and did not have an earlier version installed. I have currently disabled the plugin in favor of the built in gallery display.

    Jim
    http://jmtfoto.com

    • Try deactivating one of the many lightbox plugins you have activated and see if one conflicts. The more plugins you have activate, the more likely your site is going to load slow and the more likely there will be javascript conflicts.

      If you find which one conflicts, please report it back here.

    • One more thing Jim….

      The plugin displays your medium size image. Since your medium size image is 270 pixels wide by 150 pixels tall, I imagine that it’s displaying this version, which is only slightly bigger than your thumbnails. You can easily change this to the large size image by opening up photo-galleria.php and changing line 119 from:

      'size' => 'medium',

      to

      'size' => 'large',
  39. Looks like the second tip was what I needed. Only issue I have now is with some of my older posts before I converted to Modularity. The image sizes were different and some now display into the sidebar. The newer ones are perfect. Thanks for the help!

    Jim
    http://jmtfoto.com

  40. Yes, all you need to do is install the Regenerate Thumbnails plugin:

    http://wordpress.org/extend/plugins/regenerate-thumbnails/

    Or install the Additional Image sizes plugin:

    http://wordpress.org/extend/plugins/additional-image-sizes/

  41. Thad,

    Thanks again. I tried both of the plugins you suggested. The Additional Image size plugin threw a bunch of errors and I couldn’t get it to work, but the Regenerate Thumbnails plugin worked like a charm! It took a while because of the number of images on my site but seems to have done the trick!

    Jim
    http://jmtfoto.com

  42. Thad,

    On the home page, where the most recent blog posts are shown, the thumbnails have an error message “error loading [filename]” and the big image does not show.

    What is the cause and solution for this?

    Wordpress: 2.8.5
    Galleria: 0.2.2
    No other display plugins used.

  43. Great plugin!
    Thanks.

    But images not showing.
    For example see this page http://3d-kstudio.com/?cat=30

  44. Problem is solved!
    Now gallery on page-tags showing correctly.
    http://3d-kstudio.com/download-manager.php?id=25

  45. How come you didn’t make it so the thumbnails are sourced from the the thumbnails Wordpress generate? What if I have 30+ images?

  46. Cool Plugin!!!

    But, how comments single photo?

  47. Nearly got it working how I want (thanks Alexander), however I can only see the large image when viewing the post in a single page…

  48. Hello! I just updated the plugin but the main image seems to be stuck at 300px by 199px. Any idea on how i can fix this? example: http://yasindusoruth.com/events/eid-al-fitr-2009-at-the-cne/

    • @Yasin

      In your Settings menu, choose Media and set the size of Small/Medium/Large images. Then add [gallery size=large] to your page.

      • Thanks Jamblo!I also noticed this line in the script:’size’ => ‘medium’, I changed that to large and I was all set.Now to get a back button?

  49. http://jameshambly.com/design/ – large image only loads on single post page.
    Any ideas, anyone?

Trackbacks

  1. [...] Graph Paper Press has recently released F8 and F8 Remixed, a pair of themes which will turn your WP site into an image or multimedia portfolio with the help of the Galleria javascript image gallery script. (Graph Paper Press has also developed a separate WP plugin for Galleria). [...]

  2. [...] Photo Galleria Plugin for WordPress | Graph Paper Press (tags: wordpress gallery plugin) [...]

  3. [...] et non pas des moindres, je souhaitais vous présenter Photo Galleria, une superbe plugin pour créer des galeries sur votre blog. C’est le plugin qui équipe un [...]

  4. [...] To take it a step further… he also developed one hell of a great gallery plugin for WordPress, which you will find here. [...]

  5. [...] of the most interesting ones I came across is the Photo Galleria dealio. Photo Galleria is a simple, yet elegant, plugin for photographers, designers and [...]

  6. [...] had the same issue wasn't able to fix it: Photo Galleria Plugin for Wordpress | Graph Paper Press Is that the same plugin you used? __________________ [...]

Leave a Reply