Knockout Js Sample for Photo and Video
------------------------------------------------------
<script type="text/javascript">
var language;
var languageText;
var ajaxResult = new Array();
var value = 1;
var youtubeVideos = ko.observableArray();
var myObj = function () {
var content, id, link, status, openingDate
}
var viewModelPhotoGallery = function () {
var self = this;
self.video = ko.observable(),
self.photos = ko.observable(),
self.language = ko.observable(language),
self.init = function () {
//GetFilteredTenders(self.tenders);
//self.language(languageText);
var uri = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=UUPO5AY4qU1s-HedJZ8T7xSw&key=AIzaSyB2uf8CU9re_74ybnPmnv4A--MpzfYWYME';
$.ajax({
url: uri,
type: "GET",
async: false,
headers: { "ACCEPT": "application/json;odata=verbose" },
success: function (data) {
self.video(data.items[0]);
},
error: function (request, textStatus, errorThrown) {
}
});
var uri = '/_vti_bin/JSONEServices/MoPWWebServices.svc/GetTopTwoPhotos';
$.ajax({
url: uri,
type: "GET",
async: false,
headers: { "ACCEPT": "application/json;odata=verbose" },
success: function (data) {
self.photos(data);
},
error: function (request, textStatus, errorThrown) {
}
});
}
}
$(document).ready(function () {
var vmPG = new viewModelPhotoGallery();
vmPG.init();
ko.applyBindings(vmPG, $('#divPhotoVideos').get(0));
})
function CheckVideoLanguage(VideoTitle, Page) {
if (Page.indexOf("en-us") > -1) {
if (VideoTitle.match(/[a-z]/i)) {
return true;
} else {
return false;
}
}
else {
if (!(VideoTitle.match(/[a-z]/i))) {
return true;
} else {
return false;
}
}
}
</script>
<div class="col-md-5 col-sm-12" id="divPhotoVideos">
<header>
<h2 class="full-caps text-left ">PHOTOS & VIDEOS <span class="pull-right view-all view-all-gallery">
<a href="#">View Gallery
<img src="/Style Library/en-us/Images/in-arrow.png" width="5" height="9" alt="" /></a>
</span>
</h2>
<div class="border-3 Theme-border-color">
<div class="border-left Theme-border-color-left"></div>
</div>
</header>
<article>
<!-- ko with: video() -->
<div class="video-container col-md-12 col-sm-12 padding-right-none">
<div>
<iframe width="100%" height="234px" data-bind="attr: { 'src': 'http://www.youtube.com/embed/' + snippet.resourceId.videoId }" frameborder="0" allowfullscreen=""></iframe>
</div>
<div class="video-heading col-md-12 col-sm-12">
<div class="videotittle" data-bind="text: snippet.title"> </div>
</div>
</div>
<!-- /ko -->
<!-- ko foreach: photos -->
<div class="col-md-6 col-sm-6 col-xs-11 padding-right-none">
<img data-bind=
"attr: { src: '/' + Url }" width="277px" height="182px">
</div>
<!-- /ko -->
</article>
</div>
=======================================================================Another example=======================================================================
<script type="text/javascript" src="/SiteCollectionScripts/jquery.cssslider.js"></script>
<script type="text/javascript">
var initiativeObj = function () {
var Description,
ImageURL,
Title;
var photos = [];
}
var photosClass = function () {
var Title,
ImageURL,
CssString;
}
function AssignCssClassName(index) {
switch (index) {
case 0:
return 'current_item';
break;
case 1:
return 'previous_item';
break;
case 2:
return 'next_item';
break;
case 3:
return 'previous_item_2';
break;
case 4:
return 'next_item_2';
break;
}
}
var vmInitiatativeDiv = function () {
var self = this;
self.initiatives = ko.observableArray([]),
self.language = function () {
var lang = _spPageContextInfo.currentLanguage;
if (lang == '1033') {
return "English";
}
else {
return "Arabic";
}
},
self.init = function () {
$.ajax({
url: 'http://vm.mopw.local/_vti_bin/JSONEServices/MoPWWebServices.svc/InitiativesWithNewsAndGallery/' + self.language() + '/',
type: "GET",
async: false,
headers: { "ACCEPT": "application/json;odata=verbose" },
success: function (data) {
console.log('length is : ' + data.length);
for (i = 0; i < data.length; i++) {
var obj = new initiativeObj();
obj.Description = data[i].Description;
obj.ImageURL = data[i].ImageURL;
obj.Title = data[i].Title;
obj.photos = new Array();
for (j = 0; j < data[i].PhotoGallery.length; j++) {
if (j == 5)
break;
var objPhoto = new photosClass();
objPhoto.Title = data[i].PhotoGallery[j].Title;
objPhoto.ImageURL = data[i].PhotoGallery[j].ImageURL;
objPhoto.CssString = AssignCssClassName(j);
obj.photos.push(objPhoto);
}
self.initiatives.push(obj);
}
console.log(self.initiatives());
},
error: function (request, textStatus, errorThrown) {
}
});
}
}
$(document).ready(function () {
var vmInitiatative = new vmInitiatativeDiv();
vmInitiatative.init();
ko.applyBindings(vmInitiatative, $('#InitiativeDiv').get(0));
});
</script>
<div id="InitiativeDiv">
<div class="col-md-7 col-sm-12 col-xs-12">
<header>
<h2 class="full-caps text-left ">INITIATIVES<span class="pull-right view-all view-all-initiatives">
<a href="#">View All Initiatives
<img src="/Style Library/en-us/Images/in-arrow.png" width="5" height="9" alt="" />
</a>
</span>
</h2>
<div class="border-3 Theme-border-color">
<div class="border-left Theme-border-color-left"></div>
</div>
</header>
<article>
<article>
<!-- Initiative HTML -->
<div class="initiativeContainer">
<ul class="initiativeSlider">
<!-- ko foreach: initiatives -->
<li>
<div class="choose_slider">
<div class="choose_slider_items">
<ul id="mySlider1">
<!-- ko foreach: photos -->
<li data-bind="attr: { class: CssString }">
<img data-bind="attr: { src: ImageURL }" width="226" height="152">
</li>
<!-- /ko -->
</ul>
</div>
</div>
<div class="col-md-12 initiative-content-container">
<div class="col-md-3">
<img data-bind="attr: { src: ImageURL }" alt="" />
</div>
<div class="col-md-9">
<header class="">
<div class="ReadingInitiative" data-bind="text: Title"></div>
</header>
<div class="border-btm-1 Theme-border-btm1-color" data-bind="html: Description"></div>
</div>
</div>
</li>
<!-- /ko-->
</ul>
<!--header>
<img alt="" class="initiatives-image" src="/Style Library/en-us/Images/initiatives-img.jpg">
</header-->
<script>
$(document).ready(function () {
$('.initiativeSlider').bxSlider({
auto: true,
autoStart: true,
pager: false,
controls: true
});
});
$(function () {
$("#mySlider1").AnimatedSlider({
//prevButton: "#btn_prev1",
//nextButton: "#btn_next1",
visibleItems: 5,
infiniteScroll: true,
willChangeCallback: function (obj, item) { $("#statusText").text("Will change to " + item); },
changedCallback: function (obj, item) { $("#statusText").text("Changed to " + item); }
});
$("#mySlider2").AnimatedSlider({
//prevButton: "#btn_prev1",
//nextButton: "#btn_next1",
visibleItems: 5,
infiniteScroll: true,
willChangeCallback: function (obj, item) { $("#statusText").text("Will change to " + item); },
changedCallback: function (obj, item) { $("#statusText").text("Changed to " + item); }
});
});
</script>
</div>
</article>
</article>
</div>
</div>
