Introduction

What is JUX Portfolio?

JUX Portfolio is an exceptional component to present your Gallery or Portfolio. It uses the power of jQuery to display your pictures in a grid layout with a masonry effect. The detail lightbox shows image or video and gives your viewers the chance to use the usual social buttons and read a describing text. It can display with custom width or 100% width responsive. It even supports tablet and smartphone like iPhone, iPad, Android devices...

JUX Portfolio surpasses traditional content displaying – instead of displaying items in defined frame design, JUX Portfolio displays thumbnails on grid and does not require you to use same-size images. You can freely express your creativity to arrange your thumbnails on grid layout of JUX Portfolio.

Just take a look at our demo site and witness the beauty of JUX Portfolio.

JUX Portfolio Features

Creative style in user interface
Responsive Responsive 100% Width Or Flexed Size
Compatible with Tablet, Smart phone
Youtube & Vimeo video Support
Lightbox With Social Sharing
Using CSS Animation with FallBack to jQuery
Runs on modern browsers (including IE7 /8)
iPhone & Android Swipe Touch enabled
Mouse Wheel support
Display items with custom width or 100% width responsive
Allow linking item with external links
Category filter
Unlimited item
Pagination
4 different Thumbnail types
Support multiple languages
Flexible configuration in component and menu parameters

Screenshots

Frontend:

Template Default

Items Layout
Item Detail
Category filter

Template Dark

Items Layout
Item Detail
Category filter

Backend:

Control Panel
Configuration
Items Management
Edit Item

Installation Guide

Requirement

Server Requirements

JUX Portfolio has the following System Requirements:

Apache 2.0 or above - http://www.apache.orgrecommended: 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! 2.5 - http://www.joomla.org recommended: Joomla! 2.5

You must ensure that you have MySQL-, 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

JUX Portfolio can be used with most major browsers including: Internet Explorer (version 7+), Firefox, Chrome, Opera 9+ and Safari. Java Script should be enabled.

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

Download

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

http://joomlaux.com/products/jux-portfolio.html

If there is any problem, please contact us at: contact@joomlaux.com

Installation & Upgrade

Preparing

Extract the downloaded package to your computer.
Choose exact version that matches with your Joomla version (currently, we only have version for Joomla2.5).

Install component

Go to your administrator site
Select “Extensions” => “Extension Manager” in the Top Menu
In "Upload Package File" block, please Upload &Install our extensions:
- component/com_jux_portfolio1.0.0 j2.5.zip: JUX Portfolio core component. This is required.

Language Installation

JUX Portfolio’s Interface can be switched to various Languages. From the start, JUX Portfolio only comes with English language files. To make your JUX Portfolio run in the language of your choice you need to follow these steps:

Download & Install new Joomla! Language Files

To be able to use other languages, you must first find the right language File for Joomla!.

