boxplus Examples

The examples in this section illustrate two ways of boxplus usage: (1) setting the rel attribute of anchor elements (which works in both the stand-alone and the Joomla version); and (2) embedding boxplus and creating customized instances using an activation tag (which works inside Joomla only).

Linking to boxplus with anchors

The most typical way to activate boxplus is to use normal links (HTML <a>) that point to images, video or other multimedia content, and annotate the anchor element with a rel attribute. Links that have a rel attribute that starts with boxplus are automatically discovered by boxplus upon page initialization. If you use boxplus for Joomla, whenever your article contains at least one rel attribute that starts with boxplus, the initialization code is automatically added in the page header.

Single images

• Create a link (HTML <a>) with its href attribute pointing to a full-size image.
• Add a rel attribute with the value boxplus.

Sample code

Stand-alone

<a rel="boxplus" href="/levente/image.jpg" title="Description of image"><img alt="Sample image" src="/levente/thumb.jpg" /></a>

Joomla (editor source mode)

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

Image gallery

• Create a set of links (HTML <a>) with their href attribute pointing to full-size images.
• Add a rel attribute to each with the value boxplus-gallery where gallery is a name of your choice.

Video

• Create a link (HTML <a>) with its href attribute pointing to a Flash or video file (mov, mpeg, ogg or webm).
• Add a rel attribute with the value boxplus.
• Add width and height attributes to set the size of the video.

Examples

Sample code

Stand-alone

<a rel="boxplus" href="/levente/quicktime.mov?width=800&amp;height=600">Sample QuickTime video</a>
<a rel="boxplus" href="/levente/video.ogg?width=800&amp;height=600">Sample OGG video</a>

Joomla (editor source mode)

{boxplus href="/levente/quicktime.mov?width=800&height=600"}Sample QuickTime video{/boxplus}
{boxplus href="/levente/video.ogg?width=800&height=600"}Sample OGG video{/boxplus}

Video sharing portals

• Locate the video you would like to show in the pop-up window.
• Find the embed code suitable for sharing the video on your website.
• Copy the embed code into the code generator text area below to get a link or an activation tag.
• Copy the link or the activation tag directly to your article content.
• See the detailed instructions for each specific video sharing portal below if you run into problems.

YouTube video sharing portal

• Locate the YouTube video that you would like to show in the pop-up window.
• Right-click the video and select Copy embed code from the context menu. (Alternatively, click Share and activate the tab Embed.)
• You should see HTML code that resembles the following, with formatting removed:

<iframe width="640" height="390" src="http://www.youtube.com/embed/ABCDEFGHIJK" frameborder="0" allowfullscreen></iframe>

• If in a previous step you checked Use old embed code, you should see HTML code that instead resembles the following, with formatting removed:

<object width="640" height="390">
<param name="movie" value="http://www.youtube.com/v/ABCDEFGHIJK?fs=1&amp;hl=en_US&amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/ABCDEFGHIJK?fs=1&amp;hl=en_US&amp;rel=0"
       type="application/x-shockwave-flash" [...]
       width="640" height="390"></embed>
</object>

• Identify the part embed/ABCDEFGHIJ or v/ABCDEFGHIJK where the code uniquely identifies your video.
• Locate the video width and height attributes (640 and 390 in the code above).
• Create a link whose href attribute is set to http://www.youtube.com/v/ABCDEFGHIJK&width=640&height=390&fs=1. Omit fs=1 if you do not want to permit full-screen mode.
• Add a rel attribute with the value boxplus.

Example

Vimeo video sharing portal

• Locate the Vimeo video that you would like to show in the pop-up window.
• Click the icon Embed and choose the old embed code.
• You should see HTML code that resembes the following, with formatting removed:

<iframe src="https://player.vimeo.com/video/57405003?color=ffffff&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/57405003">Civilization: The Rise of Europe</a> from <a href="https://vimeo.com/dominicboudreault">Dominic</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

• Identify the part clip_id=12345678 where the number uniquely identifies your video.
• Locate the video width and height attributes (400 and 225 in the code above).
• Create a link whose href attribute is set to https://vimeo.com/moogaloop.swf?clip_id=12345678&width=400&height=225
• Add a rel attribute with the value boxplus.

Example

PDF

• The Not So Short Introduction to LATEX2ε
• The same book in a 600x600-pixel pop-up window

External HTML content

• External content without iframe: GPL license
• External content in iframe: North Atlantic Treaty Organization
• External content in iframe: this page

Sample code

Stand-alone

<a rel="boxplus" href="http://example.com">Link text</a>

Joomla (editor source mode)

{boxplus href="http://example.com"}Link text{/boxplus}

If you use Joomla, you can directly link to the text an article without the header, navigation bar and other similar page elements. Use your article identifier (instead of 999) for the id URL query parameter.

{boxplus href="/levente/en/boxplus/demo?amp;id=999&tmpl=component"}Link text{/boxplus}

Inline HTML content

Examples

Sample code

Stand-alone

<a rel="boxplus" href="#id">Link text</a>
<a rel="boxplus" href="#id!width=300&height=200">Link text</a>

Joomla (editor source mode)

{boxplus href="#id"}Link text{/boxplus}
{boxplus href="#id!width=300&height=200"}Link text{/boxplus}

Google Maps

• Find the location on maps.google.com that you would like to display in the pop-up window.
• Click the Link icon in the top right corner of the page. It pops up a small window with a URL and HTML to embed in website. Do not use short URLs. A typical link should look as follows: https://maps.google.com/maps?q=Budapest+University+of+Technology+and+Economics&hl=en&ie=UTF8&ll=47.481307,19.056215&spn=0.01005,0.022724&sll=37.0625,-95.677068&sspn=47.885545,93.076172&vpsrc=6&t=m&z=16
• Add &output=embed at the end of the link, which will instruct Google to generate code for embedding. (If you observe the text field HTML to embed in website, you will see that the src attribute of the iframe element has output=embed at the end.) A typical result should look as follows: https://maps.google.com/maps?q=Budapest+University+of+Technology+and+Economics&hl=en&ie=UTF8&ll=47.481307,19.056215&spn=0.01005,0.022724&sll=37.0625,-95.677068&sspn=47.885545,93.076172&vpsrc=6&t=m&z=16&output=embed
• Create a link (HTML <a>) and add the extended URL as its href attribute. The most important parts are location latitude and longitude, and &output=embed at the end.
• Add a rel attribute with the value boxplus.

Example

Sample code

Stand-alone

<a rel="boxplus" href="/levente/https://maps.google.com/maps?output=embed&amp; [...] ">Map</a>

Joomla (editor source mode)

{boxplus href="/levente/https://maps.google.com/maps?output=embed& [...] "}Map{/boxplus}