Creating a Sitefinity MVC Slider with Parallax Effect

Creating a Sitefinity MVC Slider with Parallax Effect

Posted on November 03, 2014 0 Comments
Creating a Sitefinity MVC Slider with Parallax Effect

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

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:

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.

Image Module

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

Slider images

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:

Styles folder structure

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:

Module Builder Menu

  • Click the “Create a module” button:

     

  • Give the module the following name and description, then click continue:

     Module name

    • 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:
      • Title – Short text
      • Details – Long text
      • Page Selector – Related Data
        • Data type: Page
        • Uncheck “Multiple items from this data…” in subsequent dialog
        • “Display selected items…”: Simple link

        Page Selector 2

      • Image – Related media

        Module fields
    • Set this to “Only one image…” within the Limitations tab


      Module image limitation
    • 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.

      MSM module configuration

    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

           Content Item w Page Selector

    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.

    Main Slider

    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.

     

    David Cowart

    View all posts from David Cowart on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

    Comments

    Comments are disabled in preview mode.
    Topics

    Sitefinity Training and Certification Now Available.

    Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

    Learn More
    Latest Stories
    in Your Inbox

    Subscribe to get all the news, info and tutorials you need to build better business apps and sites

    Loading animation