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 :-)

76 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
  5. Here is a good Weblog You might Come across Fascinating that we Encourage Youเว็บไซต์คาสิโนออนไลน์ที่ได้คุณภาพอับดับ 1 ของประเทศ
    เป็นเว็บไซต์การพนันออนไลน์ที่มีคนมา สมัคร Gclub Royal1688
    และยังมีหวยให้คุณได้เล่น สมัครหวยออนไลน์ ได้เลย
    สมัครสมาชิกที่นี่ >>> Gclub Royal1688
    ร่วมลงทุนสมัครเอเย่นคาสิโนกับทีมงานของเราได้เลย

    ReplyDelete
  6. Enjoyed studying this, very good stuff, thanks.
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร Gclub กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> goldenslot
    สนใจร่วมลงทุนกับเรา สมัครเอเย่น Gclub คลิ๊กได้เลย

    ReplyDelete
  7. Best Transport Company Afash Awali
    Risks of manual or conventional handover:
    It is difficult to do it aloneارخص شركة نقل اثاث

    ReplyDelete
  8. Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration, both of which I need, thanks to offer such a helpful information here.
    Are You looking for best online courses and free webniars you just click following links
    Online Certificate Courses
    Machine Learning Online Courses
    Best Online Certificate Courses In India
    Online Courses On Digital Marketing
    Online It Courses In India

    ReplyDelete
  9. great article, I was very impressed about it, wish you would have stayed next share
    fleeing the complex

    ReplyDelete
  10. Nice blog,I understood the topic very clearly,And want to study more like this.
    Data Scientist Course

    ReplyDelete
  11. SAP FICO Training in Bangalore with 100% placement. We are the Best SAP FICO Training Institute in Bangalore. Our SAP FICO courses are taught by working professionals who are experts in.

    sap fico training in bangalore

    sap fico courses in bangalore

    sap fico classes in bangalore

    sap fico training institute in bangalore

    sap fico course syllabus

    best sap fico training

    sap fico training centers

    ReplyDelete
  12. Data Analytics Course in Bangalore with 100% placement. We are the Best Data Analytics Course Institute in Bangalore. Our Data Analytics course and Certification courses are taught by working professionals who are experts in Data Analytics.

    Data Analytics Training in Bangalore

    Data Analytics course in bangalore

    Data Analytics in bangalore

    Data Analytics classes in bangalore

    Data Analytics course institute in bangalore

    Data Analytics course and Certification course syllabus

    best Data Analytics course

    Data Analytics course centers

    ReplyDelete
  13. It's nice to see your writing, which is exactly what I need, it's very detailed dowload brawl stars apkxyz

    ReplyDelete
  14. Among other courses, international relations coursework writing services has become popular since students seek international relations research paper services and international relations essay writing services.

    ReplyDelete
  15. Best Corporate Video Production Company in Bangalore and top Explainer Video Company in Bangalore , 3d, 2d Animation Video Makers in Chennai.
    Your article is awesome!! Really helpful to filmmaker wannabes. 🙂 Cheers!

    ReplyDelete
  16. Attend The Data Analyst Course From ExcelR. Practical Data Analyst Course Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Analyst Course.
    Data Analyst Course

    ReplyDelete
  17. It is perfect time to make some plans for the future and it is time to be happy. I've read this post and if I could I desire to suggest you some interesting things or suggestions. Perhaps you could write next articles referring to this article. I want to read more things about it!

    Data Science Course

    ReplyDelete
  18. I’m happy I located this blog! From time to time, students want to cognitive the keys of productive literary essays composing. Your first-class knowledge about this good post can become a proper basis for such people. nice one

    Data Science Training

    ReplyDelete
  19. After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article.

    SAP Online Training

    SAP Classes Online

    SAP Training Online

    Online SAP Course

    SAP Course Online

    ReplyDelete
  20. I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the beginning to the end. I would like to read newer posts and to share my thoughts with you.

    SAP Online Training

    SAP Classes Online

    SAP Training Online

    Online SAP Course

    SAP Course Online

    ReplyDelete
  21. Accounting Coursework Writing Services are hard to come across for those in need of Accounting Writing Services and accounting essay writing services.

    ReplyDelete
  22. Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.

    SAP HCM Online Training

    SAP HCM Classes Online

    SAP HCM Training Online

    Online SAP HCM Course

    SAP HCM Course Online

    ReplyDelete
  23. The blog which you have shared is more innovative… Thanks for your information.
    https://www.krishnawellness.com/

    ReplyDelete
  24. Thanks for posting useful information.You have provided an nice article,
    https://www.apponix.com/AWS-Essentials-Solutions-Architect/AWS-solution-arcchitect-training-in-bangalore.html

    ReplyDelete
  25. Really Great article to help various Trainee and Beginners to know about Machine Learning and Get trained from good Institute.
    https://www.apponix.com/Digital-Marketing-Institute/Digital-Marketing-Training-in-Bangalore.html

    ReplyDelete
  26. Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
    java training in chennai

    java training in omr

    aws training in chennai

    aws training in omr

    python training in chennai

    python training in omr

    selenium training in chennai

    selenium training in omr

    ReplyDelete
  27. Attend online training from one of the best training institute Data Science Training in Hyderabad

    ReplyDelete
  28. Awesome blog with great information thanks for sharing waiting for next updated.

    Data Science Training in Hyderabad

    ReplyDelete
  29. Came across your blog found very interesting thanks for sharing.
    Data Analytics Certification Training

    ReplyDelete
  30. It is important to seek statistics coursework writing services and statistics essay writing services since students find help when they visit Business Statistics Writing Services.

    ReplyDelete