Knockout Js Sample for Photo and Video

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>