Friday, September 11, 2015

bxslider in SpServices?


<style>
    .bx-wrapper .bx-caption span {
    padding:5px !important;
    }
    .ui-tabs {
        zoom: 1;
    }

        .ui-tabs .ui-tabs-nav {
            list-style: none;
            position: relative;
            padding: 0;
            margin: 0;
        }

            .ui-tabs .ui-tabs-nav li {
                position: relative;
                float: left;
                margin: 0 3px -2px 0;
                padding: 0;
            }
  
                .ui-tabs .ui-tabs-nav li a {
                    background-color:#188EC6;
                    display: block;
                    /*padding: 10px 20px;*/
                    padding: 10px 10px;
                    background: #f0f0f0;
                    border: 2px #ccc solid;
                    border-bottom-color: #ccc;
                    outline: none;
                }

                .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
                    /*padding: 10px 20px 12px 20px;*/
                    padding:10px 5px 12px 2px;
                    background: #fff;
                    border-bottom-style: none;
                }
             
                .ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
                .ui-tabs .ui-tabs-nav li.ui-state-disabled a,
                .ui-tabs .ui-tabs-nav li.ui-state-processing a {
                    cursor: default;
                }

                .ui-tabs .ui-tabs-nav li a,
                .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
                    cursor: pointer;
                }

        .ui-tabs .ui-tabs-panel {
            display: block;
            clear: both;
            border: 2px #ccc solid;
            /*padding: 10px;*/
            padding: 7px;
            padding-bottom: 5px;

            padding-left: 16px;
            padding-left: 12px;
            padding-right: 3px;
            padding-top: 5px;
        }

        .ui-tabs .ui-tabs-hide {
            display: none;
        }

    .bx-viewport {
        /*height: 190px !important;*/
        height:155px !important;
        /*width: 311px !important;*/
        /*width: 273px !important;*/    
    }

    .listyle {
        /*width: 50% !important;*/
        width:250px !important;/*For tab view of images*/
    }

    .pstyle {
        width: 219px;
        padding-top: 6px;
        text-align: center;
        font-weight: bold;
        color: #0072C6;
    }

    .bx-wrapper {
        margin: 0px auto 0px !important;
    }

        .bx-wrapper .bx-pager {
            width: 311px !important;
            display: none;
        }

        .bx-wrapper .bx-caption {
            position: relative !important;
            width: 200px !important;
            text-align: center !important;
            /*font-size: x-large !important;*/  /*Aishwarya*/
            font-size:17px !important;  /*Aishwarya*/
            background: #6DA30F;
            /*margin-left: 22px;*/
            margin-left: -2%;
            margin-top:-25px; /*Aishwarya*/
        }

        .bx-wrapper .bx-prev {
            /*left: 10px;*/
            left:-46px !important;
            background: url(../_layouts/15/IG.DMSIP.SP.HomePage/Images/controls.png) no-repeat 0 -32px !important;
            
        }

        .bx-wrapper .bx-next {
            /*right: 10px;*/
            right: -48px !important;
            background: url(../_layouts/15/IG.DMSIP.SP.HomePage/Images/controls.png) no-repeat -43px -32px !important;
        }
        /*.bx-wrapper .bx-viewport {
            left:-10px !important;
        }*/

</style>

