Magic Scroll for Joomla

Before Joomla was released, updating ones own website was a chore, unless you were a HTML whizz. A web developer was often called on for even the smallest of changes.

That all changed with Joomla in 2005. This hugely popular CMS (Content Management System) gives users full control over their website content.

This open source CMS is used by all sorts of popular websites. From a museum like the Guggenheim, to dance, music, food, sport & much more. The options are endless.

Since January 2011, Joomla users have enjoyed our Joomla scroller module

Magic Scroll allows you to scroll images and other objects on any article, by simply downloading the Joomla carousel extension from our website and uploading it directly into your Joomla Admin panel. It brings life to web pages which would otherwise have looked static.

Responsive design

Back in 2011, the phrase 'responsive design' was still not mainstream. Some developers were using terms like flexible, elastic, fluid & liquid to describe website layouts, but not as many as you would think. Nowadays, responsive design is crucial, with the popularity of handheld devices and all sorts of screen sizes.

What does this have to do with Magic Scroll?

You'll be pleased to know that Magic Scroll is 100% responsive. Our JavaScript carousel was created to fit the screen size perfectly. Whether it's a mobile phone, android tablet or iPad, the Joomla scroller automatically scales up & down. No effort required on your part.

How Magic Scroll has changed

Originally Magic Scroll did what it said on the tin... it scrolled. But we never stop improving it. These days, you can choose from 4 ways to scroll your Joomla content. We call them rendering modes:

Scroll: The original scroll moves content from right/left or left/right. It is the default setting when the Joomla scroller module is installed.

Animation: Similar to the original scroll effect, but with a twist. The images fade on entrance & exit. A slide feel is used by default, but can easily be changed to a fun bounce effect by adding mcs-bounce to the class="MagicScroll" code so it becomes class="MagicScroll mcs-bounce".

Cover-flow: Have you ever looked at Apple iTunes and thought how cool their images move? You too can now have this effect thanks to the cover-flow option.

Carousel: Views images in a circular motion, offering a 3D perspective to your Joomla web page.

To change from the default Scroll option to either Animation, Cover-Flow or Carousel go to: Admin > Components > Magic Scroll for Joomla > Scroll mode > and select your preference. By making your choice on the Magic Scroll settings page, the chosen JavaScript scroller effect will be applied to all image scrollers throughout your website.

Display your Joomla scrollers as different modes on different pages

No problemo! You can control each JavaScript carousel separately using the simple Magic Scroll HTML code. As Step 3 of the Installation process shows, your initial Joomla scroller code will look like this:

<div class="MagicScroll">
  <a href="/page-1/"><img src="example1.jpg"></a>
  <a href="/page-2/"><img src="example2.jpg"></a>
  ...
</div>

By adding data-options= code to the <div> tag you can specify which effect that JavaScript scroller will have. Carousel is data-options="mode: carousel". Cover-flow is data-options="mode: cover-flow". And Animation is data-options="mode: animation". Don't forget to add mcs-bounce to the class if that's the effect you're looking for. So your code would be: <div class="MagicScroll mcs-bounce" data-options="mode: animation">. If we take the carousel option as our example, your HTML code will look like this:

<div class="MagicScroll" data-options="mode: carousel">
  <a href="/page-1/"><img src="example1.jpg"></a>
  <a href="/page-2/"><img src="example2.jpg"></a>
  ...
</div>

With nearly 40 customization options available, each JavaScript scroller on your Joomla website can look completely different from each other.

Create a homepage scroller

One last thing. We've discussed how this JavaScript carousel will look on your article pages, but it's also perfect for your homepage.

In February 2014 we added Homepage support to this Joomla carousel extension, to make your life easier. Controlled by its own Homepage settings page, simply upload the images you wish to appear on your Joomla home page; choose the effect your JavaScript scroller will appear & the height/size you want. Simple.

Whatever design you're seeking, this Joomla carousel extension offers fun, flexibility & simplicity. Perfect for any Joomla website.