complete pack
English Chinese (Simplified) Czech French German Greek Italian Spanish

Sj Ultimate Gallery

1 1 1 1 1 1 1 1 1 1 Rating 4.80 (185 Votes)

ultimate gallery productpicUltimate Gallery - ultimate possibilities:


Photo Gallery

Want a stylish customised photo gallery? Just set up your photos inside the Item Setup backend, set your looks and there you have it!

You can take your photos from Local ftp, Facebook, Flickr, Google and display them in 3 different layouts: Thumbs, Grid and List! 

Video Gallery
Get your videos from Youtube, Vimeo, Metacafe and any other external website that has a video player on it!
Set up your layout - Thumbs, Grid or List, customise it and it is done! A slick video gallery with pop up for your website!

Article Gallery
Need a cool display for your articles? Ultimate gallery can show your articles with a neat masonry layout! Start building yourself the ultimate magazine website by adding the image, the title and the content of the article very easy due to the backend Item Setup. Set the style and done, just that easy!

Google maps embed
Need to display several locations from Google Maps on your website? Ultimate Gallery can display multiple Google maps, wrapped in a proffesional and modern design. Customise the looks and done!

Websites display
Are you a website designer and need to make a cool portofolio with your work? Just install the Ultimate Gallery and present all your portofolio websites with it. The gallery can be set to read whole external websites and displays them in a pop up window for easy access!

You can use this gallery for both small websites with fewer information and for very large websites that require a lot more info to be displayed.

The last thing? Ultimate Gallery is adaptive, so it works just great on any mobile device!

Price: 38.00 USD

Thumbs Layout Demo

Mix Display Demo

This demo contains youtube and vimeo videos, facebook and flickr images, external and internal web pages, google maps and random images all in the same module.

Photos Demo

The Ultimate Gallery used as a photo gallery.

Videos Demo

The Ultimate Gallery used as a video gallery.

Websites and Google Maps Demo

The Ultimate Gallery used for various websites display with google maps localization.

Features

Fully customizable layout with the following options:

  • Vertical/Horizontal space
  • Item background color
  • Thumbnail width
  • Caption background color and transparency
  • Display caption option
  • Image darkness option
  • Image fade duration
  • Multiple options for the description appearance
  • Customizable item borders

How to use Thumbs

1. Installing the Ultimate Gallery module

Q

 - 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

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 linkhttp://extensionspot.net/spot-extensions-products/sj-video-player 
Enhanced link: http://extensionspot.net/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 ( http://extensionspot.net/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 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


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

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

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

Screenshots

The backend options for Ultimate Gallery Thumbs display are the following:

1

2

3

4

Support

emailsupport1Product support

When buying this extension, you will also receive 6 months of free support for any functionallity issues regarding your product. 

The support provided does not include any module customization or setup, additional options or features. 

If you encounter any functionallity issue regarding your recently bought extension, please send us a message using the contact form from the right section of this page and we will be happy to help you.

 

services-web-designExtra services

We are a bunch of developers and web designers that are providing professional website solutions, both coding and graphics.

Our services include:

- Website developement: design from scratch, content management system, structure and content

- Joomla extensions

- Graphic design for both web and print: logo, stationery, illustrations

Order our services

If you need any of our extra services, do not hesitate to get in contact with us. The prices will be discussed depending on your requirements.

 

Grid Layout Demo

Mix Display Demo

This demo contains youtube and vimeo videos, facebook and flickr images, external and internal web pages, google maps and random images all in the same module.

Photos Demo

The Ultimate Gallery used as a photo gallery.

Videos Demo

The Ultimate Gallery used as a video gallery.

Websites and Google Maps Demo

The Ultimate Gallery used for various websites display with google maps localization. You can use just websites or just google maps too.

Features

Fully customizable layout with the following options:

  • Vertical/Horizontal space
  • Item background color
  • Grid item width and height
  • Grid image height
  • Grid caption background
  • Image scaling
  • Multiple options for the description appearance
  • Customizable item borders

How to use Grid

1. Installing the Ultimate Gallery module

Q

 - 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

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 linkhttp://extensionspot.net/spot-extensions-products/sj-video-player 
Enhanced link: http://extensionspot.net/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 ( http://extensionspot.net/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 Grid Layout

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

These are the general settings for your module:

 1


Layout: select how to display the module; select Grid

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

2

