1

My understanding of JS is very basic. I have a slideshow working in SP 2013 (also needs to be IE8 compatible) that works on the script editor page but not on the actual live site.

I've read about using things like

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);

on here and a few variants but I can't seem to find where to put them to get them to work. Any help is appreciated. thanks!

Here's the code:

    <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<style>
.slideshow { 
        position:relative; /*Make the slideshow container  position:relative and make the sub elements absolute to position the sub element absolute to the container*/
        height:191px; /*The slide show height*/
        overflow:hidden;
    }
    .slideshow div {
        position:absolute; 
        top:0px;
        left:0;
        z-index:8;
    }
    .slideshow div img
    {
        width:790px; /*The image slide show width*/
        height:191px; /*The image slide show height*/
        display: block;
        padding: 0;
        margin: 0;
        border: none;
    }
    .slideshow div.active {
        z-index:10;
    }
    .slideshow div.lastactive {
        z-index:9;
    }

</style>

<script language="javascript">


    /***************************************************************************************
    * Run when page load
    ***************************************************************************************/
    $(document).ready(function()
    {

        initSlideShow();



    });
    /***************************************************************************************
    ****************************************************************************************/
    function initSlideShow()
    {
        if($(".slideshow div").length > 1) //Only run slideshow if have the slideshow element and have more than one image.
        {
            var transationTime = 4000;//5000 mili seconds i.e 5 second
            $(".slideshow div:first").addClass('active'); //Make the first image become active i.e on the top of other images
            setInterval(slideChangeImage, transationTime); //set timer to run the slide show.
        }
    }
    /***************************************************************************************
    ****************************************************************************************/

    function slideChangeImage()
    {
        var active = $(".slideshow div.active"); //Get the current active element.
        if(active.length == 0)
        {
            active = $(".slideshow div:last"); //If do not see the active element is the last image.
        }

        var next = active.next().length ? active.next() : $(".slideshow div:first"); //get the next element to do the transition
        active.addClass('lastactive');
        next.css({opacity:0.0}) //do the fade in fade out transition
                .addClass('active')
                .animate({opacity:1.0}, 1500, function()
                {
                    active.removeClass("active lastactive");    
                });

    }



</script>


</head>

<div class="slideshow">
    <div><a href="#"><img src="https://partner.coca-cola.com/sites/ErinTest/SiteAssets/slider_1.png" alt="" border="0" /></a></div>
    <div><a href="#"><img src="https://partner.coca-cola.com/sites/ErinTest/SiteAssets/slider_2.png" alt="" border="0" /></a></div>
    <div><a href="#"><img src="https://partner.coca-cola.com/sites/ErinTest/SiteAssets/slider_3.png" alt="" border="0" /></a></div>

</div>
1
  • What exactly are you trying to accomplish? Retrieve list items and display them in a slideshow?
    – wjervis
    Mar 23, 2015 at 16:44

2 Answers 2

1

Try adding

<script  type="text/javascript" src="/_layouts/sp.js"></script>

And add this line before your function:

ExecuteOrDelayUntilScriptLoaded(yourfunctionname, "SP.js");
2
  • When I try adding this the script editor won't let me save the page. Super weird. Mar 23, 2015 at 16:39
  • Go to edit page -> ADD web part -> Content Editor -> Add. Add the script tags inside that using "Edit source" button in ribbon. Save the page.
    – Keerthi
    Mar 23, 2015 at 16:47
0

It's working in Script Editor because all the JS files loaded properly. In your live site you can add following inside a script tag

<script type="text/JavaScript">
   SP.SOD.executeFunc('sp.js', 'SP.ClientContext', initSlideShow);    
</script>

Now you don't need to handle document ready event

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.