How to create a homepage slideshow

Last modified by MagicToolbox on Tue, May 1, 2012 10:32
Source|Old Revisions  

Creating a homepage slideshow on your Magento store lets you highlight particular products or pages you want to promote.

Slideshows work by displaying one image after another, often with accompanying text and headings.

Image slideshows can be used on Magento either via a module or by editing templates. They typically use JavaScript or Flash. Be aware that Flash slideshows won’t work on iOS devices (iPad, iPhone, iPod Touch).

Magic Slideshow

Magic Slideshow can slide any content - images, text, HTML content, videos and SWF files.

It can fade or slide images with or without headings and text. Each image can hyperlink to other pages on your site. Thumbnails, arrows and slide numbers can be shown. Speed, effect and styles can be adjusted. See 8 examples.

Installation

1. Go to Magic Slideshow for Magento.

2. Download Magic Slideshow free trial and unzip it, keeping the folders intact.

3. Copy the ‘magicslideshow’ folder to the ‘js’ folder of your Magento store (on your server).

4. Still on your server > Open the file ‘app/design/frontend/[your_interface]/[your_theme]/template/page/html/head.phtml’ in an editor (eg: Dreamweaver) and add following code at the end of file and save your changes:

<link rel="stylesheet" type="text/css" href="<?php echo $this->getJsUrl(); ?>magicslideshow/magicslideshow.css"/>
<script src="<?php echo $this->getJsUrl(); ?>magicslideshow/magicslideshow.js" type="text/javascript"></script>

5. Overwrite the old head.phtml file with your revised head.phtml file.

6. Go to your admin panel > CMS > Pages. Add a new page or select an existing page, eg: ‘Home page’.

7. On the ‘Content’ tab click on the ‘Show/Hide Editor’ button to disable the editor.

8. Insert Magic Slideshow anywhere in the code. It requires a div with a class of MagicSlideshow and all your sliding images inside. For example:

<div class="MagicSlideshow">
<img src="example1.jpg"/>
<img src="example2.jpg"/>
<img src="example3.jpg"/>
<img src="example4.jpg"/>
</div>

9. Click ‘Save Page’.

10. Click ‘Preview’ to see your slideshow in action.

Troubleshooting

  • The slide images may appear as broken image icons in the Content > Show Editor view. This is fine, they will appear on your Preview page.
  • If the slideshow does not appear on your page in Preview, make sure the URL is correct. Eg: www.[YOUR MAGENTO WEBSITE URL]/[‘URL KEY’ OF YOUR PAGE]

Customize your slideshow

After creating your slideshow, choose from the 30+ options to adjust the slideshow how you wish. The detailed instructions provide HTML code examples for changing the settings.




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs