JUX Portfolio Pro

Created: 08/17/2016

Lastest update: 08/17/2016

By: Joomlaux

Need Support

General introduction

What JUX Portfolio Pro ?

Do you want to show products with a perfect filter, that can filter by Category or Tag? Or want to display a diverse range of products with the type style, hover.
In order to meet the demand for a great looking portfolio component, that is easy to use but fully featured, we have created JUX Portfolio_Pro.quản


JUX Portfolio_Pro about component and module
What do you get from the component and module of JUX Portfolio_Pro?
1. Component:
  • In each item, you can select style such as layout, image size, media, gallery, tag …
  • When you use a menu item, you can choose a display style that is either Item Detail (shows an item in detail) or List Item (shows list an items by listing)
  • Each Menu item also has many other configurations such as display option, hover option…
  • We have also integrated more ways to configure the component in the Global Configuration
2. Module
  • The module takes its source from the Component and can be fully configured to help you show products with the styles that you want.
  • Although you have lots of configuration options, it is easy to use, fully functional for source, filler, search, layout, column on the device, as well as the effect while hovering over an image.
  • You can also easy style the module with a Custom CSS field in the advanced tab.
3. Key features
  • A creative, clear style in user interface
  • 100% Responsive
  • Compatible with tablets and smart phones
  • Flexible options for displays on different devices
  • Support image and video of Youtube, Vimeo
  • Filter by Category or Tag
  • Have unlimited items
  • Support 7 the style layout for each item detail
  • Support 3 the style layout for your profolio
  • Easily select desired column number that will be shown.
  • With Hover dir effect, everything moves so smoothly!
  • Support Custom CSS
  • Support multiple languages
  • Support all major web browers: IE10+, Firefox, Safari, Chrome, Opera …

Frontend

Shows list item via Menu item
Some config basic,that you can see via image : Use classic layout,filter via category, 6 item for frist page, select 3 column, shows text layout, has padding, ...

 

Show list item via module
Some config basic, that you can see via image: Use masony layout, hided text layout,...

 

Use packery layout

 

The effect when hover item

 

The Lightbox when you click icon on each item

 

One in seven layout for item detail. You can refer them via our demo

 

Backend

1. Some step basic when displays list item via menu item

Go to component, where create categories, items and Tags

 

Go to Menu item, where choose list item or item detail

 

Some configure after had choosed style for menu item

 

This is module,all configure will description in the next part

 

Server Requirement

JUX Portfolio Pro has several system requirements as follow:

  • Apache 2.0 or above - http://www.apache.org recommended: Apache 2.0 or above.
  • PHP 5.2.4 or above - http://www.php.net recommended: PHP 5.3 or above.
  • MySQL 5.0.4 or above - http://www.mysql.com recommended: MySQL 5.0.4 or above.
  • Joomla! 3.x. Please go to - http://www.joomla.org  download Joomla! 3.x.
  • You have to ensure that your system has already installed, XML and Zlib-Support built into your PHP.
  • PHP should be compiled with support for https (openSSL) and cURL.
  • PHP Safe Mode should be turned off.

Client Requirements

This module can run well on major browsers such as: Internet Explorer (version 10+), Firefox, Chrome, Opera 9+, and Safari. JavaScript must be activated.

The client/browser needs to be capable of accepting Cookies and Cookies must be enabled.

Download

After purchasing our product, you’ll see the download link at JUX Portfolio Pro product page:

http://www.joomlaux.com/download.html

Note: If there is any problem, please contact us at: http://www.joomlaux.com/support/contact-us.html

Package

Package

pkg_jux_portfolio_pro

 

Module Installation

Go to Administrator site => “Extension” => “Extension Manager” in the Top Menu.

In “Upload Package File” block, please Upload & Install our extensions:

Configuring General

