Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Nicolai 48 posts 201 karma points
    May 22, 2015 @ 10:54
    Nicolai
    0

    Carousel in Partial View doesnt work

    Hey guys,

    Im trying to implement a carousel inside my view but im doing something wrong. Can anyone help?

     

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{
    @*  
        Vi finder først alle magasiner 'Umbraco.Content(4662)' 
        Så finder vi hvilket årstal vi er i 'Children.OrderBy(Id desc).ElementAt(0)'
        Tilsidst findes magasiner der tilhører det pågældende år 'Children.OrderBy(createDate desc)'
    *@
    var magazinesMonths = Umbraco.Content(4662).Children.OrderBy("Id desc").ElementAt(0).Children.OrderBy("createDate desc");
    int i = 0;
    
    <h2 style="text-align: center;">
        <span style="text-transform: capitalize; color: black;">Magasinet Notat</span>
    </h2>
    
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="carousel slide" id="myCarousel" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <ul class="thumbnails">
                        @foreach (var mag in magazineMonths.Take(2)) {
    
                            var magazineImage = Umbraco.Media(mag.magazineFrontpageImage);
    
                            if (i == 0) {
                                <div class="item active">
                                    <li>
                                        <div class="thumbnail" id="magazineSlider">
                                            <div class="magazineMonth">
                                                <p style="text-transform: capitalize;">@mag.magazineDate.ToString("MMMM") magasinet</p>
                                            </div>
                                            <div class="magazineTitle">
                                                <p><a href="@mag.Url">Se Magasin &raquo</a></p>             
                                            </div>
                                            <div class="magazinePicture">
                                                <a href="@mag.Url">
                                                  <img class="magazineImg" src="@magazineImage.umbracoFile" />
                                                </a>
                                            </div>
                                            @* HER KAN ARTIKLER FOR ET GIVET MAGASIN SKRIVES UD *@
                                            @foreach (var article in mag.Children) {
                                                @article.Name
                                            }
                                        </div>
                                    </li>
                                </div>
                            } else {
                                <div class="item">
                                    <li>
                                        <div class="thumbnail" id="magazineSlider">
                                            <div class="magazineMonth">
                                                <p style="text-transform: capitalize;">@mag.magazineDate.ToString("MMMM") magasinet</p>
                                            </div>
                                            <div class="magazineTitle">
                                                <p><a href="@mag.Url">Se Magasin &raquo</a></p>             
                                            </div>
                                            <div class="magazinePicture">
                                                <a href="@mag.Url">
                                                  <img class="magazineImg" src="@magazineImage.umbracoFile" />
                                                </a>
                                            </div>
                                            @* HER KAN ARTIKLER FOR ET GIVET MAGASIN SKRIVES UD *@
                                            @foreach (var article in mag.Children) {
                                                @article.Name
                                            }
                                        </div>
                                    </li>
                                </div>
                            }
                            i++;
                        } 
                    </ul>
                </div>
            </div>
            <div class="fadeout"></div>
            <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
        </div>
    </div>
    }

     

    Im getting this error: Error loading Partial View script (file: ~/Views/MacroPartials/FrontPageMagazine.cshtml)

  • Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib
    May 22, 2015 @ 11:26
    Alex Skrypnyk
    0

    Hi Nicolai,

    You made mistake in this line :

    @foreach (var mag in magazinesMonths.Take(2))
    

    'magazineMonths' - no such variable in the view, should be 'magazinesMonths'

    Thanks, Alex

  • Nicolai 48 posts 201 karma points
    May 22, 2015 @ 16:10
    Nicolai
    0

    So simple! I was looking blind on this code :)

    Thanks alot Alex

     

    - Do you know how I could create data-slide-to from the amount of magazines I have?

    Say:

                <ol class="carousel-indicators">
                    @foreach (var mag in magazinesMonths) {
                        if (i == 0) {
                            <li data-target="#magazineCarousel" data-slide-to="0" class="active"></li>                      
                        } else {
                            <li data-target="#magazineCarousel" data-slide-to="@i"></li>
                        }
                        i++;
                    }
                </ol>

    This is unfortunately not working and I dont know why?

  • Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib
    May 22, 2015 @ 16:17
    Alex Skrypnyk
    0

    What error do you have ? Can you look at logs ?

  • Nicolai 48 posts 201 karma points
    May 22, 2015 @ 16:25
    Nicolai
    0

    It does not give me any error but its like the carousel is reading input wrong.

     So full code is now:

    <div class="carousel slide" id="magazineCarousel" data-ride="carousel">
                <ol class="carousel-indicators">
                    @foreach (var mag in magazinesMonths) {
                        <li data-target="#magazineCarousel" data-slide-to="@i" { if i==0 { class="active" } }></li>                     
                        i++;
                    }
                </ol>
                <div style="width: 100%">
                    <div class="carousel-inner">
                        <ul class="thumbnails">
                            @foreach (var mag in magazinesMonths) {
    
                                var magazineImage = Umbraco.Media(mag.magazineFrontpageImage);
                                int countArticles = mag.Children.Count();
    
                                if (i < 1) {
                                    <div class="item active">
                                        <li>
                                            <div class="thumbnail" id="magazineSlider">
                                                <div class="magazineMonth">
                                                    <p style="text-transform: capitalize;">@mag.magazineDate.ToString("MMMM") magasinet</p>
                                                </div>
                                                <div class="magazineTitle">
                                                    <p>
                                                        <a href="@mag.Url"><span>Se Magasin &raquo</span><span class='spacer'></span></a>
                                                    </p>
                                                </div>
                                                <div class="magazinePicture">
                                                    <a href="@mag.Url">
                                                      <img class="magazineImg" src="@magazineImage.umbracoFile" />
                                                    </a>
                                                </div>
                                                @* HER KAN ARTIKLER FOR ET GIVET MAGASIN SKRIVES UD *@
                                                @foreach (var article in mag.Children) {
                                                    @article.Name
                                                }
                                            </div>
                                        </li>
                                    </div>
                                } else {
                                    <div class="item">
                                        <li>
                                            <div class="thumbnail" id="magazineSlider">
                                                <div class="magazineMonth">
                                                    <p style="text-transform: capitalize;">@mag.magazineDate.ToString("MMMM") magasinet</p>
                                                </div>
                                                <div class="magazineTitle">
                                                    <p>
                                                        <a href="@mag.Url"><span>Se Magasin &raquo</span><span class='spacer'></span></a>
                                                    </p>
                                                </div>
                                                <div class="magazinePicture">
                                                    <a href="@mag.Url">
                                                      <img class="magazineImg" src="@magazineImage.umbracoFile" />
                                                    </a>
                                                </div>
                                                @* HER KAN ARTIKLER FOR ET GIVET MAGASIN SKRIVES UD *@
                                                @foreach (var article in mag.Children) {
                                                    @article.Name
                                                }
                                            </div>
                                        </li>
                                    </div>
                                }
                                i++;
                            } 
                        </ul>
                    </div>
                </div>
            <div class="fadeout"></div>
            </div>
            <a data-slide="prev" href="#magazineCarousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#magazineCarousel" class="right carousel-control">›</a>
Please Sign in or register to post replies

Write your reply to:

Draft