Joomla! Language Files can be downloaded from the Translation Packs for Joomla! 2.5 [http://community.joomla.org/translations/joomla-16-translations.html].

Translate the JUX Portfolio Language Files

After installing your language, let say it is xx-YY, you need to create the JUX Portfolio Language file to your language by:

Copy this file:

{site root}/language/en-GB/en-GB.com_jux_portfolio.ini

to

''{site root}/language/xx-YY/xx-YY.com_jux_portfolio.ini

Then translate it to your language.

Note: sometimes you need to change encoding type of language file to "UTF8 without Bom" (you can use notepad++ to change encoding type of the file).

If you want to change backend language, do the same with language in "administrator" folder.

Switch the global Language

For Joomla! 2.5: go to "Extensions" => "Languages Manager", select the language of your choice and make it "Default" by clicking that icon in the toolbar.

JUX Portfolio should now pick up the correct language from its own language folder.

User Guide

After installing JUX Portfolio component, please set value in Configuration before you could actually let it operation. The correct steps would be:

Configuration: setting default value general template, permission…
Operation: you can create category, item.

Those steps will be explained in more detail on remaining parts of this chapter.

Configuration

The Configuration Panel is the most important part of JUX Portfolio. You can access Configuration Panel by clicking on link “Option” in all views of component.

Note that the Configuration Panel can be accessed by Users with Permissions "admin" only (by default).

Configuration - General

General

Frontend Template	Choosing template for JUX Portfolio component. We provide two templates: Default and Dark. And, you could create your own template using our [ Customization Guide].
jQuery library handling	Select a jQuery version for your site.
#Items Numbers	Number of items display on a page.
Title	Show/Hide item’s title on popup item details.
Background Image	Use category image for background.
Google+ Link	Show/Hide the Google+ link when viewing item details.
Facebook Link	Show/Hide the Facebook link when viewing item details.
Twitter Link	Show/Hide the Twitter link when viewing item details.
Ordering	Choose how to order item. By Title Alphabetical; Title Reserve Alphabetical, Older First, Most Recent First or Item Manager Order (this is Default).
Cell Width	The width of one CELL in px (1 CELL of image is an image thumbnail with aspect ratio 1x1).
Cell Height	The height of one CELL in px.
Cell Padding	Spaces between CELLs in px.

Permission

JUX Portfolio 2 is fully integrated with Joomla! 2.5 permission. You could setup permission via Configuration-Permission section.

Configuration - Permission

In this component we created permissions. Admin can configure these permissions to a user or group of user.

Management at Backend

Manage Categories

Categories manage all category created by admin.

The Categories Management Panel can be accessed via “JUX Portfolio Control Panel” => “Categories”

Categories Management

On the Categories Manager Panel, we setup all popular functions such as: Publish, Unpublished, Ordering…

You could add new or edit category via Edit Category Page.

Edit Category

When creating a category: please add title, alias, access, status, ordering, language, description, created by, created date and upload an image for that category (Created by, Created date & Alias will automatically set default value if you do not add value)
Background Image: This image will show as a background image of the category when viewing items in front-end.

Items Management.

Items corresponding to each category will be displayed in gallery. Administrator can manage items in Items Manager Panel.
The Items Manager Panel can be accessed via “JUX Portfolio Control Panel” => “Items”.

Items Management

You can create a new item or edit item’s information with view Edit Item:

New Item

When creating new item, beside basic information such as Title, Status, Category, URL, Access, Language, and Description… you should pay attention to Media Information.

Media Information:

Image Ratio	Aspect ratio of thumbnail image when displaying in grid. There are 4 ratios for you to choose: 2x1, 1x2, 1x1 & 2x2. Among them, 1x1 is size of a basic CELL in [ Configuration].
Media Type	The type of item. You could use Image or Video.
Large Image	When you chose the media type is “Image” a text box for “Large Image” will show to let you select an image for your item. It is the main image for the portfolio item when you view details information. This is a required field and you have to select an image for this item.
Video URL	When you chose the media type is “Video” a text box for “Video URL” will show (Currently we support for “Youtube” and “Vimeo” videos only). It is not a video URL from the browser address bar. It is an URL for embedded video. So please use the URL format bellow to insert a video for your portfolio item to make it work correctly. For Youtube video, the link should be like this http://www.youtube.com/embed/BrDlrytgm8?hd=1&wmode=opaque&autohide=1&showinfo=0 For Vimeo video, the link should be like this http://player.vimeo.com/video/7809605?title=0&byline=0&portrait=0
Thumbnail Image	The thumbnail image will display in the main portfolio page.
Thumbnail BW Image	A Black & White Thumbnail image. When you focus on an item, it will show the “Thumbnail Image” and other items will be like “disabled” with a Black & White image.

How to render the video URL for your portfolio item?

To add a Video URL for your portfolio item, please follow my instruction. Please note that, if you miss something, the video cannot be displayed correctly or does not work.

For a Youtube video, you have to use a video URL format like this:

http://www.youtube.com/embed/EcOgjrRWx_Q?hd=1&wmode=opaque&autohide=1&showinfo=0

For a Vimeo video, you have to use a video URL format like this:

http://player.vimeo.com/video/27243869?title=0&byline=0&portrait=0

The text highlighted is the video code, so you only need to get this code from your Youtube or Vimeo video.

To get the video code from Youtube video, please follow this step:

Get the video code in the browser address bar (the “Blue highlight” text) then use this link to put it in your “Video URL” input box.

http://www.youtube.com/embed/bJh8pJZ-tIY?hd=1&wmode=opaque&autohide=1&showinfo=0

To get the video code from Vimeo video, please follow this step:

Get the video code in the browser address bar (the “Blue highlight” text) then use this link to put it in your “Video URL” input box.

http://player.vimeo.com/video/46435177?title=0&byline=0&portrait=0

Use Case at Frontend

Currently component JUX Portfolio supports 2 templates: Default and Dark. You can select and see their beautiful effects.

In the next part, we will successively introduce Grid Gallery, each Item in Grid and popup for Item detail.

For grid Gallery

This is displayed interface of Portfolio component. It allows items to display by different ratios of each CELL. At present we provide you with these ratios: 1x1, 1x2, 2x1, and 2x2 corresponding to each item whose ratio is set when you created item (Size of each CELL is set in [ Configuration] in backend). You can fully express your creativity with our new displaying interface – getting rid of the old-styled interface with straight-aligned line and column layout. This new interface brings you a fresh unique style of showing images on a website.

Number of images will be arranged to display responsively with website’s width and the display order will be set relatively in configuration.
Users can use Category Filter to view all items or items by category.
With each category, it will display the list of item in that category with the background which is category’s image uploaded (you can choose Show/Hide Category Background in [ Configuration]).

For each Item in Grid

Item Details: when click on item detail, it will show a popup with detail information of that item.
URL Extern: this tool is used to link to external link of each item. This link is set in each item.
Video Link: if item is a video, it will display link to that video.
Entry info: Title of item.

For popup Item Detail

Display all information of 1 item.

Item Total: number of total item displayed.
Item’s order: item’s number in display order.
Large Image: Image of item. If item is a video, video will be displayed in this position.
Title of Item: title of item.
Description: description of item.
Besides, there is link to social network: Google+, Facebook, and Twitter.

Customization Guide

In this chapter, we will show you how to create a template for JUX Portfolio component.

Multiple Templates system

This component as well as all the components from JoomlaUX has multiple templates system. It means that you could create unique and differential templates and switch between them anytime you want.

So, how to create a new template, it’s very simple:

Go folder “components/com_jux_portfolio/templates/”. You could see that there’s a folder named “default”, this is our default template.
Duplicate folder “default” and give new folder a name call “your_template”. Make sure that all files in folder “default” are copied to folder “your_template”.
Now you can go to “JUX Portfolio Control Panel” => “Configuration” => “General”. You can see in Template block, there’re “default” and “your_template” in Default template dropdown list. If you choose “your_template” our component will use “your_template” to display.

Now, you’ve already created a new template. And the best past is you could modify it in any way you like. If anything went wrong, you could always switch back to our default template.

Please see our next part to know how to create template as you want correctly and effectively.

Modify JUX Portfolio template

Note before you do anything

First, please remember that you need to know about HTML & CSS before doing anything. If you don’t know, we highly recommend that you read two tutorials:

Second, please keep in mind that you must only modify “your_template”, don’t change anything in our default template.

Customize template

Tools

We highly recommend that you should use Firebug (plug-in for Firefox). It’s very useful tool. When you browse a webpage, you could right click on any element (image, button, link…), choose “Inspect Element with Firebug”. You will see all the HTML & CSS resources, the CSS values that affect this element and where you could find those values too. Moreover, you could modify CSS values right on the browser to see how your page will be changed before actually editing it on CSS file.

How to customize correctly

We have template files and resources files. Template files have structure and resources files including style and images. You could modify resources file: edit CSS values, change image files as you want. Template files should be used only for reference about element information such as: name, type and CSS class.

Resources file

All our CSS files and images are stored in folder your_template/assets.

jux_portfolio.css

lightbox-full.css

settings-full.css

style-full.css

Common CSS file, the CSS for component JUX Portfolio.

Template files

All the templates files used for displaying at frontend are stored in folder your_template. The source codes in those files are a little bit complex; because they include PHP code. But you should easily spot the html structure there.

items.php

Template for Items Page.

JUX Porfolio

Contents