Responsive Photo Gallery for Images

Responsive Photo Gallery for Images is a simple, stunning, powerful, responsive jQuery photo gallery to display images from a folder.

The module pulls images from a folder and creates a visually-striking, highly customizable and responsive photo gallery with thumbnail navigation. It supports native-like swipe movements and uses hardware optimized animations for ultra-smooth image browsing on mobile and touch devices.

To install Responsive Photo Gallery for Images

  1. Login to Joomla administrator control panel.
  2. Go to 'Extensions' > 'Manage' > 'Install'.
  3. Click on 'Upload Package File'.
  4. Browse the zip file of the extension.
  5. Go to 'Extensions' > 'Modules' and search for 'Responsive Photo Gallery for Images'. Open the module.
  6. Under the tab 'Module' select a position for the module and set the 'Status' to Published
  7. Under the tab 'Menu Assignment' assign the module to the menu items where you want it to display.

Data source


Images folder: Relative path to the folder where the images will be retrieved from.

Items count: The number of images to display. The default value of 0 will display all images.

Ordering: Select the field that images will be ordered by. To order by Date, Category or author you must include an XML index file.

Ordering direction: Ascending or descending.

Dimensions


Gallery width: Gallery full width (in pixels).

Minimum width: Gallery minimum width for responsive layouts (in pixels).

Gallery dimensions ratio: Width to height ratio.

Images margin: Horizontal margin for images (in pixels).

Images glimpse: Glimpse size of nearby images (in pixels).

Photos fit: Select how the images will fit the gallery.

Background color: Gallery background color.

Crop images: If enabled, the module will crop the images to the specified dimensions. If disabled, the original images will be used and they will be resized to fit the gallery. Aspect ratio of original images will be preserved.

Fallback image path: An absolute url of the image to be displayed if there is no image for items declared in the XML index file.

Item settings


Show title: Select whether to show the image title.

Title limit: Word limit for title.

Show introtext: Select whether to show the image introtext (XML index required).

Show date: Select whether to show the image date (XML index required).

Date format: See instructions on http://php.net/manual/en/function.date.php.

Show category: Select whether to show the image category (XML index required).

Show author: Select whether to show the image author (XML index required).


Navigation type: Select type of navigation.

Navigation position: Select navigation position.

Thumb width: Navigation images will be cropped to this width.

Thumb height: Navigation images will be cropped to this height.

Thumbnails margin: Navigation images margin (in pixels).

Active thumbnail border width: Border width for active navigation thumbnail (in pixels).

Effects settings


Allow full screen: Shows icon that displays the gallery in full screen.

Transition type: Defines the transition effect.

Transition duration: Transition speed (in milliseconds).

Loop photos: Repeats items from the start when the last item is reached.

Slide direction: Select gallery direction.

Autoplay: Enable or disable autoplay.

Autoplay speed: Transition speed for the autoplay (in milliseconds).

Stop autoplay on touch: Stops autoplay at any user action.

Keyboard navigation: Enables keyboard navigation.

Arrows navigation: Enables arrows navigation.

Click navigation: Enables moving between images by clicking.

Swipe navigation: Enables moving between images by swiping.

Trackpad support: Enables trackpad and horizontal mouse wheel support.

Display shadows: Enables shadows.

By including an XML index file in the images folder, you can add extra data to images and display this data in the gallery.

How to create an XML index

Navigate to the images folder and create a new xml file:

index.xml

Use the following xml template to add extra data to each image:



<images>
  <image>
    <path>A-nonstop-action-ride-begins-on-a-high-point.jpg</path>
  	<link>https://www.minitek.gr</link>
    <title>A nonstop action ride begins on a high point</title>
    <introtext><![CDATA[<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>]]></introtext>
    <created>2017-08-05 15:59:43</created>
    <category>Action</category>
    <author>John</author>
  </image>
  <image>
    <path>An-action-game-that-you-shouldnt-miss.jpg</path>
  	<link>https://www.minitek.gr</link>
    <title>An action game that you shouldn't miss</title>
    <introtext><![CDATA[<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>]]></introtext>
    <created>2017-08-06 15:59:43</created>
    <category>Exploration</category>
    <author>John</author>
  </image>
  ...
  ...
  ...
</images>
            

where,

path = the image name (required).

link = the image link (optional).

title = the image title (optional).

introtext = the image introtext (optional).

created = the image date (optional).

category = the image category (optional).

author = the image author (optional).

If you include an XML index in your folder, then the module will retrieve only the images that are referenced in the XML file. Images that are not included in the XML file will not be displayed.
View Changelog

This website uses cookies so that we can provide you with the best user experience. By clicking "continue" you agree to cookies being used in accordance with our Cookies Policy.

Search