- Download Nivo Slider – http://dev7studios.com/nivo-slider/
- Upload the css files and js files to yourtheme/ folder css under css folder and jquery.nivo.slider.js under js folder
- Add nivoslider css to yourtheme/templates/Page.ss file:
<% require themedCSS(nivo-slider) %>
- 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')); } } } ?>
- 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') ); } } ?>
- 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>
- Build database and flush using yoursitename.com/dev/build?flush=all
- Required modules Dataobjectmanager and Uploadify
Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!