Levente Hunyadi

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.

Demo image Demo image

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}
Notice for Joomla 1.6 and later

Security mechanisms in some editions of Joomla do not permit the use of param="value" or param='value' in plug-in activation code syntax. As a workaround, boxplus supports the vertical bar (|) as a quote character:

{boxplus href=|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.

Demo image Demo image

Video

  • Create a link (HTML <a>) with its href attribute pointing to a Flash or video file (swf, mov, 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 Flash (SWF) video Sample QuickTime video Sample ogg video Sample ogg video

Sample code

Stand-alone
<a rel="boxplus" href="/levente/flash.swf?width=800&amp;height=600">Sample Flash (SWF) video</a>
<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/flash.swf?width=800&amp;height=600"}Sample Flash (SWF) video{/boxplus}
{boxplus href="/levente/quicktime.mov?width=800&amp;height=600"}Sample QuickTime video{/boxplus}
{boxplus href="/levente/video.ogg?width=800&amp;height=600"}Sample OGG video{/boxplus}
Notice for Joomla 1.6 and later

Security mechanisms in some editions of Joomla do not permit the use of param="value" or param='value' in plug-in activation code syntax. As a workaround, boxplus supports the vertical bar (|) as a quote character:

{boxplus href=|flash.swf?width=800&amp;height=600|}Sample Flash (SWF) video{/boxplus}
{boxplus href=|quicktime.mov?width=800&amp;height=600|}Sample QuickTime video{/boxplus}
{boxplus href=|video.ogg?width=800&amp;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.
Link code generator

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

Sample YouTube video

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:
<object width="400" height="225">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12345678&amp; [...] " />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=12345678&amp; [...] "
       type="application/x-shockwave-flash" [...]
       width="400" height="225" />
</object>
  • 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 http://vimeo.com/moogaloop.swf?clip_id=12345678&width=400&height=225
  • Add a rel attribute with the value boxplus.

Example

Sample Vimeo video

PDF

External HTML content

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?id=999&tmpl=component"}Link text{/boxplus}
Notice for Joomla 1.6 and later

Security mechanisms in some editions of Joomla do not permit the use of param="value" or param='value' in plug-in activation code syntax. As a workaround, boxplus supports the vertical bar (|) as a quote character.

Inline HTML content

Examples

Longer HTML sample content from document Shorter HTML sample content from document

Sample code

Stand-alone
<a rel="boxplus" href="#id">Link text</a>
Joomla (editor source mode)
{boxplus href="#id"}Link text{/boxplus}

Picasa web albums

Picasa support requires Request.JSONP from MooTools More (automatically included by the Joomla extension).

  • Open a Picasa album.
  • Click the link RSS and copy the URL from the address bar.
  • Create a link (HTML <a>) and add the RSS URL as its href attribute. The most important parts are the Picasa user identifier and the album identifier.
  • Add a rel attribute with the value boxplus.

Examples

Sample Picasa web album

Sample code

Stand-alone
<a rel="boxplus" href="http://picasaweb.google.com/data/feed/base/user/USERID/albumid/ALBUMID">Picasa album</a>
Joomla (editor source mode)
{boxplus href="http://picasaweb.google.com/data/feed/base/user/USERID/albumid/ALBUMID"}Picasa album{/boxplus}

Google Maps

Sample code

Stand-alone
<a rel="boxplus" href="/levente/http://maps.google.com/maps?output=embed&amp; [...] ">Map</a>
Joomla (editor source mode)
{boxplus href="/levente/http://maps.google.com/maps?output=embed&amp; [...] "}Map{/boxplus}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis quam felis. Mauris et tellus eu ante condimentum elementum sed a ipsum. Ut congue ultricies justo. Integer eget dolor ac metus faucibus convallis. Duis et libero dui. Cras at auctor mauris. Proin dapibus nisi id magna sodales at ultrices est rhoncus. Sed turpis felis, rutrum in congue et, aliquet in leo. Donec pretium augue luctus augue ultricies in interdum felis eleifend. Duis elit arcu, ultrices non scelerisque a, varius ac ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras nibh nibh, iaculis eu porta in, ornare ut massa. Suspendisse nec lacus non mi cursus suscipit ac et arcu.

Morbi sagittis malesuada orci vitae consectetur. Etiam nec condimentum nulla. Aliquam adipiscing elementum semper. Donec ac mi aliquam dolor pretium mollis id eu urna. Phasellus ac metus vitae justo rhoncus adipiscing. Aliquam vehicula risus in leo commodo vulputate sodales non nisl. Maecenas vulputate tellus non tortor ultricies sed euismod lectus mollis. Nullam ut viverra lectus. Proin dapibus hendrerit tellus ut fermentum. Nulla sem odio, dictum eget facilisis bibendum, auctor ut nibh. Ut eu lorem quis enim consectetur aliquet. Nam dolor neque, eleifend pretium ornare cursus, ornare vel magna. Vestibulum faucibus, est eget vestibulum dictum, erat dolor cursus dolor, in convallis magna est eget enim. Proin luctus egestas lorem, eget scelerisque ligula posuere sed. Duis egestas lacus sapien. Nulla facilisi. In vitae sapien a nisi tincidunt volutpat.

Duis eu dolor nisi, a hendrerit diam. Aenean eget neque non lectus hendrerit consequat at eget elit. Nulla sed eros lectus, a ultrices augue. Donec in diam elementum dui imperdiet mollis. Aliquam erat volutpat. Quisque vitae dignissim lorem. Fusce eleifend condimentum consequat. Quisque quis pharetra augue. Morbi auctor nibh ut arcu blandit porta. Duis id justo nisi. Pellentesque vestibulum metus quis diam rhoncus in sodales erat vulputate. Cras vel dolor sem, in sodales ipsum. Maecenas ut turpis lectus, nec hendrerit nisl.

Proin id faucibus lectus. Pellentesque vehicula lectus quis erat facilisis accumsan. Nulla vehicula augue ac massa commodo laoreet. Sed eget odio at libero sagittis pharetra varius at est. Nullam iaculis nisi et mi lobortis vitae vestibulum mi semper. Curabitur tempus rhoncus augue, eu tempor tortor blandit non. Vivamus feugiat, nibh sit amet pellentesque pharetra, mi lorem sollicitudin sapien, in luctus massa quam non ligula. Aenean eleifend tellus quis lacus porttitor id tempor tortor dictum. Nullam facilisis lectus in erat vulputate vulputate. Aliquam et diam vel lacus auctor pharetra quis vitae ante. Aliquam vestibulum libero gravida nulla viverra aliquet. Mauris ut hendrerit nibh. Integer non risus urna. Aenean laoreet semper porta. Nullam cursus suscipit erat viverra tempus. Suspendisse lobortis dui sem.

Integer vel nisi massa, ut vehicula enim. Mauris tincidunt facilisis metus in eleifend. Ut iaculis malesuada metus, eu ornare risus commodo vitae. Donec id dolor nisl. Fusce varius imperdiet erat, ac varius nulla venenatis nec. In sed neque at ipsum rutrum cursus. Suspendisse id nulla leo, vitae euismod leo. Sed felis tellus, congue vitae luctus quis, cursus in dolor. Maecenas rutrum convallis mollis. Aliquam a velit eu mauris auctor aliquam. Sed faucibus diam a est hendrerit eu scelerisque neque imperdiet. Donec elit tellus, adipiscing eget pharetra id, lobortis non tellus.

Donations in EUR
Donations in USD