0

Im using this jquery plugin slider in Sharepoint.When i hardcode the html inside a script editor or CEWP it works well. But when i load the html dynamically from a list. It doesnt work and render properly.

I have added all the references etc..Im 100 % i doing it well as there are no errors in firebug :( Anyone used this particular plugin.If you have used something similar with the combination of image and accrodion please post it.

Thanks in Advance

  • I've used it before in SP2010. Can't remember this Issue though. Can you share your code here? – Jan Jouke Tjalsma Jun 22 '15 at 8:35
  • Thanks Jan. I did fix it by using window.load but still having issues with IE but works well in firefox. Any ideas? – naijacoder Jul 1 '15 at 0:13
  • Please see the code sample with slidorion in my answer. – Jan Jouke Tjalsma Jul 17 '15 at 6:40
0

Here is the code I used (not optimal but working).

It uses the SPServices library, you should include that before this script. Note the "async: false;", this ensures the load script finishes before slidorion inits.

<script type="text/javascript">
$(document).ready(function(){
    /* gather content */
    $().SPServices({
        operation: "GetListItems",
        listName: "Featured",
        async: false,
        completefunc: function(xData, Status) {
            var slideIndex = 1;
            $("#slider").append("<div id='slide" + slideIndex + "' class='slide'>" + $(this).attr("ows_Picture1") + "</div>");
            $("#accordion").append("<div class='link-header'>" + $(this).attr("ows_Title") + "</div>");
            $("#accordion").append("<div class='link-content'>" + $(this).attr("ows_Body") + "</div>");
            slideIndex++;
            });
        }
    });
    /* Init slideshow */
    $('#slidorion').slidorion({
        speed: 1000,
        interval: 10000
    });
    //This should auto-adapt the image-height to the link-header height
    var accordionOuterHeight = $("#accordion").outerHeight();
    var linkHeaderHeights = 0;
    $(".link-header").each(function() {
        linkHeaderHeights += $(this).outerHeight();
    });
    var slideContentHeightMargin = $(".link-content").outerHeight() - $(".link-content").height();
    var slideHeight = accordionOuterHeight - linkHeaderHeights - slideContentHeightMargin;
    $(".link-content").css("height", slideHeight);
    //End auto-adapt
}); 
</script>

<div id="slidorion">
    <div id="slider"></div>
    <div id="accordion"></div>
</div>

There are several improvements possible. For example the slidorion init could be in the completefunc of the loadscript. Also the coding could be more compact.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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