1. Installing the Ultimate Gallery module

Below are the steps for installing and configuring Ultimate Gallery Joomla module:



- Log in to the Joomla administration back-end.

- Select Extensions -> Install/Uninstall from the top menu.

- In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.

- Click the button Upload & Install.

- Select Extensions -> Module Manager from the top menu and click SJ Ultimate Gallery in the list.

- Open the module and follow the setup.

2. Basic settings for the module

In the Extensions -> Module Manager section, find your SJ Ultimate Gallery module and click on it to acess the module's setup section.

First, from the right side of the page change the Status of the module into Published, put it into the desired Position and, if you want your module to be displayed with a title, select from the right Show at the Show Title section. Last, give your module the title that you want it to be displayed with.

Also, don't forget to set the display for your module on the pages you want it to be shown: Module Assignment section.


3. Setting up the items to be displayed

item setup

Navigate to - The link that will open in the fancybox. Here we can have:

  • Youtube video
  • Vimeo video
  • Metacafe
  • Dailymotion
  • Twitvid
  • Twitpic
  • Instagram
  • Google Maps search results
  • Google Maps Direct link
  • Google Maps Street View
  • Link to practically any image from the web
  • web pages from the site or any other websites on the internet

TIP: if you want to open a page from a Joomla made website add ?tmpl=component at the end of the link will open just the article in question (without menus, sidebars etc. See Local Page thumb from the demo.)

Ex: Normal link: https://extensionspot.com/spot-extensions-products/sj-video-player 
Enhanced link: https://extensionspot.com/spot-extensions-products/sj-video-player?tmpl=component

If you want to make a quick gallery with images from localhost the Select dropdown is here to help. More options will be added here on future updates.

The Select option from here will read the image files located in your Images folder, if you want to use another folder then select Images folder from above. 

select images folder

Data type - The datatype that the link is.

Image - for images (http:// link_to_any_image.jpg/gif/png...)
Video - for videos ( http://www.youtube.com/watch?v=Qjnc0H8utks OR http://vimeo.com/70195709 OR...etc)
Web Page - for webpages ( https://extensionspot.com/spot-extensions-products/sj-video-player)  (?tmpl=component see tip above)
Google Maps - for Google Maps links. 

This require a more indepth explanation: 

The Google Maps option work only with embedded type links. Here is how the link is obtained: 

Step 1: Go to your map of choice 
Step 2: At map settings look for "Share and embed map". Click on that.

share enbed map

Step 3: A window will open where you can see Share Link and Embed Map. Click on Embed Map and a link will be available there. 
Something like this one:

<iframe src="/https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1312.517793002929!2d2.2931506!3d48.8575318!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sEiffel+Tower!5e0!3m2!1sen!2s!4v1416314388637" width="600" height="450" frameborder="0" style="border:0"></iframe>

From this one we extract the src from comma to comma. In our case will be


This is the one we copy/paste in the Navigate to field and use Google Maps option.

Thumbnail URL - Set the thumbnail. In same manner as Navigate to works we can populate the text field with and url for the thumb or we can choose the image from a local folder. By default the folder Images is used but it can be changed from the Select Images option on top.

Title - The title of your description. The titles are h4 tags.

Description - The description. In this field html can be used so we can make text more beautiful. Ex: <b>text</b> for bold. <br> for breaking lines. <p>text</p> for paragraphs , styles, spans, divs, colors etc.

Add /Delete item - the + gliph add another item for you to setup and the - item delete the curent item. The module support a maximum of 498 items.

add delete

4. Setting up the visuals for the Thumbs Layout

For the module to be displayed as Thumbs layout, please use the following options:

These are the general settings for your module:

1 1

Layout: select how to display the module; select Thumbs

Vertical Space / Horizontal Space: set the space between the thumbs

Background color: select the color underneath each item (in thumbs display this color doesn't show)

Order: You can set the ordering for the items - By item setup, Last item is first, By title A - Z, By title Z - A.

The basic options for the Thumbs setup are the following:

2 1

Thumbnail Width: sets the width for each item/ thumb

Caption mouse-over bg: this is the color for the caption background, you can use this with rgba if you want it to be transparent

Display caption: Select if the item should have caption or not.

Image darkness: it is a value between 0(full darkness) and 1(no darkness) for the image displayed in each thumb.

Fade duration: When the Image Darkness option is on, the Fade Duration option allows you to set the duration for the image darkness effect to reveal the image. Must be a value between 0 and 1.

For each item's description the options are listed below:

3 1

Description font size /Title font size: allows you to set the size for the title and description of the thumb. 

Description font weight /Title font weight: you can choose the weight for the font - Normal or Bold. 

Description text color /Title text color: allows you to set a color for both the title and the description.

Description align / Title align: you can choose Left, Center or Right.

Below are the settings for the borders:

4 1

Thumb top / right / bottom / left border: Set the thickness of the border (increase the value for a thicker line).

Border radius: the more higher the no value, rounder the corners of the thumbs will be. For perfect square, let this value 0.

Thumbs border color: set a color for the border of the thumb.

Thumbs border hover: set a color for the border of the thumb when mouse-over.

Border style / Border style hover: you can select the syle for the border, in both normal and mouse-over state. (solid, dotted, dashed, double, ...)

Pin It

Add comment

Security code

Login Form

This website uses cookies to ensure you get the best experience on our website.
More information Ok Decline