By A Web Design

Joomla 1.7 Boxplus Plugin Examples

To embed the boxplus activation code in any Joomla 1.7 article content, you have to first login through the administrative panel of Joomla by simply entering the url_of_your_website/administrator in your browser.

Enter the username, password and leave the Language to Default, click on Login as shown in Diagram 1.

Diagram 1

After logging in to the backend, a control panel page opens as shown in Diagram 2.

The Control Panel provides access to many default Joomla! functions and features. From the Control Panel, you can create and manage articles and categories. Other features available in the Control Panel are the media, menu, language, and user managers.

Diagram 2

Focus: Adding the BoxPlus activation code, bound to clickable text link in a New Article. The new article has lorem ipsum text to simulate article content.

On click of the text link, an image is displayed in a shadow box.

Approach: In the top menu, locate Content. Click Content. From the drop down menu that appears click on Article Manager - > Add New Article as shown in Diagram 3.

Diagram 3

Enter the following details for the new article as shown in Diagram 4.

The following are the list of options provided:
Title: Enter the Title for the article. For Eg. Boxplus Examples.
Alias: Enter the internal name of the article. For Eg. boxplusexamples.
Status: Select the status of the article to be Published from the given options.
Featured: Select ‘Yes’ from the given option to display the article on the homepage of the website.

Diagram 4

In the Article Text section, Enter the boxplus activation code right at the top of the simulated text, i.e. this is the first line in the simulated.

The generic Boxplus activation codespec:

 
{ boxplus param1=|value1| param2 =|value2| } 
  < Enter link text  here > 
{ /boxplus }

Boxplus supports the vertical bar (|) as a quote character.
The generic Boxplus code snippet must have specific values loaded that will replace the generic values. This is explained below:

param1 = value1 replaced with href=|image.jpg|

param2 = value2 replaced with title=|Description of image|

Therefore,

 
{ boxplus href=|image.jpg| title=|Description of image| } 
  < Enter link text here > 
{ /boxplus }

For example, in our case,

 
{ boxplus href=|images/birds/bird1.jpg| title=|Nice  Bird|} 
  Bird 
{ /boxplus }

as shown in Diagram 5.

Diagram 5

Click on Save & Close as shown in Diagram 6, in order to save the article and close the edit screen.
You can also click on Save, in order to save the article data updated and stay on the editable screen.

Diagram 6

When this page is viewed by any site visitors, they will see a text link in the page content as shown in Diagram 7.

Diagram 7

On click of the text link, an image is displayed in a shadow box a shown in Diagram 8.

Diagram 8

Focus: Adding the BoxPlus activation code, bound to clickable thumbnail image in a New Article. The new article has lorem ipsum text to simulate article content.

On click of the thumbnail image, an image is displayed in a shadow box.

Approach: In the top menu, locate Content. Click Content. From the drop down menu that appears click on Article Manager - > Add New Article as shown in Diagram 9.

Diagram 9

Enter the following details for the new article as shown in Diagram 10.

Diagram 10

In the Article Text section locate the Editor toolbar as shown in Diagram 11.

In the Editor toolbar, Click on HTML to open the HTML Source Editor.

Diagram 11

In the HTML Source Editor window, Enter the boxplus activation code right at the top of the simulated text, i.e. this is the first line in the simulated.

The generic Boxplus activation codespec:

 
{ boxplus param1=|value1| param2 =|value2|} 
  < Enter HTML  codespec here > 
{ /boxplus}

Boxplus supports the vertical bar (|) as a quote character.
The generic Boxplus code snippet must have specific values loaded that will replace the generic values. This is explained below:

param1 = value1 replaced with href=|image.jpg|

param2 = value2 replaced with title=|Description of image|

Therefore,

 
{ boxplus href=|image.jpg| title=|Description of image|} 
  <img alt="Sample image" src="thumb.jpg" />; 
{ /boxplus}

For example, in our case,

 
{ boxplus href=|images/birds/bird1.jpg| title=|Nice  Bird|} 
  <img alt="Cute" src="images/birds/bird1_thumb.jpg" />
{/boxplus}

as shown in Diagram 12.

Finally, click Update as shown in Diagram 12 to make these changes permanent.

