Photospace Responsive

03.06.13Made on the Gold Coast 83 Responses

A simplified version of Photospace featuring a responsive only layout.

Based on the Galleriffic gallery, Photospace takes advantage of the built in gallery features of WordPress. Simply use the WordPress admin to create a gallery and insert it in the page. You may need to adjust the size of the gallery to suit your theme in the settings.

The Photospace gallery plugin allows you to:

  • Upload multiple images at once
  • Easily order images via drag and drop
  • Add a title, caption and description

Via the options panel you can modify:

  • Thumbnail number, size and shape
  • Size of the main image
  • The width of the gallery columns and the size of the main image
  • Create a basic slide show

Some other features include:

  • Keyboard control
  • Pagination
  • Slideshow controls option available
  • Supports multiple galleries on a page or post
  • Supports WordPress multi-site
  • Supports shortcode attributes

Here is a demo

You can view the plugin in a responsive theme here

download the plugin


There is also an admin panel with some options. Look for Photospace Responsive down the bottom on the left. The gallery should work with the default settings.

Loading gifs 

Create your own colour coded loading gifs here ajaxload.info or preloaders.net

Template tag

If you want to hard code this gallery into a page template you can do so with this code.


    <?php echo do_shortcode('[gallery]'); ?>

Conditionally remove header scripts and styles from a page


if(is_page('about')){
    remove_action('wp_enqueue_scripts', 'photospace_responsive_scripts_method');
    remove_action('wp_enqueue_scripts', 'photospace_res_scripts_method_history');
    remove_action('wp_head', 'photospace_responsive_wp_headers');
}

Conditional tag info here codex.wordpress.org/Conditional_Tags
Add just before wp_head() in header.php – Thanks to Dario Zadro

Alternate vertical thumbnail column in wide view. Add this to your theme css.


.photospace_res .gal_content {
  float: left;
  width: 75%;
}

.photospace_res .thumbs_wrap2 {
  float: left;
  width: 25%;
}

@media screen and (max-width: 750px) {
  
  .photospace_res .gal_content {
    float: none;
    width: 100%;
  }

  .photospace_res .thumbs_wrap2 {
    float: none;
    width: 100%;
  }
}

Shortcode attributes

You can set the following attributes you control your gallery per instance:

  • id - Set the post to read the attached images from
  • num_thumb - Set the Number of thumbnails on each page
  • num_preload - Set the number of images to be preloaded
  • show_captions
  • show_controls
  • auto_play - Start slideshow automatically
  • delay - Between each slide in milliseconds
  • hide_thumbs
  • horizontal_thumb
  • include – Only includes a new list, comma separated attachment IDs (include=”24,30,43″)
  • exclude – Comma separated attachment IDs (exclude=”24,30,43″)

Like so

[gallery horizontal_thumb=1 num_thumb=7]

Help! The gallery doesn’t load the large image?

This is usually caused by a Javascript conflict. The easiest way to track down the problem is to remove or disable other scripts.

  1. Try to disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).
  2. Switch to the Twenty Eleven theme to rule out any theme-specific problems
  3. Use firebug to find the error. This may help you track down the conflict
  4. [advanced] You may have some scripts embedded in your theme. To disable these look inside the header.php and footer.php

If you find a conflict please mention it in the comments for other users.

