Dynamic Scrolling image creation using JavaScript

Step 1: Create a list named "Header-Scrollable-Images"
Step 2: Create a choice column with the value of "Yes / No"
Step 3: Create a column of hyperlink / Picture.

Site Actions --> Edit Page --> Add a Web part --> Select Content Editor Web part

Add the Script in a txt file and refer the file in the CEWP
or
Paste the below code directly in CEWP

<div id="sliderFrame">
</div>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(loadSharePointPictures, 'sp.js');
function loadSharePointPictures() {
    //fetch the list of items using the client object model
    var context = new SP.ClientContext.get_current();
    //get the current website
    var web = context.get_web();
    //get the pictures list
    var list = web.get_lists().getByTitle('Header-Scrollable-Images');
    //create the query to get all items
    //var query = SP.CamlQuery.createAllItemsQuery();
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Contains><FieldRef Name=\'ShowinScroll\'/>' +
        '<Value Type=\'Choice\'>Yes</Value></Contains></Where></Query></View>');
    //get all items from the query
    pictures = list.getItems(camlQuery);
    //load the context
    context.load(pictures, 'Include(FileLeafRef,FileDirRef)');
    //execute the query in async mode
    context.executeQueryAsync(
        Function.createDelegate(this, this.success),
        Function.createDelegate(this, this.failed));
}
function success(sender, args) {
    pictureArray = new Array();
    var pictureCount = 0;
    var enumerator = this.pictures.getEnumerator();
    while(enumerator.moveNext()) {
        var currentItem = enumerator.get_current();
        var filename = currentItem.get_item('FileLeafRef');
        /*filename = filename.replace('.', '_');
        filename += '.jpg';*/
        var dir = currentItem.get_item('FileDirRef');
        filename = dir + '/' + filename;
        pictureArray[pictureCount++] = filename;
    }
    var newHtml = '';
  newHtml += '<div id="slider">';
    for(i=0; i<this.pictureArray.length; i++) {
        newHtml += '<img  src="';
        newHtml += this.pictureArray[i];
        newHtml += '" />';
    }
 newHtml += '</div>';
    $('#sliderFrame').html(newHtml);
}
function failed(sender, args) {
    $('#sliderFrame').html(args.get_message());
}
</script>

Comments

Post a Comment

Popular posts from this blog

Activating a SharePoint Feature on Multiple Sites or Site Collections using PowerShell

I need to either activate or even deactivate certain features on multiple site collections. So the below script will allow you to do this.. First step create a text file in the below format, you only need to define the URL for each Site collection or site. SiteURL http://sharepointsuresh/sites/site1 http://sharepointsuresh/sites/site2 http://sharepointsuresh/sites/site3 http://sharepointsuresh/sites/site4 http://sharepointsuresh/sites/site5 http://sharepointsuresh/sites/site6 You can list all features installed on your sites by using the following PowerShell: Get-SPFeature | Sort -Property Scope,DisplayName | FT -GroupBy Scope DisplayName,Id Then use the below PowerShell Script: $SiteList = Import-Csv Sites.txt ForEach ($item in $SiteList) {             If ($item -ne $null)             {                 Write-Host "Activated Branding Feature for: $($item.SiteURL)" -...
Read more

Managed Path with WildCard and Explicit Inclusion

I thought to put an article on Managed Paths in SharePoint covering their use with Explicit Inclusion and Wildcard Inclusion and also how to use them in Real World scenarios So let’s see what Managed Path is Managed Path: By default when we create Site Collections inside a Web Application in SharePoint they are created with the URL “http://servername:portnumber/site”.  But if we want to have a specific URL other than “/site” we need to create Managed Path. So as an example if we want to create Site Collections for IT and HR Dept and want to have URL's like “http://servername:portnumber/IT” and “http://servername:portnumber/HR” we can do with the help of Managed Paths. Managed Path helps to have site collection with the URL other than “/site”. Managed Path can be created in Central Administration in Application Management under SharePoint Web Application Management. When we create Managed Path either we can select Explicit Inclusion or Wildcard Inclusion. So let’s see what ...
Read more

List All SharePoint 2010 PowerShell Commands

Use this PowerShell command to output a list of all cmdlets that are found within the SharePoint 2010 namespace: Get-Command –PSSnapin “Microsoft.SharePoint.PowerShell” | format-table name > C:\SP2010_PowerShell_Commands.txt If you would like a little more detail, then try this one: Get-Command –PSSnapin “Microsoft.SharePoint.PowerShell” | select name, definition | format-list > C:\SP2010_PowerShell_Commands.txt
Read more