Using Flexslider and Carousel in Silverstripe CMS

Modules needed:

  1. Install dataobjectmanager and uploadify
  2. Download flexslider
  3. Upload FlexSlider/demo/js folder to themes/yourthemename/ folder
  4. Upload file FlexSlider/jquery.flexslider.js to themes/yourthemename/js folder
  5. Upload file FlexSlider/flexslider.css to themes/yourthemename/css folder
  6. Add HomePage.php inside mysite/code folder:
    <?php
    class HomePage extends Page {
       static $has_many = array (
    		'Slides' => 'Slide'
    	);
    	public function getCMSFields()
    	{
    		$f = parent::getCMSFields();
    		$manager = new DataObjectManager(
    			$this, // Controller
    			'Slides', 
    			'Slide',
    			array(
    			'Slidename' => 'Slidename'
    			), 
             'getCMSFields_forPopup' 
          ); 
          $f->addFieldToTab('Root.Content.Main', $manager); 
          return $f; 
    	}
    }
    class HomePage_Controller extends Page_Controller
    {
    function show(){ 
          return array(); 
       } 
    function Slide(){ 
          if(isset($this->request) && $this->request->param('ID')){ 
             return DataObject::get_by_id('Slide', (int)$this->request->param('ID')); 
          }    
       }
    }
  7. Add Slide.php inside mysite/code folder:
    <?php
    class Slide extends DataObject
    {
    	static $db = array(
    	'Slidename' => 'Text',
       	);
       static $has_one = array(
       	'HomePage' => 'HomePage',
    	'Photo' => 'Image'
       	);
    	public function getCMSFields_forPopup()
    	{
    	return new FieldSet( 
    		new TextField('Slidename', 'Name of slide'),
    		new ImageField('Photo', 'Slide photo'),
    		);
    	}
    	function Link(){ 
    		return $this->HomePage()->Link() .'show/'.$this->ID;    
    	}
    }
    ?>
  8. Make HomePage.ss under themes/yourtheme/templates/Layout using code in it:
    ...
    <div id="wrapper">
    	<div id="sliderwrapper">
    		<div id="slider" class="flexslider">
    			<ul class="slides">
    			<% control Slides %>
    			<li>
          <img alt="" src="$Photo.URL" />
    			</li>
    			<% end_control %>	
    			</ul>
    		</div>
    		<div id="carousel" class="flexslider">
    			<ul class="slides">
    			<% control Slides %>
    			<li>
    			<% control Photo %>
    			<img alt="" src="setheight(100).URL" />
    			<% end_control %>
    			</li>
    			<% end_control %>
    			</ul>
    		</div>
    <div class="clear"><!-- --></div>
    <!-- jQuery -->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
    
      <!-- FlexSlider -->
      <script defer src="themes/yourtheme/js/jquery.flexslider.js"></script>
    
    <script type="text/javascript">
    $(window).load(function() {
      // The slider being synced must be initialized first
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: true,
        itemWidth:100,
        asNavFor: '#slider',
    		minItems: 9
      });
    
      $('#slider').flexslider({
        animation: "fade",
        controlNav: false,
        animationLoop: true,
        slideshow: true,
        sync: "#carousel"
      });
    });
    </script>
    
      <!-- Syntax Highlighter -->
      <script type="text/javascript" src="themes/yourtheme/js/shCore.js"></script>
      <script type="text/javascript" src="themes/yourtheme/js/shBrushXml.js"></script>
      <script type="text/javascript" src="themes/yourtheme/js/shBrushJScript.js"></script>
    
      <!-- Optional FlexSlider Additions -->
      <script src="themes/yourtheme/js/jquery.easing.js"></script>
      <script src="themes/yourtheme/js/jquery.mousewheel.js"></script>
      <script defer src="themes/yourtheme/js/demo.js"></script>
    </div>
    ...
  9. Add <% require themedCSS(flexslider) %> line inside <head> tag
  10. Add those lines to themes/yourtheme/css/Layout.css file:
    #wrapper {
    	background:#FF0000;
    	position:relative;
    	min-height:0px;
    	padding:5px 0;
    	-moz-box-shadow: 0px 6px 8px #000;
    	-webkit-box-shadow: 0px 6px 8px #000;
    	box-shadow: 0px 6px 8px #000;
    	margin:0;
    	overflow-x:hidden;
    }
    #sliderwrapper{
    	width:900px;
    	margin:0 auto;
    	padding:10px 0;
    }
  11. Rebuild your site database using www.yoursitename.com/dev/build?flush=1
  12. Start adding slides to homepage.

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *


8 + 3 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>