Installing PortalFront Tru Slider 3.0

What is provided

A zip file with the files needed

This video provides a good overview of the slider setup that will help guide you in the installation. It does not provide as much detail as this post.

https://db.tt/ptN3OPv8

Instructions

Copying the files

  • Go to your root site collection where you wish to place the slider code base.
  • Go to Site Actions -> View All Site Content -> Style Library
  • Create a folder called "PortalFrontSlider"
  • Copy the contents of the zip file into the folder.

    Create News Blog Site (Optional)

    NOTE: If you don’t already have a list that you wish to use, proceed with creating a blog site per our recommendation here. If you have your own list you can customize the slider to use that list. You may skip to "Placing the slider in SharePoint"

  • Go to the root site collection where you wish to house the content of the slider.
  • Go to Site Actions -> New Site
  • Find and select the "Blog" template
  • Provide a name for the site such "News"
  • Provide "news" as the URL

    Adding the columns to the blog List

  • Navigate to the Blog Site you created in the previous step.
  • Go to Site Actions -> View All Site Content
  • Click on Posts list
  • Add the following columns to the list
    Summary Multiple Lines of text (with Plain text) Make this field mandatory.
    Set the maximum character size to 170
    Expires Date and Time   
    Image Multiple Lines of text with Enhanced Rich text   

    Ensure that the columns match this screenshot


        Add a few test items to the blog and include some pictures. Make sure the Published Date is set in the future of the items so that they appear on the slider once it is placed on the page.

    Add Content to your Blog Posts

    Make sure you add some content to the news list for the slider to show.

  • Make sure you populate the Expires and Published Date. Expires Should be in the future and Published should be in the past.
  • Make sure you include an image.

    Placing the Slider in SharePoint

  • Navigate to the page where you wish to place the news slider web part
  • Add a Content Editor Webpart by clicking on Site Actions -> Edit Page
  • Click on "Insert Tab" in the Ribbon
  • Click on "Web Part"
  • Under Categories, click on "Media and Content"
  • Under Web Parts, click on "Content Editor"
  • Click "Add"
  • Once added, Edit the web part:
  • On the Content Editor Properties that appears on the right hand side of the page (you may have to scroll), type in the location of the sliderScript.js you uploaded earlier to the Styles Library folder.

    Note: It is preferred that you use a domain relative path. Here are some examples:

    Path of slider script What to put in the content editor
    https://company.com/Style Library/PortalFrontSlider/sliderScript.js /Style Library/PortalFrontSlider/sliderScript.js
    https://company.com/sites/siteA/Style Library/PortalFrontSlider/sliderScript.js /sites/siteA/Style Library/PortalFrontSlider/sliderScript.js

    Warning: make sure you include the "/" at the beginning of the path.

    /Style Library/PortalFrontSlider/sliderScript.js

  • Click ok and save the page.

    The slider will not show until the settings have been applied. See next section.

    Editing the Settings

    Editing the Settings

    Location of Slider on the Page

    The slider script will load the slider in the html DIV tag with the ID provided in the settings (as will be described below). Currently we already loaded the sliderscript.js file with the DIV tag.

    You can locate this DIV tag by looking for this block in sliderscript.js

    <div id="slider_1" class="slider">
            <div class="flexslider">
                <ul class="slides"></ul>
            </div>
            <ul class="slides-nav-tabs"></ul>
        </div>

     

    As you can see, the id of the slider here is slider_1. If yours is different it’s ok. As long as this ID matches the settings below.

    Editing the Settings

    Now you must edit the settings of the slider to reflect your environment. Open Sliderscript.js, find the settings portion and edit the variables.

    The block you’re looking for will look like this:

    var slider_1= new sliderBuilder($, ‘#slider_1’, {
                slideshow: false,
                sliderpath: sliderpath,
                showArrows: true,
                varListType: 1,
                varListPath: "/News",
                varListName: "Posts",
                varInternalListName: "Posts",
                varFieldExpiresOn: "Expires",
                varFieldPublishOn: "PublishedDate",
                varFieldOrderBy: "PublishedDate",
                varFieldImage: "Image",
                varFieldTitle: "Title",
                varFieldSummary: "Summary",
                varAlternateLinkField: ""
            });

     

    Parameter Your Must Change

    slider_1 This should match the ID of the DIV tag where you want to place the slider
    sliderpath Modify the sliderpath variable at the top of sliderscript.js file. This is the location of the the scripts for the slider.
    varListPath Make sure the path starts with forward slash and doesn’t end with forward slash. This is the site where the blog site is.

    Example 1: /News
    Example 2: /sites/dept/blog

    Parameters you May Want to Change

    varListType Set to 1 if using a blog list and 2 if using a Pages list
    varInternalListName The internal name of the list you want to read data from.
    set to ‘posts’ for blogs
    varFieldExpiresOn The internal name of the field to use to expire the post and make it disappear. On that date the slider will no longer show the post.
    varFieldPublishOn The internal name of the field to use to automatically show the item in the slider. Before that date, the item will be hidden.
    varFieldOrderBy The internal name of the field to sort by.
    varFieldImage The internal name of the field rich text field to use that will hold the image.
    varFieldTitle The internal name of the field that contains the title of the news item.
    varFieldSummary The internal name of the field that contains the summary that shows below the title.
    varAlternateLinkField By default, clicking on the slide will take you to the slide post. However if you wish to have a slide go to a custom link (such as an external website or PDF) then specify the target destination in this field. Leave blank for default. If you do specify a field here and the a news item doesn’t have a overwriting link, the default behavior is to create a link to the default item or post.

    At this point the slider will show.

     

    Separating the DIV from Sliderscript.js (Optional)

    By default the slider will appear wherever you placed the sliderscript.js web part. However you have more control.

    The slider is rendered automatically in the html div tag with id you set in the parameter. By default it is in sliderscript.js

    However it best practice to put this script towards the end of the page for lazy loading and then inserting the <div id=’xyz’> anywhere you want the slider on the page. This is optional.

    Many Sliders on the Same Page

    You can place many sliders with different settings on the same page. This is done by adding a new DIV with a new ID to the page, then adding another slider settings section in sliderscript.js that points to that new ID

    Placing Different Slider on Different Pages

    You can place different sliders on different pages of your SharePoint site. This is done by cloning sliderscript.js file and pointing to that instead on the different pages. Each page will have its own script file.

    Example.

    Page 1 can use sliderpage1.js

    Page 2 can use sliderpage2.js

    When you clone the files simply keep them in the same folder. No need to copy the files to the other site or change its location. When you place the content editor webpart on the page, make sure you repeat the setup steps except this time point the content Editor to the new file instead of sliderscript.js.

    Troubleshooting

    If the slider does not load use this guide to identify the issue:

  • Possible Issue  Verify that this is an issue  Resolution 
    The content editor web part is not referencing the correct path of sliderScript.js  Copy the value in the content editor web part.
    Navigate to the path: [domain]/[value in content editor]
    Example:
    Value = /Style Library/PortalFrontSlider/sliderScript.js
    Domain = https://companysite.sharepoint.com

    Navigate to : https://companysite.sharepoint.com/Style Library/PortalFrontSlider/sliderScript.js

    If navigating to this location results in no page found, then there is a problem with the path inside the Content Editor link.

    Navigate to library where the sliderscript.js file is located. Right click on the file and click "Copy link address" in Chrome or "Copy Shortcut" IE
    Copy the complete part right after the domain and paste it into the content editor content link field.
    There is no content in the lists  Navigate to the list and check to see if there is content.  Add content to the list.
    No Expires or Publish dates are set  Navigate to the list and the list item and make sure and check if those fields are populated. Populate those fields and make sure that Publish date is less that today’s date and the expires field is greater than todays date.
    The Sliderscript.js is not referencing the list properly  Open up sliderscript.js using SharePoint Designer preferably.
    Look at the 
     

    Tip: try going into the browser developer tools and going into console to get any hints on any errors that the javascript may be generating. Share this with us to help you support it.

    Modifying settings

    How to modify the duration of each slide?

    Edit the provided sliderScript.js file as follows: (you may use notepad to edit it then upload it or you may use SharePoint designer to edit it directly).

  • Locate the Slider Settings section
  • Locate the intDelay =6 line.
  • Change the number 6 to the new number you need. The units are in seconds.


    How to modify the number of slides to show?

  • Edit sliderScript.js
  • Locate the Slider Settings section
  • Locate the intMaximumItems = 8 line.
  • Change the number 8 to the new number you need.

    How to completely hide the thumbs?

  • Edit sliderScript.js
  • Locate the Slider Settings section
  • Locate the boolThumbs = true line.
  • Change true to false

    How to change the format of the slider?

    There are two formats for the slider to choose from.

    Format 1 is an expanded format that shows the the thumbs and large images and titles.


    Format 2 (compact) – that shows small image thumbs for each slide.


    To change the view:

  • Edit sliderScript.js
  • Locate the DISPLAY STYLE section
  • Change the red text in the line below to either slider-style.css or compactstyle.css

    <link rel="stylesheet" href="/Style Library/PortalFrontSlider/slider-style.css" type="text/css" media="screen" />


    How change the number of thumbs per row?


    To do this:

  • Edit the CSS of choice (if working with compact view its compactstyle.css)
  • Locate the lines:

    .anythingControls .thumbNav li{

    display:inline-block;

    width:12%; /*k pecentage for each thumb*/

    margin-right: 1.2%;

    margin-bottom: 2%;

    position: relative;

    vertical-align: top;

    }

    /*change the 8n+8 to 6n+6 if you wish to wrap the thumbs after the 6th item. */

    .anythingControls .thumbNav li:nth-child(8n+8){

    margin-right: 0;

    }

  • Change the 1.2% to 5.6% ( you may play with the number to find the best fit)
  • Change the 8 in the 8n+8 to 6 so it looks like 6n+6
  • Save the file