Diagram 12

Click on Save & Close as shown in Diagram 13, in order to save the article and close the edit screen.
You can also click on Save, in order to save the article data updated and stay on the editable screen.

Diagram 13

When this page is viewed by any site visitors, they will see a thumbnail image in the page content as shown in Diagram 14.

Diagram 14

On click of the thumbnail image, an image is displayed in a shadow box a shown in Diagram 15.

Diagram 15

Focus: Adding the BoxPlus activation code, bound to clickable image in a New Article. The new article has lorem ipsum text to simulate article content.

On click of the image, an image gallery is displayed in a shadow box.

Approach: In the top menu, locate Content. Click Content. From the drop down menu that appears click on Article Manager - > Add New Article as shown in Diagram 16.

Diagram 16

Enter the following details for the new article as shown in Diagram 17.

Diagram 17

In the Article Text section, Enter the boxplus activation code right at the top of the simulated text, i.e. this is the first line in the simulated.

The generic Boxplus activation codespec:

 
  { boxplus rel=|example| param1=|value1| param2 =|value2|}  
    < Enter link text here >  
  {/boxplus}
 
  { boxplus rel=|example| param1=|value1| param2 =|value2|}  
    < Enter link text here > 
  {/boxplus}
 
  { boxplus rel=|example| param1=|value1| param2 =|value2|}  
    < Enter link text here > 
  {/boxplus}

Boxplus supports the vertical bar (|) as a quote character.
The generic Boxplus code snippet must have specific values loaded that will replace the generic values. This is explained below:

param1 = value1 replaced with href=|image.jpg|

param2 = value2 replaced with title=|Description of image|

For example, in our case,

 
 { boxplus rel=|imggallery| href=|images/birds/bird1.jpg| 
   theme  =| lightsquare |} 
   First Bird 
 {/boxplus}
 
 { boxplus rel=|imggallery| href=|images/birds/bird2.jpg|
   autofit  =| false |} 
   Second Bird 
 {/boxplus}
 
 { boxplus rel=|imggallery| href=|images/birds/bird3.jpg| false  |} 
   Third Bird 
 { /boxplus}

Diagram 18

Click on Save & Close as shown in Diagram 19, in order to save the article and close the edit screen.
You can also click on Save, in order to save the article data updated and stay on the editable screen.

Diagram 19

When this page is viewed by any site visitors, they will see a text link in the page content as shown in
Diagram 20.

Diagram 20

On click of the link text, gallery images are displayed in a shadow box a shown in Diagram 21.

Diagram 21

Focus: Adding the BoxPlus activation code, bound to clickable text link in a New Article. The new article has lorem ipsum text to simulate article content.

On click of the text link, a video is displayed in a shadow box.

Approach: In the top menu, locate Content. Click Content. From the drop down menu that appears click on Article Manager - > Add New Article as shown in Diagram 22.

Diagram 22

Enter the following details for the new article as shown in Diagram 23.

Diagram 23

In the Article Text section, Enter the boxplus activation code right at the top of the simulated text, i.e. this is the first line in the simulated.

The generic Boxplus activation codespec:

 
{ boxplus param1=|value1| param2 =|value2|} 
  < Enter link text  here > 
{/boxplus}

Boxplus supports the vertical bar (|) as a quote character.
The generic Boxplus code snippet must have specific values loaded that will replace the generic values. This is explained below:

Select the video that you want to display in the pop up window. From the embed code create a link whose href attribute is set to
http://www.youtube.com/v/VjE0Kdfos4Y?version=3&hl=en_US&width=420&height=315

param1 = value1 replaced with href=|http://www.youtube.com/v/VjE0Kdfos4Y?version=3&hl=en_US; width=420&height=315|.

param2 = value2 is optional. For example, allowfullscreen= “true” can be set as second parameter.

For example, in our case,

 
 { boxplus href=http://www.youtube.com/v/VjE0Kdfos4Y?version=3 & hl=en_US;  
   width=420 & height=315 } 
   You Tube Video 
  {/boxplus}

Diagram 24

Click on Save & Close as shown in Diagram 25, in order to save the article and close the edit screen.
You can also click on Save, in order to save the article data updated and stay on the editable screen.

Diagram 25