An evolution on the traditional weblinks component, this time with the option to display your links in a grid fashion along with custom images, article linking and automatic thumbnails. Give your link collection and attractive view with easy management and our latest media browser. This component does not overwrite your core Weblinks component. Also included with the package is the powerful Weblinks Pro Wall Module.
Choose from categories, images, thumbnails, title, description, and display them with your own HTML/CSS templates limited only by your imagination. Its the perfect tool for developers with custom styles in mind. Along with the custom layout the module can display columns and grids as well as scrolling events for sliders and slideshows! The JoomlaXTC Weblinks Plus Pro package can be used for much more than just weblinks - it's perfect for a web designer showcase too!
Follow these steps to install the component:
- Unzip the jxtc_weblinkspluspro_j15_unzipfirst.zip package in your PC.
Upload all the extracted files to your Joomla install via the Joomla Installer.
com_jxtc_weblinkspluspro_j15 Contains the frontend and backend components interfaces and mod_jxtc_weblinkspluspro_j15 contains the optional Weblinks display module with special effects.
The component shows a list of categories that include web links in the site frontend
Setting Up Global Configuration
- In order to configure each of the web links, we need to do a one-time configuration of Global Parameters by clicking the Parameters Tool button on the top right of the page. These parameters control the overall behavior of the component.
- Fill the following fields on the Global configuration setup screen:
Description Show/Hide the Description below Weblinks Intro This text is shown above the Categories overview. Hits Use this parameter to show or hide the number of hits of a link in the component Link Descriptions This parameter affect if the description of a link is showed or not in the component Other Categories Use this parameter to show links to another categories in the component. Show Thumbnail This parameter controls if the thumbnail will be displayed in the component. Thumbnail Width Thumbnail Width Thumbnail Height Thumbnail Height Image Source Directory Folder to store images Display Mode Select between list or grid Table Headings Show, Hide Rows Number of rows for grid mode Columns Number of columns for grid mode Target Target window when the link is clicked Icon Icon to be used to the left of the URL Links in list view
Setting Up Categories
Web links are grouped together in categories and before adding links to the component you must first need to set up the Categories as follows:
- Open the Web Links Plus Pro component from your Joomla Administration panel and select the Categories admin area.
- Create a links category by clicking on the "New" icon on the top right of the page or if want to edit an existing category click the name of the category:
- Fill the following fields on the Category setup screen:
Title - The title of the categoy
Alias - The alias of the category
Published - Yes or No
Category Order - Order of the category in relation to the other categories
Access Level - The required user access level to see links in this category
Image - An image for the category (select from images stored in your /images folder).
Image Position - The position of the image
Description - A description for the category
- Click the SAVE button on the top right when you are done configuring your categories.
Setting Up Links
Now that you have categories made, you can add links to be shown in the frontend. Add and configure each link by following these steps:
- Setting up the Category Links items. Select the Links page from the Web Link Plus Pro Admin Page.
- Next, Select NEW from the top right button bar or if want to edit an existing web link click the name of the web link:
- Fill the following fields on the Web Link setup screen:
Name - The name of the link
Alias - The alias of the link
Image - The image of the link (if you select one they will be showed in the Web Link Image panel in the right of the parameters)
Related Article - Select to link a weblink to an Article if is needed.
Link Category - The category of the link
URL - URL that will be opened when you clicked the link
Description - The description of the link
Order - The order of the link
Published - Yes or No
- Setting up the module. To show the Web Link Plus Pro in a module position open you Joomla module manager and select the module.
EVENT SELECTION CRITERIA:
Use these parameters to specify what articles to show
|Category ID||Links category|
|Sort field||Links display sort order|
|Sort order||Ascending - Descending|
MAIN AREA CONFIGURATION:
Use these parameters to customize the layout of the module box.
|Columns||Number of Columns to display|
|Rows||Number of Rows to display|
|Pages||Pages to display for slider or fader|
|Display Style||Horizontal slider - Vertical slider - Fader|
|Window Width||Width of area in window mode|
|Widow Height||Height of area in window mode|
|Transition pause||Pause time between transitions in milliseconds. A value of -1 disables automatic transitions. Default value is: 4000.|
|Transition duration||Transition effect duration in milliseconds (default: 1500).|
|Slide orientation||Top-Bottom / Left-Right - Bottom-Top / Right-Left|
|Transition type||Linear - Quad - Cubic - Quart - Quint - Expo - Circ - Sine - Back - Bounce - Elastic|
|Button Style||Black - Grey - Red - Blue - Orange - Purple - Green - Square Grey - Tall Grey|
|Module box HTML template||HTML/CSS code to display the overall module box. You can embedd any of the following tags:
Link HTML template:
If you want to create your own design you can use these parameters, you just need to add the placeholder tags in the main or more area.
|HTML template||HTML/CSS code to display each article. You can embedd any of the following tags to display article information:
These parameters control the behavior of special content effects, please read the next section for more information about content effects and how to apply them.
|Z layer||Define the z-index layer to use for the special effect content.|
Tooltip / Pop-Up FX Settings - Use these parameters to customize the Tooltip and Pop-Up effects:
|In Opacity||The opacity of the tooltip/pop-up when the mouse enters the trigger zone. A value of 0 will make the display transparent while a value of 1 will make it opaque, values range from 0 to 1 in decimal increments.|
|Out Opacity||The opacity of the tooltip/pop-up when the mouse leaves the trigger zone. A value of 0 will make the display transparent while a value of 1 will make it opaque, values range from 0 to 1 in decimal increments.|
|In Animation Vertical||The distance the tooltip/pop-up will move vertically (in pixels) when the mouse enters the trigger zone.|
|Out Animation Vertical||The distance the tooltip/pop-up will move vertically (in pixels) when the mouse leaves the trigger zone.|
|In Animation Horizontal||The distance the tooltip/pop-up will move horizontally (in pixels) when the mouse enters the trigger zone.|
|Out Animation Horizontal||The distance the tooltip/pop-up will move horizontally (in pixels) when the mouse leaves the trigger zone.|
|Fade-in Duration||The duration of the "In" animation when the mouse pointer enters the trigger zone (in milliseconds).|
|Fade-Out duration||The duration of the "Out" animation when mouse pointer leaves the trigger zone (in milliseconds).|
|Pause||The time the tooltip/pop-up will be shown between the "In" animation and the "Out" animation (in milliseconds).|
|Tooltip animation mode||Select one of the many Moo functions to perform animations.|
|Tooltip / Popup ease mode||The transition type. All transitions, except for "linear" transition, can be combined with a "Transition Ease".|
|Centered Popup||Set this to "Yes" if you want pop-up effect displays to appear centered in the browser window.|
Slide FX Settings - These parameters control the "Slide" content effect:
|Sliding Panels Settings||Choose an animation style from the list.|
|Note: The following Settings are used ONLY when Slide Panels Settings is set to CUSTOM:|
|Slide Panel X in||The distance (in pixels) from the left trigger zone border that the slide panel will go to when the mouse enters the trigger zone.|
|Slide Panel X out||The distance (in pixels) from the left trigger zone border that the slide panel will go to when the mouse leaves the trigger zone.|
|Slide Panel Y in||The distance (in pixels) from the top trigger zone border that the slide panel will go to when the mouse enters the trigger zone.|
|Slide Panel Y out||The distance (in pixels) from the top trigger zone border that the slide panel will go to when the mouse leaves the trigger zone.|
|Slide animation mode||Select one of the many Moo functions to animate the slide effects.|
|Slide ease mode||Choose how to apply the animation effect. This setting is not used when "Slide Animation Mode" is set to Linear.|
|Frames per Second||The frames per second used to animate the effect. Note: Using a high value in a heavy site could decrease the video performance. Combine this setting with "Frame Duration" to get a smooth effect.|
|Fame Duration||The time (in milliseconds) the duration will last.|
Hover FX Settings - These Parameters Control the Hover Effect:
|Hover Effect in Color||The background color that will fade in when mouse enter the element with class="js_hover".|
|Hover Effect Out Color||The background color that will fade out when mouse leaves the element with class="js_hover".|
Besides the page transition effects, you can also include additional effects that apply to the content of each item. By adding certain CSS tags to your HTML code and organizing the layout of content, these effects allow you to build fully customizable tooltips, pop-ups and slide effects. Since all the content data tags are available on these effects as well, you can elaborate the display of your content as much as you want!
Keep in mind however, that with great power comes great responsibility: the HTML of both zones is still part of the HTML code of your page; if your HTML/CSS code has a bug, it may affect how other parts of your site look and work.
Content effects are activated by the user's mouse pointer but with subtle differences. How you can implement each effect and how they are activated is explained below:
A Tooltip will appear automatically when the mouse pointer hovers over a specific "trigger zone", this example code explains better how to use the necessary tags:
Upon display, this code will show the "This is the tooltip trigger zone" legend by itself, but if you move the mouse pointer over it, a tooltip will come up displaying the "This is the tooltip content" legend. Each zone is wrapped within a tag, you must use the CSS tags "jxtctooltip" and "tip" as shown to make the effect work.
A pop-up will appear when the user clicks on the "trigger zone", the Pop-up zone has its own Close and Drag buttons. This example code shows the necessary CSS tags in use:
The trigger zone is made with the contents of the div with class "popuphover", and the pop-up content is hidden in the div with class "pop", it will be shown when the user clicks on the trigger zone.
Slides are useful to display content in different layers, for example imagine a picture with a footnote that expands to show a full description. Different than Tooltips or Pop-ups, Slides do not use a trigger zone, they react to mouse pointer over their own zones. This is an example code:
Again, the container zone inside the div with CSS class "slidebox" will be shown first, and the contents of the slide on div "slidepanel" will be shown when the mouse hovers its zone.
The Hover is useful when you want to focus on specific zone of the content, for example a "clickable" zone that looks similar to other content, an image or name that want to highlight. Similar to Slides, they react to mouse pointer over their own zones and does not need a trigger zone. This is an example code:
Once the mouse is over the js_hover zone the color will change automatically. As you can see this is the easier effect but provide you the power to catch the attention of your visitors.
As previously explained, the content is rendered in a grid fashion with one or more rows and columns and one or more pages, each page represents a single grid. Each cell in a grid contains the template code for one item with the placeholder tags translated to their corresponding data element such as titles, descriptions, images, etc.
In order to ease the visual styling of the grids, there are certain common CSS classes added to the HTML code for your convenience. You can put hard-coded CSS styling in the XTS template fields directly, but you may find using your template's CSS file a better option.
If you can't or don't want to alter your main CSS file, you can put any CSS code needed in the module's own file: css/wall.css. This file is located inside the module folder.
This is a brief explanation on how the HTML and classes are applied:
Each page in the module output is made with an HTML < table /> tag; the first table has CSS class firstpage, any inner pages have class centerpage and the last page has class lastpage. If there is only one page then it has class singlepage.
Each row within a table also has similar classes added to it: firstrow for the top row in the table, centerrow for any middle rows and lastrow for the bottom row of content. In the event that only a single row is used, it will have class singlerow assigned to it. These clases are repeated for as many tables (pages) are in the module output.
Likewise, columns also have similar tags: the left-most column has firstcol, the right-most column has lastcol and any middle column has centercol. Single columns have, you guessed it, singlecol. These classes are also applied on all pages shown.
Buttons also have extra CSS classes: prevbutton and nextbutton apply to the < a /> tags for each page change button. Page number buttons have tags as well: firstbutton, middlebutton, lastbutton and centerbutton.
You can have a common set of CSS styling code for these tags in your template's CSS file to maintain a consistent appearance on any modules being shown, or you can use them in combination with the module CSS class parameter to define specific styling for a particular module.
With these many options, the styling possibilities are unlimited! You are in total control of how the content will be shown in your site, just let the module handle the content gathering for you.Copyright 2010 Monev Software LLC www.joomlaxtc.com