Demo

Basic example

After enabling the plugin, all your native wordpress galleries will be magically transformed to, what I like to call, a Responsive Gallery Grid. Really! All you need to do is enable the plugin and your galleries will all look like this:

Note: In order to get the lightbox, you can install any third party lightbox plugin. I’m using jQuery Colorbox on this site, which works out of the box.

Some kind of plant. Not sure what it is called.A nice purplish flower. Sure, the bees will love this beauty!Just some mushrooms growin' on a trunk."Itsy Bitsy Spider" (also known as "Incy Wincy Spider", "Eency Weency Spider", "Inky Binky Spider", "Inky Dinky Spider", "Ipsy Wispy Spider", "Ipsy Dipsy Spider" or "Itchy Wincy Spider")I have nothing much to say about this one, reallyWhen nature calls...Don't they look delicious? Didn't you which you could just.. eat them! Or something.Is it a picture? Is it a painting? Is it a picture of a painting?Pigeons! And a link!

Too boring for you? Check out the somewhat more advanced examples

58 thoughts on “Demo

  1. JC

    Hi,
    Can you take a look at my site. I love the gallery however I’m experiencing two issues which I think can be solved coding, at least I think.
    1. In my gallery, the images to the right of the page are being cut off as if they are running off the page; how do I fix this?
    2. I would like the images to display in a larger format when you hover over them with the mouse instead of having to click on them to bring them up larger. Any idea how to change this?

    Reply
    1. Jules Post author

      Thanks for using my plugin! I have sent you an e-mail with instructions on how to resolve the issues.

      The first problem was due to some css in your theme, and the second issue will be solved in the next update of Responsive Gallery Grid, where the scaling factor will be configurable.

      Reply
      1. Danilo

        I have the same issue. The imagens to the right and to the left are being cut off. Can you send me an email with instructions too?

        Thanks.
        Nice plugin.

        Reply
        1. Jules Post author

          This will happen if one of the grid containers have the CSS property overflow:hidden. If possible, you will need to change this to overflow:visible. If not, you can wrap the gallery inside a div, and assign some margins to it.

          Please e-mail me a link to your website if you need any assistance.

          Reply
  2. TD

    Great day!

    I love the gallery. My only issue is that when I connect it to the j-query colorbox plugin, captions or titles for the images won’t show. Is there a way that you can assist me with that? Thanks.

    Reply
    1. Jules Post author

      Captions are not supported yet. I’ll see if I can add them to the title attribute of the anchor tags, so Colorbox will use it as caption and you can read the caption when you mouse-over the images. Would that be okay? If you need the captions to show above the images somehow, that would be a bit too complex to quickly implement. I’m thinking about creating a paying plugin, RGG Pro, in which I will support different styles of captions and share options for each image.

      Reply
  3. Evestus

    Hey! I have a few issues.. the images always stack in one column – and they always link to original image file instead of a pop-up enlarged image like on the demo here. What do I do oh guru of computer wisdom!?

    Reply
    1. Jules Post author

      you just need to install a lightbox plugin. i’m using jQuery Colorbox. i have heard about the issue with the images moving to the left. could you email me the link to a page with the problem so i can have a look? thanks! jules.colle@gmail.com

      Reply
  4. Frank

    Hi, great great plugin! Really!

    I’ve installed it on my wordpress site and the gallery now has the Google+ structure. Unfortunately, when I click on a single photo, the browser don’t open the viewer with navigation arrows and captions, as seen your demo. The browser opens the single photo in a new window.

    Why?

    many thanks

    Reply
  5. Frank

    Sorry! I’ve installed jQuery Colorbox and now it works.

    And what about to add some external links into the description or caption of a single picture?

    thanks

    Reply
    1. Jules Post author

      No problem, I don’t like to read either. Good idea with the links. I just tried it for the image of the pigeon. Check it out. I might need to strip the HTML tags in the title attribute or something. I’ll see what I can do. Keep an eye out for the next update.

      Oh, and yeah, just add this to the caption to add a link.

      <a href="http://my-external-link.com">My-Link</a>

      change http://my-external-link.com and My-Link to your own values.

      Reply
  6. June

    Hi There,
    Thanks for the plugin, Ive been looking for a responsive gallery and this has been great.
    I have also installed jQuery Colorbox however the default captions (titles) and not showing like how you have it on the Basic example, there is not enough room for the title. Can you please advise how the captions work?

    Thanks,
    June

    Reply
  7. Jamie

    Is there some way to add a ‘view/hit’ counter for each image? Would be interested in a paid for pro version with such a feature.

    Reply
    1. Jules Post author

      Great idea, I will look into an extended pro version, with all sorts of options like this, after the free version is completely bug-free.

      Reply
  8. Jack Berberette

    This is an AMAZING plugin…absolutely wonderful!!!

    A quick question… Is there a way to display the caption below the image instead of it being shown on hover? I have 15 product categories and would love to use this but ned to display the category names as well as images when the vistors browse our site.

    Thanks,

    Jack

    Reply
    1. Jules Post author

      Thanks for sharing. I saw this or a similar plugin before I started working on RGG. I don’t like the masonry way of it though. The images seem too scattered with this plugin because the heights vary. I wanted to create a plugin with horizontal rows, because I believe it’s easier on the eye. These types of galleries also look very ugly once you have reached the bottom of the gallery. Plus I think it’s sad nobody turned this into a free plugin yet, because it’s basically just as easy as loading the masonry library, and calling a single function on the gallery.

      Reply
  9. LB

    Hi and thanks for this interesting plugin!

    I’m testing it on my live site, but am unable to get Fancybox to detect the class from inside the gallery tag. Check a live example here .. Any ideas on how to make it work?

    I also tried the jQuery Colorbox that you recommend, however activating it on my site seems to disable the mouse-over animations of your plugin. Seeing that you have the combination working here, I guess it has to do with my theme?

    Reply
    1. Jules Post author

      I’m working on a better way to integrate RGG with lightbox plugins for the moment. Seems like I was doing some stuff in an unconventional way. Hope you can bear with me a bit, and keep an eye out for updates. I promise to update my code and have a Lightbox-howto article somewhere with the explanation of how to hook up your favorite lightbox plugins with RGG.

      Reply
  10. nikki

    I love this plugin. I love your site. I love your wit. I love that your logo reminds me of mondrian. I would gladly pay for whatever premium version of this plugin that you develop. This, free, is more useful than a $25 plugin that I bought.

    Reply
  11. Bloompix

    Hi!!

    That’s a really powerful plugin. Congrats!!

    However, when using it in my site (with Customizr template), I get all images same size (although I selected image-size=full), with really slow zoom-out animations (although modifying intime and outtime parameters) and with huge margins between images (instead of having them all tied, as in your “simple” example).

    Any idea of why is that happening?! Any suggestion would be ultra-appreaciated!!

    Reply
    1. Jules Post author

      Your website went down while I was testing, so I couldn’t exactly figure out what went wrong. Anyway, it seems like your theme or another plugin is modifying the gallery in a very aggressive way, without giving any other plugin the chance to hook into it. If you could e-mail me a WordPress login, I could investigate a bit further.

      Reply
          1. Bloompix

            Hey Jules,

            Thanks for all your effort!! It’s really admirable your will to help. However, what I have now, is that I can see the grid on Mozilla (in Safari it disappears). But when I have my mouse over the pictures (on Mozilla), they don’t get zoomed. Any idea why is this happening?

            Again million thanks for your support!

  12. Bloompix

    Hi again!

    I just wanted to make you know that I got to make the zooming effect work. The only thing I had to do was to deactivate the plugin “jQuery Colorbox”, apparently it was interfering with your plugin. Although it’s strange, this is how I made it work!!!

    Hope this may be useful for other users of your plugin that are experiencing the same problem:)

    Reply
  13. Ana

    Jules, hi.
    Love your plug in ! Worls super awesome.
    One issue— images are opening in a the same window, but not nice– they just opening as an image on the white background. Not like on your demo just get bigger on the same window with a blured – black like backgroun.
    Any idea how i can fix that?

    Thanks, Ana

    Reply
    1. Jules Post author

      please read the FAQ or the demo page. I don’t know where else I should mention this so people see it :) any suggestions where you would look for this kind of information?
      FYI: I’m talking about the part about the Lightbox. That’s another word for “the blurred black background with the image on top in the same window”.

      Reply
  14. Bloompix

    Hi Jules,

    Still not able to make your plugin work on Safari or Chrome: images show up when loading the page, and then they just disappear (iSurprisingly everything works fine in FIrefox). Any idea why is this happening?

    Million thanks for your support,

    Reply
  15. Adam

    Hi,

    Love the Responsive Grid plugin but jQuery Colorbox is very mobile unfriendly. Photos pop up with their original size which mess up everything on iPhone. It`s difficult to close after that because I have to get to the corner (x) to close. Not easy task, as image always return to previous position when I try to move.
    Besides, how did you make thumnails so big on this site? I have very very minimini on mine even though I indicated “medium”

    Reply
    1. Adam

      Having the exact same issue with jQuery Colorbox. Not mobile friendly at all.

      Also my name is Adam as well (maybe that has something to do with it) :/

      Reply
      1. Adam

        Actually I’m an idiot. After you set the max height/width of the images, you have to check “Resize images”. THEN it’ll be mobile friendly. Works great now with this plugin! WOOHOO!

        Thanks for making this, Jules! Much appreciated!

        Reply
  16. Zak

    Jules –

    This is a dumb question, but how do I install this into a WordPress blog post? I want this on my landing page to display my portfolio.

    Zak

    Reply
  17. Zak

    Is there a way to make the images in the gallery link to another URL? (Im using this as a web portfolio and need to user to click the images when they pop-out, to take them to the web pages that correspond with the images.

    Reply
  18. Hannah

    Hi

    I love the plugin! it works great, however i was wondering how you change the title of each image when theyre enlarged? At the moment they just say eg 1 of 300 images.

    Thanks

    Reply
  19. Robbert

    Hello,

    I’m trying to use your pluginn, but he doesn’t work. I have made a gallery and activate your pluggin. But there is noting happend yet.
    step 1. make a gallery and put that on a page.
    step 2. i activate your pluggin

    I’m use wordpress 3.7.1.

    thanks for your answer,

    Robbert

    Reply
    1. Jules Post author

      Probably your theme has it’s own built in gallery code. Nothing much I can do about this I’m afraid. I don’t want my plugin to go and hijack other plugins or theme’s code if they are not configured to be over-writable.

      Reply
  20. Chris

    Hello,

    I am trying to add a gallery to a homepage text widget but it looks like the shortcode isn’t activating. Does the gallery work in widgets? I have it on a separate page so I know it works there.

    Thanks,
    Chris

    Reply
    1. Jules Post author

      shortcodes aren’t supported in widgets by default. You can add this line to your functions.php file if you would like the shortcode to work in text widgets:

      add_filter('widget_text', 'do_shortcode');

      Reply
  21. Kimberly

    This plugin actually fixes problems with layouts and lightboxes in native WP galleries. I have now used this on two sites that had layout and lightbox issues that I could not resolve, and this fixed both issues nicely. (Using Suffusion theme/framework.) Also plays well with another media grid premium plugin.

    Thank you so much!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>