83 Comments

  1. Tatsuquito says:

    This is a great plugin. Thanks! The vertical image is extended to the width of the theme I use. That would be better if the width is set to “auto”.

    .photospace_res .slideshow img {
    width: auto;
    height: auto;
    }

  2. Hi Dean,
    Is there a way to also use the standard WP gallery in a site that uses this plugin? Is it possible to override photospace responsive for select galleries?
    Thanks,
    Leslie

  3. It isn’t responding and resizing in my browser or mobile phone. Is it responsive.

  4. Hi guys!

    Looks like a great plugin! However, I was trying to use it, and I don’t see the nice thumbnails on top of the large image, as it’s in the demo. What can be possibly wrong?

    Thank yoU!

  5. Thanks, Dean for response.

    Here’s the link:
    http://au.arabiatechgate.com/gallery-testing/

  6. Is possible to add the lightbox function?

  7. Hi, the images are being insterted as 600px no matter what max-width is specified in the options – is there a way to get images over 600px wide?

  8. great plugin… i really need this… thanks dean… keep it up.

  9. can you please tell us that how to set thumbs at bottom of slider…
    thanks in advancd

    • I don’t think that is a good idea as they would move depending on the image height.

      • actually i have a requirement that thumbs should be at bottom of slider… thats why i am asking… if there is any option, or if we can set from code then tell me please…

        • No option sorry.

          • i have done… from your plugin file… “photospace-responsive.php”
            and i drag the thumbs code and move it after slider code…now its working… :)

            • Hi, could you tell me what part of the code, as in where did you start to where did you finish copying, to make the thumbnails appear at the bottom please? I don’t want to end up messing the coding too much! Thanks.

              • Hi Clare. I’ll try to make this an option soon. It might be a bit tricky but you need to move the div’s

                <div class="thumbs_wrap2"> under <div class="gal_content">

                • Hi Dean, that would be fantastic if you can. I love the gallery, I’ve spent ages trying to find one, and this fits the bill!

                  Also, is it possible to change the way the next page and previous page looks, as it just comes up with white boxes, and I’d like to have arrows if possible, or is it suppose to be arrows and it’s just not appearing for me properly?

  10. Hi Dean,
    Could you look at my web link on mobile/iphone? It seems the slider’s left side is cut off on the left.

  11. Hi, this looks like an awesome plugin, but it does not work with Roots theme (http://www.rootstheme.com/) – would you have any idea why? You can use the following link as an example:

    http://jayseventwo.com/timelineps/harris/

    I have tried the 2012 theme and it appears to work fine.

    Thanks in advance for your help.

    http://wordpress.org/extend/plugins/photospace-responsive/

    PS: have also posted in the plugins support .forum

  12. hi dave, tell me please how to upload multiple galleries…

  13. Hi Dean,

    Beautiful plugin. Is there a way to incorporate the ‘crossfade’ thats incorporated in ‘photospace2′ into ‘photospace responsive?

  14. Is there a way to enable swiping between photos on mobile?

  15. Is the next/previous image not available in photospace responsive?

  16. Once Photospace plug-in installed still no option to set the template to gallery.

  17. Hey Dean, just wanted to say thanks for the plugin! This is an awesome iteration of a classic.

  18. Hi I am working on revising my website and the Photospace Responsive plug-in is a perfect solution for displaying some of my portfolio items! Thank you for your work on this. I am seeing a very odd behavior on IE (not on any other browser) — on IE if you hover over the first thumbnail of the second row (little dog in circle) – it disappears and shifts the row. When the next slide advances, it comes back – but on hover it goes away. I have no idea how to fix this…If you have any suggestions it would be appreciated. You can see using IE at this link: http://mosaikweb.com/client/demo/portfolio/ thank you in advance for any suggestions. thx, Laura

    • Seems to be resolved by unchecking the option for “Try to clear current theme image css / formatting”. Odd…but happy it is working!

  19. Hey, a great plugin. Thanks!
    i try to put a hyperlink into caption (to open image with fancybox) Is it possible to do it ?
    ps: simple link works fine with external target but not to showin image popup , i tried ( responsive lightbox plugin with prettyphoto, swipebox,fancybox and nivo lighbox script)
    any solution to disable photospace script when i click on link image into caption / description section to enable fancybox script ?

  20. plugin is not working for me, below is the post link, could you please check and advise what’s the problem.
    http://swani.in/uncategorized/1060/

  21. Driano Chesque says:

    Hello, I want to add images in the slideshow transition, is possible?
    Similar advertising images on this website:

    http://www.territoriofeminino.net/exibeevento?id=301

  22. Hey Dean,

    I just started using your plug-in for a few galleries I have. I changed the option for the maximum width and height for the images in the admin panel, but they are still showing up with the default values. How do I rebuild the gallery without deleting the images and re-uploading them?

    Michael

  23. Can this be used on PAGES too? Or will it only work on POSTS?

    I got it to work on one of my POSTS, but I can’t get it to work on a PAGE.

    I am NOT trying to use it in a template for a page. I am trying to use it in the content area of a page (how you would normally insert a regular wordpress gallery into the content area of a page). But, no dice.

    NOTE; I am using WP 3.8.1, with Genesis Framework, using the Agency 2 Child theme.

    Thanks in advance.

  24. I have this running well in WP 2013 theme pages, but the Next and Previous images for don’t download, so it’s 2 blank squares. At first I thought the Next was for the next image in the thumbnails, but now I see it goes to the next set of thumbnails, so the buttons are working correctly.

    I can see the link in the css file to arrow-right.svg, but it says it can’t download the file.

    Overall, a very nice plug-in and it has been easy to set up. I hope you can help with the image download.

    Thanks,
    Sue

    • I got some help solving the problem, adding the following code to my child css:

      .photospace_res .thumnail_row a.next {
      background-image: url(‘http://www.your-domain.com/wp/wp-content/plugins/photospace-responsive/arrow-right.png’);
      }

      .photospace_res .thumnail_row a.prev {
      background-image: url(‘http://www.your-domain.com/wp/wp-content/plugins/photospace-responsive/arrow-left.png’);

      the gsv files wouldn’t download, but the png ones do.

      Hope this helps, if anyone else has the same problem.

      Sue
      }

  25. Hi, I would like to put the thumb on the bottom of the image.
    I read the Dean comment but in the
    photospace-responsive.php i dont found the
    line.
    There are any think I can do for that?
    Than you

  26. the line i don t found it s this

  27. Why I can t add the line
    div class=”thumbs_wrap2

  28. Great Plugin, of course.
    But when it is in use with Auto Thickbox ( http://wordpress.org/plugins/auto-thickbox/) it is open up the thumbnails of the gallery in an auto thickbox first and then it opens up the same site in a small window.

    Possiblities to manage this without having this error?
    Greetings Christian

  29. Hi Dean,
    have you got any news for put the miniature below tha picture??

    Thank you

  30. I have gone into the plugin css and centered the caption and made it black (for better contrast).
    But I should like to make the background white and not grey.
    Thoughts?
    Perhaps this is in WP css and not Photospace.

    Thanks for your efforts.

  31. Hi Dean, I’m having a problem with my slideshow images looking slightly blurry can you tell me the best upload settings? Should I resize before uploading?

  32. Hi Dean, thanks for creating such a great free plugin. I think it is the best one after trying more than 20 different plugins. I have a little question, is it possible to add navigation controls to it? (Like ‘Next’, ‘Prev’). Many thanks! :)

    • Hi Mohamed. Not as yet, I’ve tried to keep the controls minimal as there isn’t much room in the responsive mobile view. I may add this as an option in future version.

  33. Hi :) I love this plugin so much! I’ve noticed that two of my main images showing on my page aren’t quite the full width, but others are?

    http://www.ellyhartleydesigns.com/elly-hartley-designs-stationery/

    I’ve tried regenerating thumbnails and haven’t changed the thumbnail dimensions at all so I’m not sure what’s causing this :( please help? Thank you!

Leave a Reply

site5

More from our labs!

pinzolo-t

A free responsive WordPress theme

bannerspace2

A WordPress banner / slideshow plugin

cf7

Pure CSS to Style Contact Form 7

ps2

WordPress gallery plugin