Hi,

I'm completely new to Umbraco and a avid MVC developer, I really like the cms. I started off by trying to make a simple macro that displays a slide show using jssor.js. Here is the code

@using umbraco.MacroEngines;
@using umbraco.cms.businesslogic.media;
@{ 
    List<string> photo_urls = new List<string>();

    string photos = Model.MacroParameters["Photos"];

    foreach (string i in photos.Split(new char[] { ','}))
    {
        int id = int.Parse(i);
        var StartMedia = new umbraco.cms.businesslogic.media.Media(@id);
        photo_urls.Add(StartMedia.getProperty("umbracoFile").Value.ToString());
    }

    var slideid = Guid.NewGuid().ToString();
    var showarr =  @Model.MacroParameters["Show_Arrows"] == "1" ? 2 : 0;
}

     <script>
        jQuery(document).ready(function ($) {
         var transitions = {$Duration:1000,y:1,$Easing:$JssorEasing$.$EaseInBounce};
            var options = {
                $DragOrientation: 3,
                 $AutoPlay: true,
                 $SlideshowOptions: {
                    $Class: $JssorSlideshowRunner$,
                    $Transitions: transitions,
                    $TransitionsOrder: 1,
                    $ShowLink: true
                },
                                         //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: @showarr,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 0,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                }
            };

            var jssor_slider1 = new $JssorSlider$("@Html.Raw(slideid)" + "*_container", options);
        });
    </script>
    <!-- Jssor Slider Begin -->
    <!-- You can move inline styles to css file or css block. -->
    <div id="@slideid*_container" style="position: relative; top: 0px; left: 0px; width: 600px;
        height: 300px; ">

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
            overflow: hidden;">
            @foreach (string photourl in photo_urls)
            {
                <div><img u="image" src="@photourl" /></div>
            }
        </div>

        <!-- Arrow Navigator Skin Begin -->
        <style>
            /* jssor slider arrow navigator skin 03 css */
            /*
            .jssora03l              (normal)
            .jssora03r              (normal)
            .jssora03l:hover        (normal mouseover)
            .jssora03r:hover        (normal mouseover)
            .jssora03ldn            (mousedown)
            .jssora03rdn            (mousedown)
            */
            .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn
            {
                position: absolute;
                cursor: pointer;
                display: block;
                background: url(../img/a03.png) no-repeat;
                overflow:hidden;
            }
            .jssora03l { background-position: -3px -33px; }
            .jssora03r { background-position: -63px -33px; }
            .jssora03l:hover { background-position: -123px -33px; }
            .jssora03r:hover { background-position: -183px -33px; }
            .jssora03ldn { background-position: -243px -33px; }
            .jssora03rdn { background-position: -303px -33px; }
        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px">
        </span>
        <!-- Arrow Navigator Skin End -->
    </div>
    <!-- Jssor Slider End --

So yeah, this displays the slideshow exactly how I hope for with one problem. If I include this macro in a grid layout on a page, the preceding grid elements do not get rendered on the page. The html doesn't even get rendered. It's almost like umbraco hit my partial view for my macro and then stopped after it was completed. I've tried different variations, no avil.

Please help. Thanks