Description
In this post I’m going to demonstrate how to create a Sitefinity MVC based slider widget that incorporates the Parallax scrolling effect for its animation transitions. If you’re not familiar with this effect, Parallax scrolling is a CSS3/JQuery effect where by the various elements within a div container move dynamically and independently of one another. It’s a very nice and easy “sizzle” addition to a standard slider.
As usual I’m totally lifting my examples from an external source and adding/integrating them with my personal Sitefinity project, so before I begin let me give props to Mary Lou on Codrops for her tutorial: PARALLAX CONTENT SLIDER WITH CSS3 AND JQUERY. If you’d like to see what all the fuss is you can also find a demonstration of the slider there. Oh yeah, don’t forget to grab the files while you’re on the site, we’ll need them later.
While this tutorial is pretty straight forward and accessible to CSS3, JQuery, Visual Studio and Sitefinity novices, this post does assume that you have at least a general understanding of developing custom Sitefinity MVC widgets using Thunder and Visual Studio. If you are new to Sitefinity development, then I’d suggest looking at this resource about creating custom MVC widgets, first.
A Git repository for the slider will be linked below.
Prerequisites:
- Sitefinity website
- Visual Studio
- Sitefinity Thunder plugin
End result of tutorial
- Custom Module
- MVC Slider Widget
- Image Library
Create a new Image Library
Let’s start off with the easiest stuff first. Login to your Sitefinity project, go to the Dashboard, click on the “Content” menu and then select “Images”. Click on the “Create a library” button and give your new library a name. Feel free to call it whatever you’d like.
Now we’ll need to upload a few images that came with the files you downloaded from the Codrop site.
- 1.png
- 2.png
- 3.png
- 4.png
Adding our Styles
Now we’ll need to add the CSS and JQuery files that came with the zip you downloaded from the Codrop site.
I created a folder in my project to hold all my styles called “~/custom/styles” with three sub-folders, “css/parallax”, “img/ parallax” and “js/ parallax”. See image below for an example:
Feel free to adjust the folder structure as you see fit, but make sure to adjust the paths in your view if you happen to download the Github repository view. If you do change the folder paths, then remember to also update the image paths in your css files accordingly.
Please note that the “img” folder is for images, like buttons, that are used to control the Slider rotation and not for the images displayed in the Slider itself.
Creating your Custom Module
Now let’s create our custom module that we will use to supply our Slider’s content.
- Go to Administration à Module Builder:
- Click the “Create a module” button:
- Give the module the following name and description, then click continue:
- Feel free to “Name” this whatever you’d like, but again, if you use the github files I will link below, then you will need to update the MVC controller with the correct module namespace. I will note where to do this below in the code snippets.
- Add the following fields to your module:
- Set this to “Only one image…” within the Limitations tab
- Click the “Finish” button and then “Activate” your module
- IMPORTANT FOR MSM USERS ONLY – If you are using MSM, then you will need to include this module with your site by going to the “Configure modules” dialog within the MSM “Manage sites” screen. I’ve set my custom module to Default to the Default provider – see image below. I’d suggest doing the same or be ready to update the MVC controller with the correct provider. I will note where to do this below.
Create your new Custom Module Items
Go to the “Content” menu à click on “Parallax Items”. Create 4 items using the 4 images and associated text from the Codrop tutorial. For example item one might be:
- Title: Warm welcome
- Details: When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.
- Page Selector: Select the page you want to link to
- Image: Select one of the images you uploaded earlier
Create a Thunder MVC Widget
Now let’s go to our Sitefinity project in Visual Studio and create a MVC Widget with Sitefinity Thunder. I called my MVC widget “SliderMVC”. You can call your widget whatever you’d like, but just be sure that if you use my code you adjust the namespaces as/if needed. We will not be creating a designer in this tutorial, so you can leave the “Create Designer” checkbox unchecked during the Thunder wizard. Finish up the rest of the Thunder wizard steps until it’s completed.
Thunder will create your controller, model and view automatically for you. They can be found in your “~/Mvc/Controllers”, “~/Mvc/Models” and “~/Mvc/Views/SlidersMVC” folders. The widget will also be auto-registered with Sitefinity, so that the next time you run your project you can drag/drop your widget on to a page as needed.
I’m not going to go in-depth about how to use our Custom Module’s API. There are many resources that explain how to do this in great detail, so please refer to them if you’d like more info before proceeding. I will however provide the code as I have it in my classes and view. It will also be available be in the Github repository linked below.
Add the following code to your Model:
using System;
using System.Collections.Generic;
using System.Linq;
using Telerik.Sitefinity.DynamicModules.Model;
using Telerik.Sitefinity.Libraries.Model;
using Telerik.Sitefinity.Model;
using Telerik.Sitefinity.RelatedData;
namespace SitefinityWebApp.Mvc.Models
{
public class SliderMVCModel
{
public List<
ParallaxItem
> ParallaxItems
{
get;
private set;
}
public class ParallaxItem
{
private string title;
private string details;
private string itemUrl;
private string imageUrl;
private string imageAlt;
public string Title
{
get { return title; }
set { title = value; }
}
public string Details
{
get { return details; }
set { details = value; }
}
public string ItemUrl
{
get { return itemUrl; }
set { itemUrl = value; }
}
public string ImageUrl
{
get { return imageUrl; }
set { imageUrl = value; }
}
public string ImageAlt
{
get { return imageAlt; }
set { imageAlt = value; }
}
}
public SliderMVCModel(IQueryable<
DynamicContent
> items)
{
this.ParallaxItems = SetParallaxItems(items);
}
public List<
ParallaxItem
> SetParallaxItems(IQueryable<
DynamicContent
> items)
{
List<
ParallaxItem
> parallaxItems = new List<
ParallaxItem
>();
foreach (var item in items)
{
ParallaxItem parallaxItem = new ParallaxItem();
parallaxItem.Title = item.GetValue<
Lstring
>("Title");
parallaxItem.Details = item.GetValue<
Lstring
>("Details");
IDataItem pageSelectorItem = item.GetRelatedItems("PageSelector").FirstOrDefault();
parallaxItem.ItemUrl = pageSelectorItem.GetDefaultUrl();
//getting the image
Image imageField = item.GetRelatedItems<
Image
>("Image").SingleOrDefault();
//getting the url
parallaxItem.ImageUrl = imageField.Url;
parallaxItem.ImageAlt = imageField.AlternativeText;
parallaxItems.Add(parallaxItem);
}
return parallaxItems;
}
}
}
Add the following code to your Controller:
using
System;
using
System.ComponentModel;
using
System.Linq;
using
System.Web.Mvc;
using
Telerik.Sitefinity.Mvc;
using
SitefinityWebApp.Mvc.Models;
using
Telerik.Sitefinity.GenericContent.Model;
using
Telerik.Sitefinity.DynamicModules.Model;
using
Telerik.Sitefinity.DynamicModules;
using
Telerik.Sitefinity.Utilities.TypeConverters;
namespace
SitefinityWebApp.Mvc.Controllers
{
[ControllerToolboxItem(Name =
"SliderMVC"
, Title =
"SliderMVC"
, SectionName =
"MvcWidgets"
)]
public
class
SliderMVCController : Controller
{
[Category(
"String Properties"
)]
public
string
LibraryName {
get
;
set
; }
/// <summary>
/// This is the default Action.
/// </summary>
public
ActionResult Index()
{
var items = RetrieveCollectionOfParallaxItems();
var model =
new
SliderMVCModel(items);
return
View(
"Default"
, model);
}
/// <summary>
/// Gets all images in a library with a status of live
/// </summary>
/// <returns></returns>
public
IQueryable<DynamicContent> RetrieveCollectionOfParallaxItems()
{
var providerName =
"OpenAccessProvider"
;
DynamicModuleManager dynamicModuleManager = DynamicModuleManager.GetManager(providerName);
Type parallaxitemType = TypeResolutionService.ResolveType(
"Telerik.Sitefinity.DynamicTypes.Model.ParallaxItems.Parallaxitem"
);
var myCollection = dynamicModuleManager.GetDataItems(parallaxitemType).Where(p => p.Status == ContentLifecycleStatus.Live);
return
myCollection;
}
}
}
- Important if you called your Custom Module something else, then you will need to change the TypeResolution namespace to whatever you called yours. It can be found in the provided api documentation, but it’s usually in this format:
- Telerik.Sitefinity.DynamicTypes.Model.CustomModuleNamePlural.CustomModuleNameSingle
- Important if you set your MSM configure modules to a different provider, then you will need to update this line accordingly:
- var providerName = "SomeDifferentProviderName";
Add the following code to your View:
@model SitefinityWebApp.Mvc.Models.SliderMVCModel
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"/Custom/Styles/css/Parallax/demo.css"
/>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"/Custom/Styles/css/Parallax/style.css"
/>
<
script
type
=
"text/javascript"
src
=
"/Custom/Styles/js/Parallax/modernizr.custom.28468.js"
></
script
>
<
link
href
=
'http://fonts.googleapis.com/css?family=Economica:700,400italic'
rel
=
'stylesheet'
type
=
'text/css'
>
<
noscript
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"/Custom/Styles/js/Parallax/nojs.css"
/>
</
noscript
>
<
div
class
=
"container"
>
<
div
id
=
"da-slider"
class
=
"da-slider"
>
@foreach (var parallaxItem in Model.ParallaxItems)
{
<
div
class
=
"da-slide"
>
<
h2
>@Html.Raw(parallaxItem.Title)</
h2
>
<
p
>@Html.Raw(parallaxItem.Details)</
p
>
<
a
href
=
"@Html.Raw(parallaxItem.ItemUrl)"
class
=
"da-link"
>Read more</
a
>
<
div
class
=
"da-img"
><
img
src
=
"@Html.Raw(parallaxItem.ImageUrl)"
alt
=
"@Html.Raw(parallaxItem.ImageAlt)"
/></
div
>
</
div
>
}
<
nav
class
=
"da-arrows"
>
<
span
class
=
"da-arrows-prev"
></
span
>
<
span
class
=
"da-arrows-next"
></
span
>
</
nav
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
src
=
"/Custom/Styles/js/Parallax/jquery.cslider.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(function() {
$('#da-slider').cslider();
});
</
script
>
Putting it All Together
Finally we need to login to the back-end of our Sitefinity site and start creating a page to host the SliderMVC widget.
- Go to the “Pages” section of the back-end
- Create a new page if needed
- Open your new Page for edit
- On the right side expand the “MvcWidgets” section of the “Drag widgets” menu and drag/drop your SliderMVC widget on to your Page.
Finally publish your Page and then “View” the live version of it. If all is setup correctly, then you should see a Slider with 4 items on a yellow background populated with the content and media files you specified in your module’s content items.
Remember that if you change any paths to folders or names of files, then you will need to update the associated files accordingly.
A public Github repository has been created for this blog post.