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 itshref
attribute pointing to a full-size image. - Add a
rel
attribute with the valueboxplus
.
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 theirhref
attribute pointing to full-size images. - Add a
rel
attribute to each with the valueboxplus-gallery
wheregallery
is a name of your choice.
Video
- Create a link (HTML
<a>
) with itshref
attribute pointing to a Flash or video file (mov
,mpeg
,ogg
orwebm
). - Add a
rel
attribute with the valueboxplus
. - Add
width
andheight
attributes to set the size of the video.
Examples
Sample code
Stand-alone
<a rel="boxplus" href="/levente/quicktime.mov?width=800&height=600">Sample QuickTime video</a> <a rel="boxplus" href="/levente/video.ogg?width=800&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&hl=en_US&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&hl=en_US&rel=0" type="application/x-shockwave-flash" [...] width="640" height="390"></embed> </object>
- Identify the part
embed/ABCDEFGHIJ
orv/ABCDEFGHIJK
where the code uniquely identifies your video. - Locate the video
width
andheight
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 valueboxplus
.
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
andheight
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 valueboxplus
.
Example
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 thesrc
attribute of theiframe
element hasoutput=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 itshref
attribute. The most important parts are location latitude and longitude, and&output=embed
at the end. - Add a
rel
attribute with the valueboxplus
.
Example
Sample code
Stand-alone
<a rel="boxplus" href="/levente/https://maps.google.com/maps?output=embed
& [...] ">Map</a>
Joomla (editor source mode)
{boxplus href="/levente/https://maps.google.com/maps?output=embed
& [...] "}Map{/boxplus}