Categories

Archive

2014 Nov  186  1
2014 Jul  226  2
 
     

Flex Slider for Open Blocks

Jul 07 2014

Introduction

In this article, i will explain how to create a slider or carousel with the open source jquery plugin FlexSlider.

More info about the plugin at http://flexslider.woothemes.com/ where you have to download the plugin.

The proccess concest of :

  • Go to Template Studio
  • Create a new template
  • upload the jquery plugin files
  • Create a Razor template
  • Define de datasource for retrieving the images
  • Integrate the slider in a html module

Go to Template Studio

After installing OpenBlocks that you can download from https://openblocks.codeplex.com/ 

there is a new menu item in host menu called “Template Studio”

image

 

Create a new template

Now we create a new Widget Template.

For this select “Widgets” in the module combo box and click “Add”

image

Enter “FlexSlider” in the Template text box and click “Save”

Now you have a new empty template which correspond to a forder in  /portals/[portal id]/Widgets/Templates

Upload jquery plugin files

Now you have to upload 3 files included in the zip file you downloaded from the flexslider website.

For this click “Upload” and select the 3 files and click “Upload”.

image

 

Create Razor template

Right click on the FlexSlider folder and click “New File”

image

Enter “FlexSlider1.cshtml” and click ok.

The new created razor file apairs in the editor with 1 line.

 

Define de datasource

Now we have to define the datasource for retrieving the images.

image

Chose the directory where your images are located.

We chose here a standard images folder created by the default site template.

After save, a new file FlexSlider1.datasource is created. That you can see afer clicking on the refrech button on the top of the tree view.

And the first line of the razor file is also updated to  reflect the type of the model (datasource) that you select.

image 

Now be sure to select the razor file (FlexSlider1.cshtml) in the editor by double click on it.

If you now click on Data you can see the data coming from the datasource.

 

 

Finish the Razor Template

Add  the JS and HTML from the basic exemple of the flex slider website.

And replace all <li> with a foreach

 

 

Add the link to the css file on the top and the link to javascript and initialization on the bottom.

image

You can seee @(VirtualPath) in the path of the css and js files to refer tothe current template folder.

You can also use Template.RegisterStyleSheet and Template.RegisterJavascript to include the files in the DNN Client management.

You can find to full Template at

http://www.openextensions.net/templates/open-blocks/flexslider-responsive-slides-and-carousel

When you click on preview you see the slider working.

Integrate the slider in a HTML module.

Click on Widget and copy the text […..] to the content of a HTML module.

 

image

And now you see the sider working on you website.

You can alternativelly copy past the widget text to a Block item (in Admin, Blocks).

And this make it easyer to your end users to select the slider.

And if you use the DNN CKEditor you will see a new toolbar item , where you can select wideget, the template file and the datasourece.

image