Sunday, 12 September 2010

A guide to add Apple style slideshow for Magento

This article attempts to help you set up a slideshow on a Magento ecommerce shop, inspired by the official Apple slideshow.

Before we dive into the tutorial details, take a look at the live demo on the Magento Jewelry shop or Magento Apple shop in our Premium Magneto Themes section.

If you're interested in this slideshow effect, you will definitely want to go through this tutorial article?

I will explain how the slideshow works and introduce its features. The slidehow slices right to left and it's looping in a circle. The dot icons allow you to change the slideshow image when clicked.

Download slideshow.js and put under your theme js directory: skin/frontend/[your theme]/default/js/

Download the css file slideshow.css and put under your theme css directory: skine/frontend/[your theme]/css/

Download i_slideshow-node.gif and put under skin/frontend/[your theme]/default/images/

In order to show the slideshow on homepage, in magento CMS Page manager, edit your Homepage article, update the layout by clicking on tab Design, in field Layout Update XML enter the code below:


<reference name="head">
    <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
    <action method="addCss"><stylesheet>css/slideshow.css</stylesheet></action>
</reference>

<reference name="root">
    <block type="page/html_wrapper" name="slideshow">
        <action method="setElementClass"><value>slideshow-wrapper</value></action>
        <block type="cms/block" name="cms_slideshow">
            <action method="setBlockId"><block_id>slideshow</block_id></action>
        </block>
    </block>
</reference>

The code is supposed to load slideshow.js and slideshow.css on the homepage and appends a block named slideshow into the page layout. the slideshow block's content is editable through a CMS Static Block named slideshow

Now, we have to update the main layout in order to show up slideshow block. Suppose you're using 1-column layout for the homepage, edit skin/frontend/[your theme]/default/template/page/1column.phtml. after the header block is printed out, we output slideshow block:


<?php echo $this->getChildHtml('header') ?>
<?php echo $this->getChildHtml('slideshow') ?>

Next, we will create a CMS Static blog 'identified' slideshow with content below:


<ul>
  <li><a href="/link-1"><img src="{{skin url='images/media/slideshow/1.jpg'}}" alt="" /></a></li>
  <li><a href="/link-2"><img src="{{skin url='images/media/slideshow/2.jpg'}}" alt="" /></a></li>
  <li><a href="/link-3"><img src="{{skin url='images/media/slideshow/1.jpg'}}" alt="" /></a></li>
  <li><a href="/link-4"><img src="{{skin url='images/media/slideshow/2.jpg'}}" alt="" /></a></li>
</ul>

Where {{skin url='images/media/slideshow/1.jpg'}} is a link of slideshow image. You can add many slideshow as you want.

Okay, try to refresh your homepage and see how your beautiful slideshow showed up.

Congrats! We're done. Welcome any comment :-)

14 comments:

  1. Is there a way to make the slideshow panels navigate to a product page if clicked?

    ReplyDelete
  2. Great article. These plugins are very good. I used some of them. Thanks for sharing. I look around this information and facts..Magento Themes

    ReplyDelete
  3. Nice article! Thanks! I've used it, when I've created the slideshows only with images. But sometimes you need to create slideshow with products or categories. In this case it is better to use professional extension. I prefer Noovias Slideshow - http://www.noovias.com/en/slideshow. Hope I'll save your time.

    ReplyDelete
  4. Unfortunately I couldn't get this to work properly. It loads the css, the javascript and the images. But it just displays the images below eachother and doesn't seem to load the javascript function.

    Any ideas?

    Thanks

    ReplyDelete