HD-FX Plugin for Joomla 3.5

Add some truly special effects to your Joomla website with the HD-FX plugin.

What is this?

HD-FX is a Joomla plugin that provides a variety of jQuery and CSS effects to aid website production. Although it is not an "off-the-shelf" solution and is intended more for developers with coding experience, we do intend to include various tutorials within the Joomla Bites section.

What to do after installing?

Install the zip file via the administration install manager as per any other extension. Once it has installed go to the plugin manager and select HD-FX. Enable the plugin and then enable any of the options that you wish to include on your site (including lightbox effect, anchor scroll, scroll reveal, scroll to fixed, active URL, fling CSS and box slider).

This installs a lightbox effect, allowing you to apply the effect to any image, series of images, iframe or html content of your choice.

For a single lightbox effect include the id "fancy" within the "a" element.

eg. <a href="/images/test.jpg" id="fancy>Trigger</a>

For multiple effects use the class "fancy" instead.

eg. <a href="/images/test-1.jpg" class="fancy>Trigger 1</a>

<a href="/images/test-2.jpg" class="fancy>Trigger 2</a>

<a href="/images/test-3.jpg" class="fancy>Trigger 3</a>

Click here for a more detailed explanation of the lightbox effect.

Anchor Scroll

This installs an anchor scroll effect. Clicking on any "#" link smoothly scrolls you to that point in the page (the same effect is used on this page, try clicking here to scroll to the top).

Scroll Reveal Library

This installs the scroll reveal library, allowing you to animate elements of your webpage once you have scrolled to them.

Scroll to Fixed

This allows a scrollable element to fix to the top when it has scrolled to the top.

Active URL

Enabling Active URL will add the class "activeurl" to any hyperlink on the page that references the current page you are on. This is useful for styling purposes if you want to style the active URL (or hide it outright).

eg. the css...

a.activeurl {display:none;}

...will hide the currently viewed URL wherever it appears on a page.

Fling CSS

Fling CSS is Hyde-Design's own collection of CSS effects that you can easily "fling" onto your site using specific classes and HTML markup, they are all explained in more detail on the Joomla Bites section. Enabling Fling CSS simply adds the entire fling.css effects collection to your website. Visit the fling.css page for more details (including an explanation behind it's silly name).

Box Slider

There are many jQuery slider scripts available, but this is our favourite. Easy to use, responsive and allows for HTML content.

Adding the class "bxslider" to any "ul" element ensures that any "li" element within the "ul" is treated as a slide within a slideshow.

eg.

<ul class="bxslider">

<li>This is the first slide</li>

<li>This is the second slide</li>

<li>This is the third slide</li>

</ul>

There are also parameters in this plugin to select the slider mode (horizontal, vertical or fade) the pause time between slides (in milliseconds) and the transition time between slides (in milliseconds).