Modules needed:
- Dataobjectmanager
- Uploadify
- FlexSlider
- Install dataobjectmanager and uploadify
- Download flexslider
- Upload FlexSlider/demo/js folder to themes/yourthemename/ folder
- Upload file FlexSlider/jquery.flexslider.js to themes/yourthemename/js folder
- Upload file FlexSlider/flexslider.css to themes/yourthemename/css folder
- 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')); } } } - 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; } } ?> - 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> ... - Add <% require themedCSS(flexslider) %> line inside <head> tag
- 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; } - Rebuild your site database using www.yoursitename.com/dev/build?flush=1
- Start adding slides to homepage.
Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!
