Info med funktioner

Hvis der tilføjes data-widget-close='true' på et element, vil et klik på dette element medføre at infoboksen lukkes. Herved kan man få sin egen Luk knap.

Tilsvarende er det muligt at tilføje data-widget-toggle='my-class-name' på et element. Dette medfører at infoboksen får klassen 'my-class-name' når der klikker på elementet og fjernes igen når der klikkes igen.

Hvis der er brug for en karrusel (eller slideshow) er det muligt at tilføje data-widget-carousel='true' på et element i templaten. Herved omdannes alle underelementer til en karrusel. Dette vil man typisk benytte til billeder som i dette eksempel. Templaten kunne se ud som her:

Vis template og CSS

Template

<div class="widget-hoverbox-title">
  <span><%= navn %></span>
  <button data-widget-close="true">Luk</button>
</div>
<div class="widget-hoverbox-sub">
  <ul data-widget-carousel="true">
    <li class="carousel-element" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/AaB-FCN_%28Aalborg_2018-02-25%29_ubt.jpg/800px-AaB-FCN_%28Aalborg_2018-02-25%29_ubt.jpg)"></li>
    <li class="carousel-element" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/62/Bionutria_park.jpg)"></li>
    <li class="carousel-element" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/dc/Blue_water_arena_esbjerg.jpg)"></li>
    <li class="carousel-element" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Br%C3%B8ndby_Stadion_2005-01.jpg)"></li>
    <li class="carousel-element" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/cd/Ac_horsens.jpg)"></li>
  </ul>
</div>

CSS

[data-widget-close] {
    right: 12px;
    position: absolute;
}

[data-widget-carousel] {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    .slick-track {
        .slick-slide {
            height: 100%;
            width: 100%;
        }
        .carousel-element {
            height: 150px;
            width: 250px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
    }
}

Vis konfigurationen

Konfiguration

HTML

            
<div data-widget-url="https://widget.cdn.septima.dk/3.4.8/config/info19.json"></div>
<script src="https://widget.cdn.septima.dk/3.4.8/widgetconfig.js"></script>
            
          

Relaterede eksempler

Der er desværre ingen eksempler, der bruger de samme komponenter.

Anvendte funktioner

Dette eksempel anvender ikke nogen komponenter.