Responsive Photo Gallery

  • Responsive Photo Gallery

    ResponsivePhotoGalleryv2.8.2 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.

    UPGRADE: v2.8.2 to the newest Flickr API requirements.

    UPGRADE: 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.

    UPGRADE: 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!

    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!

    UPGRADE: 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

    * With Joomla 3.x there is no longer a need to worry about loading jQuery... It's built into the framework!

    DOWNLOAD:   Joomla2.5 Badge   Joomla3 Badge Note: If upgrading, please refresh the module's 'admin' screen for upgrade changes to take effect.

    • 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

      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:
      • Load jQuery? By default I have this option set to No. If you do not have another application calling up the jQuery Library, change this setting to Yes.
      • Render Photos from: Choose to pull your photos from a Joomla folder of from a Flickr Photoset.
      • Gallery Number: If you are going to have two or more galleries on a single page, you MUST assign each one with a unique Gallery Number (Ranges 1 to 50).
      • Theme: Use this drop-down to select either a dark or light 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.
      • Carousel Position: Select to have your Carousel thumbnails above or below your main photo. Please note: If you are going to have two or more galleries on a single page, all must use the same Carousel Position.
      • 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'.


      • Render Photos from a Joomla folder options:
        Photo directory: Use this drop-down to select the folder where your photos are kept.
        Show titles: Display photo titles, 'Yes/No'
        Thumbnail Width: Set the width of your carousel thumbnails in pixels.
        Thumbnail Height: Set the height of your carousel thumbnails in pixels.
        Keep thumbnail ratio: If you select No (default), all thumbnails will be the same size based on the width/height settings above. If you select Yes, your thumbnails will automatically adjust to the size and orientation of your original photo (based on the width/height settings above).

      • Render Photos from a Flickr Photoset options:
      • Flickr API: Enter in your own personal Flickr API here.
      • 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.

       


      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) and set the size of your thumbnails (optional). DONE!

      Render Photos from a Picasa Photo Album:
      Enter your Picasa User Name/Number
      Enter the Photo Album Number you wish to display
      Enter the Picasa 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 Picasa 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!
      DONE!

      Basic Rules:
      In order for Responsive Photo Gallery to function, the latest jQuery Library (v1.7.x) MUST be loaded between the <head> tag of your Joomla site.

      If you are going to use two or more Responsive Photo Galleries on a single page, you MUST assign each with a unique 'Gallery Number' (Ranges 1 to 50 are valid).

      If you are going to use two or more Responsive Photo Galleries on a single page, they all MUST use the same 'Carousel Position' (Above or Below).

    • 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 (http://www.flickr.com/services/apps/create/apply/).

      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 (http://phpflickr.com/tools/auth/auth.php) and SAVE CHANGES.

      5) At this point you are ready to obtain your 'Flickr Token Code'. In your internet browser go to this URL (http://phpflickr.com/tools/auth/auth.php) 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');
      $f->setToken('xxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxx');
      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 a Joomla folder, Responsive Photo Gallery gets the description text you see under the main photo directly from that photo's filename (minus the extension). You'll want to rename your photo's filenames to match-up with each photo. This can be done either before uploading your photos or after. TIP: You can continue to add new photos into an existing folder you are using at anytime. You will need to refresh your browser on the website side for these added photos to be seen. 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 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.

      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

      Responsive Photo Gallery is based on Mary Lou's Responsive Image Gallery over at Codrops.
      Code to generate the thumbnails for the Carousel was in part provided by Bit Repository.
      Code assistance to work with PHP v5.4.8 by Rob W.
      Code to gather the Joomla image folders was in part provided by JoomlaBamboo.

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

       

  • Responsive Photo Gallery - Dark Styling

  • Responsive Photo Gallery - Light Styling

Back to top