As you have already read, JUX Portfolio_Pro has two core components: a Component and Module. Here are some important steps that you need when using our product:

  • Step 1: Please install the package JUX Portfolio_Pro on your site.
  • Step 2: After installation, go to the components JUX Portfolio Pro and create your categories

    •  

    Create category

    This is Categories manager

     

  • Step 3: Create tags for items.

    • Create Tags

    This is Tags manager

     

  • Step 4: You now create Items in your categories. Fill in the configuration as shown.

    • Details
    • Title: Please enter the title for each item
    • Category:select one in your categories that created
    • Media Type: Choose Image or Video.
    • Style layout: Select one of the following layouts: Vertical-Gallery, Vertical-Slider, Gallery-slide, Gallery half-width, Gallery-full-width, Full-width slider, Video layout.
    • Image Preview: Select an image
    • Video ID: video ID field just displays when you choose video for Media type field.
      Video ID example: https://www.youtube.com/watch?v=iczdtVWaSHE, Please take ID: iczdtVWaSHE
    • Image Size: Select the size that will fit your layout (NOTE: This field only works for packery layout)
    • Description: Please enter description for item, which will display in detail page
    • Tags: Please Select or enter news tag (NOTE: Please end an name tags by a seal ":"" ","" or "/". Example: TagsA: or TagsA, or TagsA/ ), you can filter items by them


    => Please click Gallery Tabs

    Gallery
    You can add more/remove image for Gallery.
    One in seven style for Gallery



    => Please click Extra Field Tabs

    Extra Field
    You can add your link on Item detail page.

    => Please click Pulishing Options Tabs

    Pulishing Options
    Select the Created Date for Item

    The link and the date will display on each item detail page as below:

    This is items manager

How to use component via menu item

Now, you can use either the component via a Menu item or a Module to show products on your site. Are you ready?

  • Step 1: Create new menu item and enter title, select menu item type (Item detail or list item) in details tab

    •  

  • Step 2: When you have created the menu item, you will have some more tabs in the menu item where you can configure options such as Source, filter, … in Display Option tab, Hover Option tab …
    • 1. If you choose List Item Type

    Please Configuring “Option list item” tab

    Where you can choose to display: Their products from any source, the order, how many products will be displayed. Or you can display the filter, to allow users to easily find products.
    All of the above can be configured in the Option List Item Tab, allowing you to take control and manage in the backend.

    Option List Item
    • Source :Choose the source by category or ID of Item
    • From category:Select category that you want to show on your site
    • From ID: Select the ID of Item that you want to show on your site
    • Display Item: Number of items that will be shown before pagination
    • Order By: The order of items when display. You can order by ID, Title or Random…
    • Show Filter: Select the position for the product filter that display on your site such as: left, right or center position.
    • Filter By: You can filter item by Category or Tags
    • Select category: Select category name that displays on the filter
    • Select Tags: Select Tags name that displays on the filter
    • Show Search: Show/Hide the search that can allow users to search for an Item
Please Configuring “Display Option” tab

You can select one in three layout different or the number of items that can be shown on some screen such as desktop, tablets, smart-phones

Display Option
  • Style layout: Select the layout for the items
    a. Masonry layout: The size of image set by actual image
    b. Classic layout: All image has size same
    c. Packery layout: The size of image will get from each item that you set for them
  • Style for Class: Only display for classic layout. we set 3 style for classic layout: landscape,squared and Portrait
  • Show padding: Show/Hide padding for the Item
  • Padding Item: Please enter amount padding in pixels (NOTE: This field shows when select “Show Padding”).
  • Show Text Layout: Show/hide the text layout.
  • Position Text layout: Choose position for textlayout
  • Show Pagination: show/hide the pagination.
  • Column Desktop: Select the number of columns that show on desktop computers.
  • Column tablet: Select number of columns that show on tablets.
  • Column Mobile: Select number of columns that show on smartphones.
Please Configuring “Hover Option” tab

Your product will look beautiful with this effect. When the user hovers over it, it shows the Item and the product detail in a lightbox.

Hover Option
  • Hover Dir Effect: On/Off hover dir effect for layout column.
  • Overlay style: Choose the option you want. It will show only icon or icon with title …

  • Style Show Lightbox: Select the style for the lightbox such as Fade, slideUp, slideLefft …
  • Target: Choose target type for link.
    _self: Load in the same frame as it was clicked,
    _blank: Load in a new window.

 

Please go to Global Configuration
You can use the configure for lis item in here.

Frontend

2. If you choose Item Detail

If you choose Item Detail for menu item type, you can then select the Item that you want to show on your site

Details
  • Select item: Please select item that you want to show on your site.
Please go to Global Configuration

