1. Installing the Ultimate Gallery module

These are the steps to follow in order to setup the List layout:

 

Q list

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

W list

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

 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

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 List Layout

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

These are the general settings for your module:

1 list setup

Layout: select how to display the module; select List

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

Background color: select the color underneath each item

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 List setup are the following:

2 1 list setup

List thumbnail Width: sets the width for each item/ thumb

List thumbnail height: sets the height for the item

List column width: this is the width for the whole module, in percentage. If you want the module to have the width of the webpage, the value must be 100%.

Thumb align: sets the alignment of the module (in case that you have a width that is smaller than 100%), you can choose it to be Left or Right.

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

3 1 list setup

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 list setup

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
Refresh

Login Form

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