<script>
    var sliderone = 2; var slidertwo = 1;
    //jQuery.noConflict();
    var sp_Imag = [];
    var category = '';
    $(document).ready(function () {
        var slider = '';
        var fieldsToRead = "<ViewFields><FieldRef Name='EncodedAbsUrl' /><FieldRef Name='ID' /><FieldRef Name='Category' /><FieldRef Name='Title' /><FieldRef Name='NavigationUrl' /></ViewFields>";
        var query = "<Query>" +
                        "<Where>" +
                            "<IsNotNull>" +
                                "<FieldRef Name='ID' />" +
                            "</IsNotNull>" +
                        "</Where>" +
                    "</Query>";
        $().SPServices({
            operation: "GetListItems",
            async: false,
            listName: "Projects",
            CAMLViewFields: fieldsToRead,
            CAMLQuery:query,
            completefunc: function (xData, Status) {
                var decItemCount = $(xData.responseXML).SPFilterNode("rs:data").attr("ItemCount");
                if (decItemCount > 0) {
                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                        var image = $(this).attr("ows_EncodedAbsUrl");
                        var title = $(this).attr("ows_Title");
                        var navURL = $(this).attr("ows_NavigationUrl");
                        var category = $(this).attr("ows_Category")
                        if (title == undefined)
                            title = "";
                        if (navURL == undefined) {
                            navURL = "#";
                            target = "_self";
                        }
                        else {
                            target = "_blank";
                        }
                        //sp_Imag.push(navURL,target,title,image,category);
                        if ($(this).attr("ows_Category") == "Ongoing") {

                            //alert("Ongoing Projects" + image);
                            $("#ulOngoing").append('<li class="listyle"><a href="' + navURL + '" target="' + target + '"><img style="height:150px;width:100%;margin-left:-2%" title="' + title + '" src="' + image + '"/></a></li>');
                            //("#ulOngoing").append('<li class="listyle"><a href="' + navURL + '" target="' + target + '"><img style="height:150px;width:200px;padding-left:22px;" title="' + title + '" src="' + image + '"/></a></li>');
                        }
                        if ($(this).attr("ows_Category") == "Completed") {

                            //alert("Completed Projects" + image);
                            $("#ulCompleted").append('<li class="listyle"><a href="' + navURL + '" target="_blank"><img style="height:150px;width:100%;margin-left:-2%" title="' + title + '" src="' + image + '"/></a></li>');
                            // $("#ulCompleted").append('<li class="listyle"><a href="' + navURL + '" target="_blank"><img style="height:150px;width:200px;padding-left:22px;" title="' + title + '" src="' + image + '"/></a></li>');
                        }

                    });
                }
                else {
                    alert("Yet to update the projects");
                    //document.location.href = '/sites/pprop/';
                }
            }
        });
        $("#ulOngoing").addClass('bxslider');
        //$("#ulCompleted").removeClass('bxslider');
        $('.tabhead').css({
            'padding': '10px 5px 12px 2px',
            'background': '#fff',
            'border-bottom-style': 'none'
        });
        //$(".ui-tabs").tabs();
        $(".tabhead1").click(function () {
            $('#tab-1').hide();
            $('#tab-2').show();
            $('.tabhead1').css({
                'padding': '10px 5px 12px 2px',
                'background': '#fff',
                'border-bottom-style': 'none'
            });
            $('.tabhead').css({
                'display': 'block',
                'padding':'10px 10px',
                'background': '#f0f0f0',
                'border':'2px #ccc solid',
                'border-bottom-color': '#ccc',
                'outline':'none'
            });
           // if (slidertwo != 2) {
                $("#ulOngoing").removeClass('bxslider');
                $("#ulCompleted").addClass('bxslider');
                $('.bxslider').bxSlider({
                    minSlides: 2,
                    maxSlides: 4,
                    slideWidth: 250,
                    slideMargin: 10,
                    captions: true,
                    auto: true,
                    autoControls: false,
                    autoHover: true,
                    pause: 3000,
                    speed: 10000,
                    nextImage: '../_layouts/15/images/Slider/control_double_right.png',
                    prevImage: '../_layouts/15/images/Slider/control_double_left.png',
                    nextText: '',
                    prevText: '',
                 });
                if (slidertwo == 2) {
                    $('#ulCompleted').parent().removeClass("bx-viewport");
                    $('#ulCompleted').parent().parent().removeClass("bx-wrapper");
                }
                slidertwo = 2;
            // }
               
        });
      
        $(".tabhead").click(function () {
            $('#tab-1').show();
            $("#ulCompleted").removeClass('bxslider');
            $("#ulOngoing").addClass('bxslider');
            $('#tab-2').hide();
            $('.tabhead').css({
                'padding': '10px 5px 12px 2px',
                'background': '#fff',
                'border-bottom-style': 'none'
            });
            $('.tabhead1').css({
                'display': 'block',
                'padding': '10px 10px',
                'background': '#f0f0f0',
                'border': '2px #ccc solid',
                'border-bottom-color': '#ccc',
                'outline': 'none'
            });
           // if (sliderone != 2) {
                $('.bxslider').bxSlider({
                    minSlides: 2,
                    maxSlides: 4,
                    slideWidth: 250,
                    slideMargin: 10,
                    captions: true,
                    auto: true,
                    autoControls: false,
                    autoHover: true,
                    pause: 3000,
                    speed: 10000,
                    nextImage: '../_layouts/15/images/Slider/control_double_right.png',
                    prevImage: '../_layouts/15/images/Slider/control_double_left.png',
                    nextText: '',
                    prevText: '',
                     });
                if (slidertwo == 2) {
                    $('#ulOngoing').parent().removeClass("bx-viewport");
                    $('#ulOngoing').parent().parent().removeClass("bx-wrapper");
                }
                sliderone = 2;
         
                 });
          $('.bxslider').bxSlider({
            minSlides: 2,
            maxSlides: 4,
            slideWidth: 250,
            slideMargin: 10,
            captions: true,
            auto: true,
            autoControls: false,
            autoHover: true,
            pause: 3000,
            speed: 10000,
            nextImage: '../_layouts/15/images/Slider/control_double_right.png',
            prevImage: '../_layouts/15/images/Slider/control_double_left.png',
            nextText: '',
            prevText: '',
            onSliderLoad: function () {
                //$('#ulCompleted').empty();
                //$('#tab-2').style('display', 'none');
                $('#tab-2').hide();
            }
          });
    });
    

</script>
<div id="slider">
<div class="ui-tabs">
    <ul class="ui-tabs-nav">
        <li class="current"><a class="tabhead" href="#tab-1">Ongoing Projects</a></li>
        <li ><a class="tabhead1" href="#tab-2">Completed Projects</a></li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="ui-tabs-panel">
            <ul id="ulOngoing" >
            </ul>
        </div>
        <div id="tab-2" class="ui-tabs-panel">
            <ul id="ulCompleted">
            </ul>
        </div>
    </div>
</div>
</div>


https://drive.google.com/file/d/0B1Q1lNQ7xZ5tdTdWcmF3cjgwUlk/view?usp=sharing

No comments:

Post a Comment