Responsive Photo Gallery

  • Responsive Photo Gallery

    ResponsivePhotoGalleryv3.0.0 Joomla 3.x NEWEST RELEASE!

    Responsive Photo Gallery for Joomla 2.5 & 3.x. Create stunning eye catching photo galleries in a simple and easy 'responsive' way. Responsive Photo Gallery will self adjust to whatever browser or screen size your viewing from. When viewing from a smartphone or a touch pad, you'll love it's finger swipe navigation ability on both the carousel and the main photo. There are only a few module options to set because the power is in the code! Responsive Photo Gallery uses the power of the jQuery Library Script* (version 1.7.x or newer), a few supporting jQuery scripts and some basic code as its backbone.

    Responsive Photo Gallery has been tested to be compatible with IE8+, Firefox, Chrome, Safari, Smartphone and Touch Pad browsers.

    PLEASE NOTE: The Flickr render feed currently does not function when using a 'localhost' client like XAMP, WAMPP, MAMP, etc. Move it to your website host server and all will be good.

    Please be advised that on or before April 2, 2018, Google will be closing down their Google+ social network for 'consumer' accounts. If you have a Google+ account you should have already received an email with this announcement. With this, Responsive Photo Gallery will be upgraded on or before April 2, 2018 removing the Google+ option within it's module settings.

    Change log:

    UPGRADE:  v3.0.0 (for Joomla 3.x only) Added Alt Tag data option to Joomla Folder Plus & Joomla Picture Gallery settings. When populated, Alt Tags provide better SEO rankings and is complient with Americans with Disabilities Act (ADA).

    v2.9.9 (for Joomla 3.x only) Updated Firefox CSS code to be compatible with recent upgrades.

    v2.9.8 (for Joomla 3.x only) Added new theme called, Frameless. Now you can show RPG without any frames around the main image and thumbnail container. Also added an option to show or hide the the play/pause icons.

    v2.9.7 (for Joomla 3.x only) Added option to override some abrasive template frameworks. If your thumbnails are 'stacked' on the far left side, set the new option 'Activate template override' to Yes.

    v2.9.6 (for Joomla 3.x only) Fixed issue with Flickr photo descriptions when used.

    v2.9.5 (for Joomla 3.x only) Fixed issue with some 'all caps' file extensions not showing in Joomla Folder Plus.

    v2.9.4 (for Joomla 3.x only) Patched this release to fix a small bug. If you are using this release, please re-download/install. Thanks @DrummerCafe and sorry!

    v2.9.4 (for Joomla 3.x only) Fix CSS issues with newer versions of the Firefox browser.

    v2.9.3 (for Joomla 3.x only) Fix the thumbnail ratio sizing issue for Joomla Folder Plus & Joomla Picture Gallery options.

    v2.9.2 (for Joomla 3.x only) Bug fixes in the Flickr, Picasa & Picture Gallery options. Please upgrade... SORRY!

    v2.9.1 (for Joomla 3.x only) Now you can create a CUSTOM STYLE for Responsive Photo Gallery or continue to choose either the Dark or Light pre-set styles. Choose to display thumbnails above or below your main photo container totally independent of one another or choose not to display the thumbnails at all.
    PLEASE NOTE: If you are upgrading from an older Joomla 3.x version, some of your existing settings will have to be re-assigned manually. With this release the old Joomla folder feature has been replaced with Joomla Folder Plus introduced in v2.9.0. This is one setting you will need to re-assign if you are currently using the old Joomla Folder to get your photos from.

    v2.9.0 (for Joomla 3.x only) added a new module option called Joomla Folder Plus. This option will allow you to pull your photos from a Joomla images folder and gives you the ability to add a custom title & description for each photo. In addition you can re-edit a photos title & description, delete the photo, set a custom thumbnail height/width pixel ratio and SORT any and all of your photos via 'drag & drop'.

    v2.8.2 to the newest Flickr API requirements.

    v2.8.1 to fix a script conflict with the Fancybox lightbox feature. If you use another extension that uses the Fancybox lightbox effect, you will want to upgrade to this version.

    v2.8.0 added a custom 'Build your Own' gallery that supports up to 30 photos. Also added the ability to render photos from Picasa Albums (Google+). Version 2.8.0 is a major upgrade release... please upgrade!

    v2.7.0 added Fancybox2 lightbox effect for the main photo. Added a max-width/max-height main photo feature. All new and greatly improved 'Auto Play' code. Added a 'Play' & 'Pause' icon when using the 'Auto Play' feature. Version 2.7.0 is a major upgrade release... please upgrade!

    Bug Fix: v2.6.2 Fixed a minor issue when show titles are set to 'No' in some templates. Please upgrade to this latest release just to be safe!

    v2.6.0 added an 'auto photo scroller' and 'timer' along with a 'show/hide' Joomla & Flickr photo titles option. Fixed the Joomla 'folder selector' when installed on a localserve using Joomla 3.x. Recommend upgrade



    RPG - FAQs

    • RPG Requirements

      RPG Requirements

      Install this module using the native Joomla installation and adjust the module options to your needs. Select a module position, assign to your menus and publish. This module is driven by the jQuery Library script (version 1.7.x or newer) and demands that the script be loaded to function. I have provided a Load jQuery option (default set to 'No') that you may or may not need to set based on your Joomla site's configuration or installed extensions.

      SUPPORTED BROWSERS: IE8* +, Firefox, Safari, Chrome, Smartphones and Touch Pad browsers.

      * IE8 is not a responsive supported browser. However, Responsive Photo Gallery will work within any Joomla 2.5.x installation within the guidelines mentioned above.

    • RPG Instructions

      Before diving into using this module, there are a few basic 'Pre-Launch' instructions you'll need to do. If your going to use the 'Render Photos from a Joomla folder' feature, create a new folder inside your Joomla's 'images' directory and FTP upload your photos into this newly created folder. You can also upload your photos using the native Joomla 'Media Manager' one photo at a time. Go to your Responsive Photo Gallery module and adjust the options to your needs within the 'General Settings' and 'Render Photos from a Joomla folder' tabs. If your going to pull your photos from a Flickr Photoset, adjust the module options within the 'General Settings' and 'Render Photos from a Flickr Photoset' tabs. Once completed select what module position you want to use, publish, select what menus you wish to associate Responsive Photo Gallery to, save and... DONE!

      General Settings for Joomla 3.x version:
      Render Photos from: Choose to pull your photos from Joomla Folder Plus, Flickr Photoset, Picasa or Custom Picture Gallery via 30 URLs.
      Display thumbnails: Select 'Yes/No'. Default setting is 'Yes'.
      Thumbnail position: Select 'Above/Below' main image container. Default setting is 'Above'
      Theme: Use this drop-down to select either a Dark, Light or Custom (built your own) theme.
      Top Margin: This was added to fix an issue when using RPG with the Joomla 'loadposition' tag. Increasing this pixel value will push RPG downward.
      Theme: Use this drop-down to select either a Dark, Light or Custom (built your own) theme.
      Lightbox effect: Select 'Yes/No'. Default setting is 'Yes'.
      Load Lightbox script?: Select 'Yes/No' to load the Fancybox lightbox script. Set to 'No' if you are using another Fancybox extension on the same page as Responsive Photo Gallery.
      Auto Play Gallery?: Select 'Yes/No' to auto scroll through your photos.
      Auto Play Speed: Set the scroll delay in milliseconds if Auto Play Gallery is set to 'Yes'.
      Main image max height: (Default is 100%) Set a fixed pixel or percentage value to limit the max-height your photos will be. This setting is very helpful if your gallery has both landscape or portrait photos.
      Main image max width: (Default is 100%) Set a fixed pixel or percentage value to limit the max-width your photos will be. This setting is very helpful if your gallery has both landscape or portrait photos.

      Render Photos from the Joomla Folder Plus options:
      Resize images? Default is set to 'Active' and can not be changed.
      Thumbnail height/width ratio: Default is 48px. Can be set to any size but remember... they are thumbnails so don't get too carried away with the size settings!
      Image path folder: From this drop-down you can select the Joomla images folder for your gallery.
      Photo Edit Icon: Click onto the edit icon and add or edit your photo's Title, Alt Tag & Description.
      Photo Delete Icon: Click onto this delete icon to remove any unwanted photos within this Joomla folder.
      SORTING via 'Drag & Drop': To custom sort your photo, mouse over a photo and click and hold down your mouse button. Drag this photo to it's new location and release your mouse button. Once completed with all editing, please don't forget to SAVE your new module settings.
      Housekeeping: When you add photo titles and save, the titles will show below each photo within this module option. I call this 'housekeeping' because sometimes you just want to sort your photos by a given title and not your server sorting by filename.

      Render Photos from a Flickr Photoset options:
      Flickr API: Enter in your own personal Flickr API here.
      Use Flickr Cache: Select 'Yes' or 'No' (*)
      Flickr Photoset ID#: Enter your 17 digit Flickr Photoset ID# here.
      Flickr Thumbnail Size: Select what size Flickr thumbnail you wish to show in the carousel.
      Main Photo Caption: Select from the drop-down what information you would like to show under your main photo. Choices: Flickr Title Only, Flickr Description Only, Title - Description and None.

      (*) Pulling photos from a Flickr Photoset takes time. Using the Flickr Cache feature will dramatically speed-up the page load time after viewing your gallery once. I have the 'cache time-out' set very high within the code. The cache name will auto-generate based on the module name you assign RPG.

      Render Photos from the 'Joomla Picture Gallery' options:
      With this new feature you will be able to 'Custom Build' a gallery for up to 30 photos. Each photo has it's own set of options that will allow you to totally customize your gallery. Select a photo to show from Joomla's Media Manager, type in a title or any text (supports basic HTML tags) your Alt Tag and set the size of your thumbnails (optional. Default setting is 64px).

      Render Photos from Google+:
      Enter your Google+ User Name/Number
      Enter the Google+ Album Number you wish to display
      Enter the Google+ Album Title (optional)
      Select the Main Photo Size to show in the RPG's main display and lightbox
      Select how your thumbnails will show (Full or Cropped)
      Choose what photo information you wish to display (data is stored with each photo on Google+)
      Extra global data is optional and will display whatever you type with every photo you render. Great way to add a copyright statement!
      NOTE: If you want to show pictures from your Google Photo account, read my step-by-step BLOG.


    • RPG Flickr Private Photosets

      Obtaining and setting-up a Flickr API to view a Private Flickr Photoset:

      1) Apply for a Flickr API & Secret Code (

      2) Once approved, click onto The App Garden link (bottom of Flickr page) and select, Apps By You (right hand side of page under the Your Apps heading).

      3) Here you will see all of the Flickr API's that are currently active within your Flickr account. Find the API you just registered and copy KEY (Flickr API) and SECRET (Flickr Secret Code) data showing for that API listing. You will want to paste this data into the Responsive Photo Gallery module options within the 'Render Photos from a Flickr Photoset' tab.

      4) Now, click onto this approved API link title. On the right hand side under the heading of Admin, click onto 'Edit'. In the 'Callback URL' box paste this URL ( and SAVE CHANGES.

      5) At this point you are ready to obtain your 'Flickr Token Code'. In your internet browser go to this URL ( and enter in your apps API and Secret data. Select the ENTER or SUBMIT button and you will be taken to the Flickr login screen. Log in with your Flickr creditionals and Flickr will produce a white screen with the following information;

      This is the code you should use to generate your phpFlickr instance:
      $f = new phpFlickr('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 'xxxxxxxxxxxxxxxx');
      This code will log your website in as the Flickr user 'XXXXXXX' with 'read' permissions

      I have replace the actual data above with 'xxxxx'. Now, copy the setToken data (do not copy the ' ' symbols). and paste this data into the Responsive Photo Gallery's 'Flickr Token Code' and SAVE your module settings.

      6) Finally, we need to set your Flickr Photoset permissions. Get to 'Your Photostream' in your Flickr account and locate the Photoset you wish to change the permissions and click onto the 'edit set' link. You will see all of the photos within the Photoset and some menu options at the top. Click onto the 'Batch edit' menu drop-down and select the 'Change permissions' option. A popup box will show where you can adjust the global permission options of this Photoset. Click onto the 'Only You (Private) radio button and then the CHANGE PERMISSIONS button. Flickr will apply these settings and when finished click onto the THANKS! button.

      At this point your done! If everything went as planned, you will be able to display your private Photoset within Responsive Photo Gallery on your Joomla website. If anything went wrong during this process, Responsive Photo Gallery will throw out an error when you attenpt to view your gallery.

      PLEASE UNDERSTAND... I added this option to Responsive Photo Gallery because a user requested it and the Flickr code being using for Responsive Photo Gallery supports this feature. However, I strongly recommend that if you do not have a Flickr PRO account or your not 100% sure how all this applys or works for you, STAY AWAY from this feature! This feature works and has been tested over and over again. I have ironed-out all of the naggy little bugs that surfaced when writting this code to obtain all of this required data. I will support Responsive Photo Gallery when pulling photos from a Joomla folder and a Flickr public Photoset. But... I need to draw a line in the sand where support ends and doing your own homework begins!

    • RPG FAQs

      Coming soon... 

    • RPG Tips, Tricks and other Cool Stuff!

      Responsive Photo Gallery supports many of the most common photo/image extensions (.jpg, .jpeg, .png, .bmp, .gif, vnd.wap.wbmp and .xbm).

      Responsive Photo Gallery auto generates all of the Carousel thumbnails and places them into a newly created sub-folder called 'thumbs'.

      When pulling photos from the Joomla Folder Plus feature, Responsive Photo Gallery gets the title & description text you want under the main photo directly from this feature. Each photo you see from the assigned folder has an 'edit' icon where you can add your photo's title & brief description. The option fields within the 'edit' window do not support basic HTML tags. TIP: You can continue to add new photos into an existing folder you are using at anytime. You will need to refresh your browser for these added photos to be seen. Please make sure you SAVE the module after adding new photos or adjusting any setting option. I strongly do not suggest using the cache function (Advanced Options) within the module options unless you are sure you are not going to add additional photos into a specific folder.

      When pulling photos from a Flickr Photoset, Responsive Photo Gallery gets the title & description text you see under the main photo directly from Flickr. You can choose one of three options from the drop-down. If you plan on using Flickr to render your Photoset photos, I strongly recommend that you populate both the 'photo title' and 'description' fields within your Photoset. This will give you full access to display whatever caption you choose from the drop-down options. In addition, it is strongly suggested you use the Flickr Cache option!

      If you plan on using Responsive Photo Gallery in your content pages (using the native Joomla 'loadposition' tag), there is a known issue with some templates and content arrangements. With v2.2.0 I added a module option called 'Top Margin' that you can populate using a pixel value. Entering a pixel value here will 'push down' the Responsive Photo Gallery container. This option may or may not be needed again based on your specific template or content arrangement. A quick work-around to resolve this issue is to add either additional <br /> or <p> </p> data above your loadposition tag using your text editor's source or HTML code option.

      Another problem specific to loadposition may cause Responsive Photo Gallery to fill your entire monotor and beyond. This issue is more of a template problem then extension issue but there is a solution (thanks to Lucinde). Use the following string of code as part of your loadposition tag;

      <div style="width: XXXpx; margin-bottom: xxpx;"></div>

      The width value will be the actual width size of your content area. The margin value will put a little 'white space' between the bottom of RPG and any data you have below it. As with any workaround there is an upside and downside. The upside is RPG will now sit in your content area based on the width value you give it. The downside is with portable devices and responsive templates! Since you have pre-selected a specific width value, some portable devises may have issues with this and not render your page as it should. You'll have to test these pros & cons based on your specific needs & wants!

    • RPG Credits

      All supporting code within Responsive Photo Gallery is released under; License GNU General Public License version 2 or later
      Responsive Photo Gallery is based on Mary Lou's Responsive Image Gallery over at Codrops.
      Code assistance to work with PHP v5.4.8 by Rob W.
      Code to create the Joomla Folder Plus option was in part provided by NooTheme and modified by GraphicAholic for RPG.

      SUPPORTED BROWSERS: IE8+, Firefox, Safari, Chrome, Smartphone and Touch Pad browsers.

  • Responsive Photo Gallery - Dark Styling

  • Responsive Photo Gallery - Light Styling

    Flickr Photoset (
    Default Light styling
    Flickr cache = 'Yes'
    Thumbnail position = 'Below"
    Main image max height = '500px'

  • Using Google Photos within Responsive Photo Gallery and GalleryAholic

    1. Upload photos to your Google Photo account. Once completed go to your Google+ account.
    2. Click onto the ‘What’s new to you?’ box.
    3. Type in a gallery title in the pop-up ‘What’s new to you?’ and click onto the camera icon.
    4. Pick & choose what Google Photos you wish to add into this gallery and click onto ‘DONE’.
    5. Click the ‘POST’ button. This will post this gallery onto your Google+ timeline.
    6. Now, once you see this post on your timeline, click onto any of that galleries photo. This will display that selected photo on your screen. Up in your browser address bar will be the URL containing your Google+ Username/Number (right after photos/) and the Google+ Album Number (right after albums/).


    Yellow=Google+ User Name/Number
    Turquoise=Album Number

    It’s a fairly simple process and one that I’ll support in Responsive Photo Gallery & GalleryAholic. Why? Because the process of obtaining a Google Photo API and the many settings you need to go through to get your authorize key/secret key code is far more complicated than the above workaround.