Incorporating LayerSlider into Magento Front End

Jun 12, 2014
admin
Slide background

FRESH FEATURES

for starter

Slide background

SPICY PARALLAX EFFECT

for main course

Slide background

SWEET TRANSITIONS

for dessert



LayerSlider 5 is one of the most fully featured slider on the market, it is available for download as both a WordPress Plugn and as raw JQuery/CSS code, as this is is a guide on how to incorporate LayerSlider with Magento we’ll need the non WordPress version, available here:

http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/

As the most likely scenario is that you will want to use LayerSlider on the Magento Homepage, I’ll base this guide around that although it is equally relevant to any Magneto CMS page.

1, Firstly we’ll need to upload the resource files, all file go in your active theme folder:
/skin/****/****/css/layerslider.css
/skin/****/****/css/blank.gif
/skin/****/****/js/greensock.js
/skin/****/****/js/jquery.js (you probably have Jquery already loaded on the page so most likely you should ignore this, check on your page source)

/skin/****/****/js/layerslider.kreaturamedia.jquery.js
/skin/****/****/js/layerslider.transitions.js
/skin/****/****/skins/

We’ll also need to create a blank file to control the slider in the next steps

/skin/****/****/js/jquery.run.js

2, The second step is to create a template file that will be called by the CMS XML and in turn will call resource files on the page, again this will need to reside in your current theme folder:

/app/****/****/template/layerslider/layerslider.phtml

The contents of the file should be:

<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('css/layerslider.css'); ?>" media="all" />
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/greensock.js'); ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/layerslider.transitions.js'); ?>"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/layerslider.kreaturamedia.jquery.js'); ?>"></script>

This is presuming you have Jquey 1.7 or later loaded, if not you’ll need to include it as a script and as above in step 1.

3, Now we’ll need to link to these files from the CMS page, this can be done by calling a template file from the Admin CMS

Login in to the MAgento Admin and navigate to:
CMS -> Pages -> Home (or what you have called you hompepage CMS) -> Design

Enter the following:

<reference name="before_body_end">
    <block type="core/template" name="layerslider" template="layerslider/layerslider.phtml" />
</reference>

Ensure the JS scripts are called after the Jquery.js

4, Now all that is left is to create the HTMl and CSS for the slides, this code should be entered in to the relevant CMS page:
CMS -> Pages -> Home (or what you have called you hompepage CMS) -> Design
A guide to the Markup is available in the Docs of the Layerslider5 downlaod, the Layerslider docs will also guide you through setting up the slider with JS, this should be entered in to the jquery.run.js created in Step 1, the contents should look something like this:

// avoid PrototypeJS conflicts
var $jQ = jQuery.noConflict();
/*
Use $jQ(document).ready() because Magento executes Prototype inline.
*/
$jQ(document).ready(function($){
// LayerSlider
// Calling LayerSlider on the target element
        $('#layerslider').layerSlider({
 
            responsive: false,
			responsiveUnder: 960,
			layersContainer: 960,
			skin: 'noskin',
			hoverPrevNext: false,
//this must be the full path to the skins folder
			skinsPath: '/skin/****/****/skins/'
		 });
});  // END $jQ(document).ready()

I hope my guide proves useful.

close
Facebook IconTwitter IconVisit Joe on Linked In