<div id=”divFeaturedNews”>
<div class=”mtc-Slideshow” id=”divSlideShow” style=”width: 610px;”>
<div style=”width: 100%; float: left;”>
<div id=”divSlideShowSection”>
<div style=”width: 100%;”>
<div class=”mtc-SlideshowItems” id=”divSlideShowSectionContainer” style=”width: 610px; height: 275px; float: left; border-style: none; overflow: hidden; position: relative;”>
<div id=”divFeaturedNewsItemContainer”>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type=”text/javascript”>
$(document).ready(function ($) {
var basePath = “
https://richdizzcom.sharepoint.com/sites/dallasmtcauth/_api/”;
$.ajax({
url: basePath + “web/lists/GetByTitle(‘News’)/items/?$select=Title&$filter=Feature eq 1&$top=4”,
type: “GET”,
headers: { “Accept”: “application/json;odata=verbose” },
success: function (data) {
var listData = data.d.results;
for (i = 0; i < listData.length; i++) {
getItemDetails(listData, i, listData.length);
}
},
error: function (data) {
alert(data.statusText);
}
});
});
var processCount = 0;
function getItemDetails(listData, i, count) {
$.ajax({
url: listData[i].__metadata[“uri”] + “/FieldValuesAsHtml”,
type: “GET”,
headers: { “Accept”: “application/json;odata=verbose” },
success: function (data) {
processCount++;
var itemHtml = “<div class=’mtcItems’ id=’divPic_” + i + “‘ style=’width: 610px; height: 275px; float: left; position: absolute; border-bottom: 1px dotted #ababab; z-index: 1; left: 0px;’>”
itemHtml += “<div id=’container_” + i + “‘ style=’width: 610px; height: 275px; float: left;’>”;
itemHtml += “<a href=’#’ title='” + data.d.Caption_x005f_x0020_x005f_Title + “‘ style=’width: 610px; height: 275px;’>”;
itemHtml += data.d.Feature_x005f_x0020_x005f_Image;
itemHtml += “</a></div></div>”;
itemHtml += “<div class=’titleContainerClass’ id=’divTitle_” + i + “‘ data-originalidx='” + i + “‘ data-currentidx='” + i + “‘ style=’height: 25px; z-index: 2; position: absolute; background-color: rgba(255, 255, 255, 0.8); cursor: pointer; padding-right: 10px; margin: 0px; padding-left: 10px; margin-top: 4px; color: #000; font-size: 18px;’ onclick=’changeSlide(this);’>”;
itemHtml += data.d.Caption_x005f_x0020_x005f_Title;
itemHtml += “<span id=’currentSpan_” + i + “‘ style=’display: none; font-size: 16px;’>” + data.d.Caption_x005f_x0020_x005f_Body + “</span></div>”;
$(‘#divFeaturedNewsItemContainer’).append(itemHtml);
if (processCount == count) {
allItemsLoaded();
}
},
error: function (data) {
alert(data.statusText);
}
});
}
window.mtc_init = function (controlDiv) {
var slideItems = controlDiv.children;
for (var i = 0; i < slideItems.length; i++) {
if (i > 0) {
slideItems[i].style.left = ‘610px’;
}
};
};
function allItemsLoaded() {
var slideshows = document.querySelectorAll(“.mtc-SlideshowItems”);
for (var i = 0; i < slideshows.length; i++) {
mtc_init(slideshows[i].children[0]);
}
var div = $(‘#divTitle_0’);
cssTitle(div, true);
var top = 160;
for (i = 1; i < 4; i++) {
var divx = $(‘#divTitle_’ + i);
cssTitle(divx, false);
divx.css(‘top’, top);
top += 35;
}
}
function cssTitle(div, selected) {
if (selected) {
div.css(‘height’, ‘auto’);
div.css(‘width’, ‘300px’);
div.css(‘top’, ’10px’);
div.css(‘left’, ‘0px’);
div.css(‘font-size’, ’26px’);
div.css(‘padding-top’, ‘5px’);
div.css(‘padding-bottom’, ‘5px’);
div.find(‘span’).css(‘display’, ‘block’);
}
else {
div.css(‘height’, ’25px’);
div.css(‘width’, ‘auto’);
div.css(‘left’, ‘0px’);
div.css(‘font-size’, ’18px’);
div.css(‘padding-top’, ‘0px’);
div.css(‘padding-bottom’, ‘0px’);
div.find(‘span’).css(‘display’, ‘none’);
}
}
window.changeSlide = function (item) {
//get all title containers
var listItems = document.querySelectorAll(‘.titleContainerClass’);
var currentIndexVals = { 0: null, 1: null, 2: null, 3: null };
var newIndexVals = { 0: null, 1: null, 2: null, 3: null };
for (var i = 0; i < listItems.length; i++) {
//current Index
currentIndexVals[i] = parseInt(listItems[i].getAttribute(‘data-currentidx’));
}
var selectedIndex = 0; //selected Index will always be 0
var leftOffset = ”;
var originalSelectedIndex = ”;
var nextSelected = ”;
var originalNextIndex = ”;
if (item == null) {
var item0 = document.querySelector(‘[data-currentidx=”‘ + currentIndexVals[0] + ‘”]’);
originalSelectedIndex = parseInt(item0.getAttribute(‘data-originalidx’));
originalNextIndex = originalSelectedIndex + 1;
nextSelected = currentIndexVals[0] + 1;
}
else {
nextSelected = item.getAttribute(‘data-currentidx’);
originalNextIndex = item.getAttribute(‘data-originalidx’);
}
if (nextSelected == 0) { return; }
for (i = 0; i < listItems.length; i++) {
if (currentIndexVals[i] == selectedIndex) {
//this is the selected item, so move to bottom and animate
var div = $(‘[data-currentidx=”0″]’);
cssTitle(div, false);
div.css(‘left’, ‘-400px’);
div.css(‘top’, ‘230px’);
newIndexVals[i] = 3;
var item0 = document.querySelector(‘[data-currentidx=”0″]’);
originalSelectedIndex = item0.getAttribute(‘data-originalidx’);
//annimate
div.delay(500).animate(
{ left: ‘0px’ }, 500, function () {
});
}
else if (currentIndexVals[i] == nextSelected) {
//this is the NEW selected item, so resize and slide in as selected
var div = $(‘[data-currentidx=”‘ + nextSelected + ‘”]’);
cssTitle(div, true);
div.css(‘left’, ‘-610px’);
newIndexVals[i] = 0;
//annimate
div.delay(500).animate(
{ left: ‘0px’ }, 500, function () {
});
}
else {
//move up in queue
var curIdx = currentIndexVals[i];
var div = $(‘[data-currentidx=”‘ + curIdx + ‘”]’);
var topStr = div.css(‘top’);
var topInt = parseInt(topStr.substring(0, topStr.length – 1));
if (curIdx != 1 && nextSelected == 1 || curIdx > nextSelected) {
topInt = topInt – 35;
if (curIdx – 1 == 2) { newIndexVals[i] = 2 };
if (curIdx – 1 == 1) { newIndexVals[i] = 1 };
}
//move up
div.animate(
{ top: topInt }, 500, function () {
});
}
};
if (originalNextIndex < 0)
originalNextIndex = itemCount – 1;
//adjust pictures
$(‘#divPic_’ + originalNextIndex).css(‘left’, ‘610px’);
leftOffset = ‘-610px’;
$(‘#divPic_’ + originalSelectedIndex).animate(
{ left: leftOffset }, 500, function () {
});
$(‘#divPic_’ + originalNextIndex).animate(
{ left: ‘0px’ }, 500, function () {
});
var item0 = document.querySelector(‘[data-currentidx=”‘ + currentIndexVals[0] + ‘”]’);
var item1 = document.querySelector(‘[data-currentidx=”‘ + currentIndexVals[1] + ‘”]’);
var item2 = document.querySelector(‘[data-currentidx=”‘ + currentIndexVals[2] + ‘”]’);
var item3 = document.querySelector(‘[data-currentidx=”‘ + currentIndexVals[3] + ‘”]’);
if (newIndexVals[0] != null) { item0.setAttribute(‘data-currentidx’, newIndexVals[0]) };
if (newIndexVals[1] != null) { item1.setAttribute(‘data-currentidx’, newIndexVals[1]) };
if (newIndexVals[2] != null) { item2.setAttribute(‘data-currentidx’, newIndexVals[2]) };
if (newIndexVals[3] != null) { item3.setAttribute(‘data-currentidx’, newIndexVals[3]) };
};
</script>
![IC648720[1]](https://sharepointsamurai.files.wordpress.com/2014/09/ic6487201.gif?w=300&h=181)
+ ![microsoft_crm_wallpaper_02[1]](https://sharepointsamurai.files.wordpress.com/2014/06/microsoft_crm_wallpaper_021.jpg?w=167&h=125)
SharePoint Samurai 