Items Details
  • Style Layout: Select one in seven layout for this item: Vertical Gallery, Gallery halt Width, Gallery full Width, Slider Image, Vertical Slider, Full-Width Slider, Video Layout.
  • Style Show Lightbox:
  • Hover Dir Effect

    • If you select style layout: Gallery Slider, Vertical Slider or Full Width Slider. You can setup some configure below:

  • Auto Play Slider: On/Off AutoPlay Slider
  • Stop On Hover: The slider will stop when hover
  • Right To Left: The slider will run from right to left or vice versa
  • Loop: On/Off Loop for slider (NOTE: This field only works for Gallery slider style)
  • Height Large Image: Can enter number PX ( example: 300)or "auto" for the height.
  • Height Small Image: Can enter number PX ( example: 100)or "auto" for the height.
  • Thumbnail Images: Please select image number on small slider

    • If you select style layout:Vertical Gallery, Gallery Half Width or Gallery Full Width. You can setup some configure below:

  • Padding Item: Please enter number pixcel for the padding. example: 15
  • Height Image Vertical Gallery: Can enter number PX( example:100) or "auto" for the height.( NOTE: only works for Vertical Gallery style)
  • Height Image Gallery Half Width: Can enter number PX( example:250) or "auto" for the height.( NOTE: only works for Gallery Half Width style)
  • Height Image Gallery Full Width: Can enter number PX( example:250) or "auto" for the height.( NOTE: only works for Gallery Full Width style)

Related Project

  • Related Project: Show/Hide Related Project in item detail
  • Style Image: Can Select one in three style that displays image on slider: Squared, Landscape and Portrait.
  • Number Items : Select number items which shows on one slider
  • Hover Style: Select one in three hover style for Related Project
  • Overlay Style: Select style for Overlay
  • Auto Play Slider: On/Off AutoplaySlider
  • Stop On Hover:The slider will stop when hover
  • Right To Left: The slider will move from right to left or vice versa
  • Loop: On/Off Loop for slider

Advanced
You can also easy style with a Custom CSS field in the advanced tab. Or enable jQuery for component when your site still doesn't it yet.

This is one page that displays an item detail

Use video in item detail

How to use component via module

Make sure you select a module position that is in your template, then assign and publish the portfolio_pro module.

Step 1: Configuring Module

 

Module
  • Source: Choose the source by category or ID of Item
  • From category:Select category that you want to show on your site
  • From ID: Select the ID of Item that you want to show on your site
  • Display Item: Number of items that will shows for first load
  • Show Load More: Show/Hide Loadmore button
  • Load More Item: Can enter number item that will load when click loadmore button
  • Order By: The order of items when display. You can order by ID, Title or Random…
  • Show Filter: Select the position for the product filter that display on your site such as: left, right or center position.
  • Filter By: You can filter item by Category or Tags
  • Select category: Select category name that displays on the filter
  • Select Tags: Select Tags name that displays on the filter
  • Show Search: Show/Hide the search that can allow users to search for an Item

 

Display Options
  • Style layout: Select the layout for the items
    a. Masonry layout: The size of image set by actual image
    b. Classic layout: All image has size same
    c. Packery layout: The size of image will get from each item that you set for them
  • Style for Class: Only display for classic layout. we set 3 style for classic layout: landscape, squared and Portrait
  • Show padding: Show/Hide padding for the Item
  • Padding Item: Please enter amount padding in pixels (NOTE: This field shows when select “Show Padding”).
  • Show Text Layout: Show/Hide the text layout.
  • Position Text layout: Choose position for textlayout
  • Column Desktop: Select the number of columns that show on desktop computers.
  • Column tablet: Select number of columns that show on tablets.
  • Column Mobile: Select number of columns that show on smartphones.

 

Hover Options
  • Hover Dir Effect: On/Off hover dir effect for layout column.
  • Overlay style: Choose the option you want. It will show only icon or icon with title …

  • Style Show Lightbox: Select the style for the lightbox such as Fade, slideUp, slideLefft …
  • Target: Choose target type for link.
    _self: Load in the same frame as it was clicked,
    _blank: Load in a new window.
Some style with Portfolio Pro module

How to use Packery layout

This is Packery layout

    Guide Created Packery layout that look like Images above
  • Step 1: When you created an item in Portfolio Pro, Please select style for image size.

  • Step 2:
    a. If you are using component via Menu items(with List Item Type)
    Please select Packery layout as image below:

    b. If you are using component via Module
    Please select Packery layout as image below: