Using Nivoslider in Silverstripe CMS

  1. Download Nivo Slider – http://dev7studios.com/nivo-slider/
  2. Upload the css files and js files to yourtheme/ folder css under css folder and jquery.nivo.slider.js under js folder
  3. Add nivoslider css to yourtheme/templates/Page.ss file:
    <% require themedCSS(nivo-slider) %>
  4. Add HomePage.php to mysite/code folder using code:
    <?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')); 
          }    
       }
    }
    ?>
  5. Add Slide.php to Mysite/code folder with code:
    <?php
    class Slide extends DataObject
    {
    	static $db = array ( 
    	'Slidename' => 'Text',
    	); 
    	static $has_one = array ( 
    	'Slider' => 'Slider',
    	'Photo' => 'Image'
    	); 
    	public function getCMSFields_forPopup()
    	{
    	return new FieldSet( 
    		new TextField('Slidename', 'Slide name'),
    		new FileIFrameField('Photo', 'Photo') 
    		);
    	}
    }
    ?>
  6. Add Slider and js to Yourtheme/templates/Layout/HomePage.ss:
    <div id="slider">
    	<% control Slides %>
    		$Photo.Setwidth(900) // width is set to:900px
    	<% end_control %>
    </div>
    <script type="text/javascript" src="themes/yourthemename/js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="themes/yourthemename/js/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
     $('#slider').nivoSlider({
     effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
     slices: 15, // For slice animations
     boxCols: 8, // For box animations
     boxRows: 4, // For box animations
     animSpeed: 500, // Slide transition speed
     pauseTime: 6000, // How long each slide will show
     startSlide: 0, // Set starting Slide (0 index)
     directionNav: true, // Next & Prev navigation
     controlNav: false, // 1,2,3... navigation
     controlNavThumbs: false, // Use thumbnails for Control Nav
     pauseOnHover: true, // Stop animation while hovering
     manualAdvance: false, // Force manual transitions
     prevText: 'Prev', // Prev directionNav text
     nextText: 'Next', // Next directionNav text
     randomStart: false, // Start on a random slide
     beforeChange: function(){}, // Triggers before a slide transition
     afterChange: function(){}, // Triggers after a slide transition
     slideshowEnd: function(){}, // Triggers after all slides have been shown
     lastSlide: function(){}, // Triggers when last slide is shown
     afterLoad: function(){} // Triggers when slider has loaded
     });
    });
    </script>
  7. Build database and flush using yoursitename.com/dev/build?flush=all
  8. Required modules Dataobjectmanager and Uploadify

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 *


6 + = 12

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>