Help is on the way!

Browse our Documentation, Search the Knowledge Base, Still need help? Send us a support ticket.

JoomlaXTC Grid Gallery

The Grid Gallery is an easy-to-use component to create image and video galleries of your portfolio or cool pictures in an attractive and engaging way. Some of its features are:

  • Works with local or remote media
  • Unlimited albums with independent configuration
  • Unlimited media files per album
  • Unlimited albums per gallery
  • HTML support on description fields
  • Power to show .mp4, .mov, .fla and another flash-supported codec videos
  • Automatic thumbnail resizing
  • YouTube video support
  • Display gallery as a component or module
  • Module supports embedded, pop-up, automatic pop-up and lightbox modes
  • Gallery size customizable
  • Can have multiple galleries on at the same time
  • Flash-based gallery with three display modes: Grid, Mosaic and Carousel
  • Auto-resizing grid
  • Advanced video player
  • Pan and Zoom
Installation

Follow these steps to install the Grid Gallery:

  1. Unzip the jxtc_gridgallery_j15_unzipfirst.zip package in your PC.
  2. Install the extracted files to your Joomla install via the Joomla Installer. The com_jxtc_gridgallery_j15.zip file contains the required frontend and backend components interfaces and mod_jxtc_gridgallery_j15.zip file contains the optional Grid Gallery display module.
Component Configuration

Access the component administration pages by selecting "JXTC Grid Gallery" from the Joomla! Components menu.

In order to show the Grid Gallery in your site you must first create an Album, an album could represent a collection of images, videos that you want to display to your visitors. You can have an unlimited amount of Albums defined. For your convenience, a folder named "GridGallery" has been created in your media/ folder at installation time. You can choose to store all your media files on it. Also, it will contain the thumbnails created automatically when adding albums and media items.

Creating and Configuring Albums

Select the Albums menu option; this will take you to a list of all albums defined in your system. To create a new album, click on the "New" icon in the top right.

The album edition page will display the area where you can define the attributes of the album:

Album Setup

The parameters in this section are:

Title
A unique name for the album
Thumbnail
Select the image that will be show as thumbnail of your Album (an automatic thumbnail will be created from it)
Area Width
The width area (in pixels) of the thumbnail area including title and description, the recommended value is 140 pixels
Area Height
The height area (in pixels) of the thumbnail area including title and description, the recommended value is 140 pixels
Order
Set the position of the album in relation to other albums
Published
Use this parameter to set an album as active or inactivate
Creating and Configuring Media Items

Once an album is created, you can proceed to add media items to it.

Select the Media menu option; this will take you to a list of all Media items defined in your system. To create a new media item, click on the "New" icon in the top right.

The media edition page will display the area where you can define the attributes of the media item:

Media Setup

The parameters in this section are:

Title
Select thumbnail
Select the image that will be show as thumbnail for your Media Item (an automatic thumbnail will be created from it).
Select media
For remote files, type the url to the video/image to use, for local media click on the Select button to use the included file browser to select or upload files to your server. Note: For YouTube videos, you must to type the url in this form: https://www.youtube.com/v/ID where ID is the value after the v= in the original URL, for example, to add this video: https://www.youtube.com/watch?v=Cywm889e0Vs you must type this url: https://www.youtube.com/v/Cywm889e0Vs
Description
Add the description of the video/image that you want to show. You can use any Flash-supported HTML tags.
Album Name
Select the album to contain this media item.
Order
Sett the position of the media item in the album.
Published
Use this parameter to set an item as active or inactivate.
Component on Front end

After albums and media items are added, you can enable your site's frontend for component display.

Creating a Grid Gallery menu option

To make a menu option link to Grid Gallery component, you should use the standard Joomla! Menu Manager to edit the desired menu, and then follow these steps:

  1. Click on the "New" icon in the top left to create a new menu entry.
  2. On the menu entry settings page, edit the fields on the left "Menu Item Details" area according to your preference.
  3. On the right side, open the "Parameters (basic)" tab and select which Albums to display:
    Albums
    If ALL ALBUMS is chosen, all Albums will be shown from top to bottom according to their ordering. You can choose multiple albums by holding the CTRL key while clicking on them.
    Main Album
    Select the album that will be shown first in the gallery. This album must be included in the selected albums in the previous parameter.
    Grid Width
    Set the width of the gallery display (in pixels).
    Grid Height
    Set the height of the gallery (in pixels).
    Default mode
    This is the starting display mode for the gallery; you can later change modes while browsing the gallery itself.
  4. If needed, open the "Parameters (System)" tab and edit the fields as you wish.
  5. Click on the "Save" or "Apply" icons on the top left to store your changes.

You have now created a menu link that will display the Grid Gallery view.

Module Configuration

Sometimes we want to display the grid gallery in another page with more and/or bigger content or as a complement for content, in this case we can use the module version of the Grid Gallery.

The module can be positioned and customized using the standard Joomla! Module Manager.

Module parametersTo access these parameters go to the module manager and select the Grid Gallery Module:

Albums
If ALL ALBUMS is chosen, all Albums will be shown from top to bottom according to their ordering. You can choose multiple albums by holding the CTRL key while clicking on them.
Main Album
Select the album that will be shown first in the gallery. This album must be included in the selected albums in the previous parameter.
Grid Width
Set the width of the gallery display (in pixels).
Grid Height
Set the height of the gallery (in pixels).
Default mode
This is the starting display mode for the gallery; you can later change modes while browsing the gallery itself.
Display Type
Use to select the display mode of the module, select between Lightbox, pop-up, automatic pop-up and standard module embedding.
Link Button
For pop-up and lightbox modes, you can choose to display an image as a button to open the windows. Store your images in the media/GridGallery/ folder and select one here.

You can now see the Grid Gallery in a module position.

Tips to use the Grid Gallery

There are some considerations while using the Grid Gallery, please take note of the following:

  • The Grid Gallery works best when there is plenty of space in the frontend.
  • Optimize the use of real-estate in the frontend by changing the Grid dimensions, the thumbnail area dimensions and the length of titles and descriptions.
  • For restricted spaces, a pop-up window will allow you to have a larger area for the gallery.
  • Remote files might be subject to Flash 10 security restrictions, read about Flash "crossdomain.xml" files to enable your site to read external files.
  • Although some video files do have the "right" file extension, their actual binary format might not be accepted by Flash for playback.

Copyright 2010 Monev Software LLC www.joomlaxtc.com

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.




SUBMIT SUPPORT TICKET

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.




SUBMIT SUPPORT TICKET