1. Installing the Ultimate Gallery module
These are the steps to follow in order to setup the List layout:
- 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
Navigate to - The link that will open in the fancybox. Here we can have:
- Youtube video
- Vimeo video
- Metacafe
- Dailymotion
- Twitvid
- Twitpic
- 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.
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.
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.
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:
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:
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:
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:
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, ...)
