Magic Slideshow™ for Magento

Install it now

  1. Download the Magento extension for Magic Slideshow™.
  2. Unzip the contents, and upload the magicslideshow folder to your Magento directory.
  3. If you use Magento Compiler, disable it. After installation is complete, go to Magento Compiler and run the compilation process.
  4. Go to http://www.yoursite.url/magicslideshow/ in your browser and follow the instructions. (Change yoursite.url to the domain name of your website).
  5. Go to System > Cache Management and refresh the cache (screenshot).
  6. Configure the Magic Slideshow™ module through the 'Magic Toolbox -> Magic Slideshow settings' menu in the Magento admin panel.
  7. You've now installed the demo version of Magic Slideshow™!
  8. To upgrade, buy Magic Slideshow™ and overwrite the magicslideshow.js file in this folder:
    /skin/frontend/[your_interface]/[your_theme]/js/

Home page slideshow

To create a slideshow on your home page:

  1. Go to your admin panel > Magic Toolbox > Magic Slideshow.
  2. In the Homepage or custom block page, choose the images for your slideshow and click 'Upload files'.
  3. Save all changes.
  4. The slideshow will now display on your home page, before the main content area.

Custom block slideshow

You can create a slideshow anywhere else on your website as a custom block.

To create a custom block, open this file:

app/design/frontend/[your_interface]/[your_theme]/layout/magicslideshow.xml

and alter this block:

<reference name="content">...</reference>

in this section of the file:

<cms_page>...</cms_page>

Slideshow on CMS pages

  1. On the Magic Slideshow™ extension settings page, set the 'Include headers on all pages' parameter to 'Yes' (under the General settings tab).
  2. Go to your admin panel > CMS > Pages. Add a new page or select an existing page, e.g 'Home page'.
  3. On the 'Content' tab click on the 'Show/Hide Editor' button to disable the editor.
  4. Insert a slideshow anywhere in the code by adding a div with a class of MagicSlideshow and all your sliding images inside. The HTML will look something like this:
    <div class="MagicSlideshow">
    <img src="example1.jpg"/>
    <img src="example2.jpg"/>
    <img src="example3.jpg"/>
    <img src="example4.jpg"/>
    </div>
  5. Click 'Save Page'.
  6. Click 'Preview' to see your slideshow in action!
  7. See these detailed instructions for changing the options of your slideshow - thumbnails, headings, text, arrows etc.

You have now added this JavaScript slideshow to your Magento home page or other page. We provide free support for all our software, if you would like help, please contact us.

An alternative to this Magento module is Magic Scroll, which can slide many images at one time. It is perfect for organising product images, showing off your bestsellers, new arrivals, latest news and related products.

You can set your slideshow to fade from one image to the next and change the fading time and fading slideshow duration. For more examples, please try the Magic Slideshow™ examples page.

Other Magento modules