Grid item width: sets the width of the whole item, including both the image and the description.

Grid item height: this is the item's height (image plus description).

Grid image height: sets the height jut for the image inside the item.

Grid caption background: this is the background color underneath the caption.

Thumb scaling: you can choose between Stretch and Center.

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

3

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

Screenshots

These screenshots are from the Ultimate Gallery's Grid backend:

1

2

3

4

Support

emailsupport1Product support

When buying this extension, you will also receive 6 months of free support for any functionallity issues regarding your product. 

The support provided does not include any module customization or setup, additional options or features. 

If you encounter any functionallity issue regarding your recently bought extension, please send us a message using the contact form from the right section of this page and we will be happy to help you.

services-web-designExtra services

We are a bunch of developers and web designers that are providing professional website solutions, both coding and graphics.

Our services include:

- Website developement: design from scratch, content management system, structure and content

- Joomla extensions

- Graphic design for both web and print: logo, stationery, illustrations

Order our services

If you need any of our extra services, do not hesitate to get in contact with us. The prices will be discussed depending on your requirements.

 

List Layout Demo

Mix List Demo

This demo contains youtube and vimeo videos, facebook and flickr images, external and internal web pages, google maps and random images all in the same module.

Photos Demo

The Ultimate Gallery used as a photo gallery.

Videos Demo

The Ultimate Gallery used as a video gallery.

Websites and Google maps Demo

The Ultimate Gallery used for various websites display with google maps localization. You can use just websites or just google maps too.

Features

Fully customizable layout with the following options:

  • Vertical/Horizontal space
  • Item background color
  • List thumbnail width and height
  • List column width
  • Image align
  • Multiple options for the description appearance
  • Customizable item borders

How to use List

1. Installing the Ultimate Gallery module

Q

 - 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

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 linkhttp://extensionspot.net/spot-extensions-products/sj-video-player 
Enhanced link: http://extensionspot.net/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 ( http://extensionspot.net/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
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

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

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

Screenshots

1

2

3

4

Support

emailsupport1Product support

When buying this extension, you will also receive 6 months of free support for any functionallity issues regarding your product. 

The support provided does not include any module customization or setup, additional options or features. 

If you encounter any functionallity issue regarding your recently bought extension, please send us a message using the contact form from the right section of this page and we will be happy to help you.

services-web-designExtra services

We are a bunch of developers and web designers that are providing professional website solutions, both coding and graphics.

Our services include:

- Website developement: design from scratch, content management system, structure and content

- Joomla extensions

- Graphic design for both web and print: logo, stationery, illustrations

Order our services

If you need any of our extra services, do not hesitate to get in contact with us. The prices will be discussed depending on your requirements.

 

Pin It

Comments   

0 #14 Radu Adrian 2017-02-11 06:59
The earliest versions have not been tested anymore with Joomla 2.5.
Quote
0 #13 Rick Hess 2017-02-08 20:38
Does Ultimate Gallery work well with Joomla 2.5?
Quote
+1 #12 Radu Adrian 2017-01-06 17:36
New version released today 06 Jan 2017. Lots of goodies in the new version. Happy new year!
Quote
+1 #11 Radu Adrian 2016-11-08 17:49
Released a new update today 08 Nov, that will solve that mobile issue
Quote
0 #10 Mag 2016-11-07 10:30
Is there a way to deactivate "mouse-over" or ":hover" on touch devices?

Now we need to tab twice on the thumbnail to see image.
Quote
+8 #9 Radu Adrian 2016-09-27 18:42
I supose you mean it does not open, it looks like an jquery loading issue, please be sure that under Advanced tab you have the proper jquery loading method, accordingly to your website.
If you have set that properly please send me an e-mail so i can further investigate.
Quote
+1 #8 VĂ­tor Gil 2016-09-06 09:18
lightbox doesn't work!
Quote
0 #7 Radu Adrian 2016-07-11 19:33
Please check under the General Setup tab, look for the "Order" option. There are several ways to sort the items.
Quote
+1 #6 Paul 2016-07-11 16:56
The extension works great but is there a way to change the order of the items in a gallery? The Add Item always places the new item at the end and I need to add one at the beginning or middle.
Quote
+2 #5 Anat 2016-07-04 14:47
Hello! I use the module as a "webpage", but the webpage is opened to fill the screen, not as in Example (pop-up). How to fix it?
Quote

Add comment


Security code
Refresh