MIUN - Design Library

ImageViewerBlock: Noslider 

<div class="block image-gallery">
    <div class="block-header">
        <h2 class="heading-level-2">Ett bildspel</h2>
    </div>
    <section class="block-content row">
        <article id="item-1" class="image-gallery-item" aria-labelledby="item-title-1">
            <figure>
                <div class="figure-image-container" data-id="1">
                    <a href="#fancy-id-1" data-fancybox="some-guid">
                                <img src="https://picsum.photos/255/170" alt="En jättefin bild som föreställer något" class="figure-image">
                            </a>
                </div>
                <figcaption>
                    <h3 id="item-title-1" class="heading-level-4">En bild som har lite längre rubrik</h3>
                    <p class="image-description">En jättefin bild som föreställer något</p>
                </figcaption>
            </figure>
            <div class="action-container">
                <a href="https://picsum.photos/2160/1440" class="button-small" target="_blank" aria-label="Ladda ner En jättefin bild som föreställer något">Ladda ner</a>
            </div>
        </article>
        <div id="fancy-id-1" class="lightbox-html" style="display: none;">
            <figure>
                <span><img src="https://picsum.photos/950/632" alt="En jättefin bild som föreställer något"></span>
                <a href="javascript:;" title="previous" data-fancybox-prev class="button-rotate button-prev"><span class="material-icons">keyboard_arrow_left</span></a>
                <a href="javascript:;" title="next" data-fancybox-next class="button-rotate button-next"><span class="material-icons">keyboard_arrow_right</span></a>
            </figure>
            <div class="meta">
                <div class="basic">
                    <strong class="count">Bild <span class="current"></span> av <span class="total"></span></strong>
                    <p>
                        <strong>En bild som har lite längre rubrik</strong>
                        <br> En jättefin bild som föreställer något
                    </p>
                </div>
                <div class="extra">
                    <p>
                    </p>
                    <a href="https://picsum.photos/2160/1440" target="_blank" class="button-default" role="button"><span>Ladda ner</span></a>
                </div>
            </div>
        </div>
        <article id="item-2" class="image-gallery-item" aria-labelledby="item-title-2">
            <figure>
                <div class="figure-image-container" data-id="2">
                    <a href="#fancy-id-2" data-fancybox="some-guid">
                                <img src="https://picsum.photos/255/170" alt="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod fuga labore dolorum aliquam sunt, nisi illum eos ullam provident veniam ex ipsam perspiciatis nesciunt velit repellendus! Amet nulla blanditiis maiores?" class="figure-image">
                            </a>
                </div>
                <figcaption>
                    <h3 id="item-title-2" class="heading-level-4">En bild</h3>
                    <p class="image-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod fuga labore dolorum aliquam sunt, nisi illum eos ullam provident veniam ex ipsam perspiciatis nesciunt velit repellendus! Amet nulla blanditiis maiores?</p>
                    <p class="image-photographer">Fotograf: Kent Johnsson</p>
                </figcaption>
            </figure>
            <div class="action-container">
                <a href="https://picsum.photos/2160/1440" class="button-small" target="_blank" aria-label="Ladda ner Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod fuga labore dolorum aliquam sunt, nisi illum eos ullam provident veniam ex ipsam perspiciatis nesciunt velit repellendus! Amet nulla blanditiis maiores?">Ladda ner</a>
            </div>
        </article>
        <div id="fancy-id-2" class="lightbox-html" style="display: none;">
            <figure>
                <span><img src="https://picsum.photos/950/632" alt="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod fuga labore dolorum aliquam sunt, nisi illum eos ullam provident veniam ex ipsam perspiciatis nesciunt velit repellendus! Amet nulla blanditiis maiores?"></span>
                <a href="javascript:;" title="previous" data-fancybox-prev class="button-rotate button-prev"><span class="material-icons">keyboard_arrow_left</span></a>
                <a href="javascript:;" title="next" data-fancybox-next class="button-rotate button-next"><span class="material-icons">keyboard_arrow_right</span></a>
            </figure>
            <div class="meta">
                <div class="basic">
                    <strong class="count">Bild <span class="current"></span> av <span class="total"></span></strong>
                    <p>
                        <strong>En bild</strong>
                        <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod fuga labore dolorum aliquam sunt, nisi illum eos ullam provident veniam ex ipsam perspiciatis nesciunt velit repellendus! Amet nulla blanditiis maiores?
                    </p>
                </div>
                <div class="extra">
                    <p>
                        <strong>Fotograf: </strong>Kent Johnsson<br>
                    </p>
                    <a href="https://picsum.photos/2160/1440" target="_blank" class="button-default" role="button"><span>Ladda ner</span></a>
                </div>
            </div>
        </div>
        <article id="item-3" class="image-gallery-item" aria-labelledby="item-title-3">
            <figure>
                <div class="figure-image-container" data-id="3">
                    <a href="#fancy-id-3" data-fancybox="some-guid">
                                <img src="https://picsum.photos/255/170" alt="En jättefin bild som föreställer något" class="figure-image">
                            </a>
                </div>
                <figcaption>
                    <h3 id="item-title-3" class="heading-level-4">En bild</h3>
                    <p class="image-description">En jättefin bild som föreställer något</p>
                    <p class="image-photographer">Fotograf: Leif Johnsson</p>
                </figcaption>
            </figure>
            <div class="action-container">
                <a href="https://picsum.photos/2160/1440" class="button-small" target="_blank" aria-label="Ladda ner En jättefin bild som föreställer något">Ladda ner</a>
            </div>
        </article>
        <div id="fancy-id-3" class="lightbox-html" style="display: none;">
            <figure>
                <span><img src="https://picsum.photos/950/632" alt="En jättefin bild som föreställer något"></span>
                <a href="javascript:;" title="previous" data-fancybox-prev class="button-rotate button-prev"><span class="material-icons">keyboard_arrow_left</span></a>
                <a href="javascript:;" title="next" data-fancybox-next class="button-rotate button-next"><span class="material-icons">keyboard_arrow_right</span></a>
            </figure>
            <div class="meta">
                <div class="basic">
                    <strong class="count">Bild <span class="current"></span> av <span class="total"></span></strong>
                    <p>
                        <strong>En bild</strong>
                        <br> En jättefin bild som föreställer något
                    </p>
                </div>
                <div class="extra">
                    <p>
                        <strong>Fotograf: </strong>Leif Johnsson<br>
                    </p>
                    <a href="https://picsum.photos/2160/1440" target="_blank" class="button-default" role="button"><span>Ladda ner</span></a>
                </div>
            </div>
        </div>
        <article id="item-4" class="image-gallery-item" aria-labelledby="item-title-4">
            <figure>
                <div class="figure-image-container" data-id="4">
                    <a href="#fancy-id-4" data-fancybox="some-guid">
                                <img src="https://picsum.photos/255/170" alt="En jättefin bild som föreställer något" class="figure-image">
                            </a>
                </div>
                <figcaption>
                    <h3 id="item-title-4" class="heading-level-4">En bild</h3>
                    <p class="image-description">En jättefin bild som föreställer något</p>
                    <p class="image-photographer">Fotograf: John Johnsson</p>
                </figcaption>
            </figure>
            <div class="action-container">
                <a href="https://picsum.photos/2160/1440" class="button-small" target="_blank" aria-label="Ladda ner En jättefin bild som föreställer något">Ladda ner</a>
            </div>
        </article>
        <div id="fancy-id-4" class="lightbox-html" style="display: none;">
            <figure>
                <span><img src="https://picsum.photos/950/632" alt="En jättefin bild som föreställer något"></span>
                <a href="javascript:;" title="previous" data-fancybox-prev class="button-rotate button-prev"><span class="material-icons">keyboard_arrow_left</span></a>
                <a href="javascript:;" title="next" data-fancybox-next class="button-rotate button-next"><span class="material-icons">keyboard_arrow_right</span></a>
            </figure>
            <div class="meta">
                <div class="basic">
                    <strong class="count">Bild <span class="current"></span> av <span class="total"></span></strong>
                    <p>
                        <strong>En bild</strong>
                        <br> En jättefin bild som föreställer något
                    </p>
                </div>
                <div class="extra">
                    <p>
                        <strong>Fotograf: </strong>John Johnsson<br>
                    </p>
                    <a href="https://picsum.photos/2160/1440" target="_blank" class="button-default" role="button"><span>Ladda ner</span></a>
                </div>
            </div>
        </div>
        <article id="item-5" class="image-gallery-item" aria-labelledby="item-title-5">
            <figure>
                <div class="figure-image-container" data-id="5">
                    <a href="#fancy-id-5" data-fancybox="some-guid">
                                <img src="https://picsum.photos/255/170" alt="En jättefin bild som föreställer något" class="figure-image">
                            </a>
                </div>
                <figcaption>
                    <h3 id="item-title-5" class="heading-level-4">En bild</h3>
                    <p class="image-description">En jättefin bild som föreställer något</p>
                    <p class="image-photographer">Fotograf: Kurt Johnsson</p>
                </figcaption>
            </figure>
            <div class="action-container">
                <a href="https://picsum.photos/2160/1440" class="button-small" target="_blank" aria-label="Ladda ner En jättefin bild som föreställer något">Ladda ner</a>
            </div>
        </article>
        <div id="fancy-id-5" class="lightbox-html" style="display: none;">
            <figure>
                <span><img src="https://picsum.photos/950/632" alt="En jättefin bild som föreställer något"></span>
                <a href="javascript:;" title="previous" data-fancybox-prev class="button-rotate button-prev"><span class="material-icons">keyboard_arrow_left</span></a>
                <a href="javascript:;" title="next" data-fancybox-next class="button-rotate button-next"><span class="material-icons">keyboard_arrow_right</span></a>
            </figure>
            <div class="meta">
                <div class="basic">
                    <strong class="count">Bild <span class="current"></span> av <span class="total"></span></strong>
                    <p>
                        <strong>En bild</strong>
                        <br> En jättefin bild som föreställer något
                    </p>
                </div>
                <div class="extra">
                    <p>
                        <strong>Fotograf: </strong>Kurt Johnsson<br>
                    </p>
                    <a href="https://picsum.photos/2160/1440" target="_blank" class="button-default" role="button"><span>Ladda ner</span></a>
                </div>
            </div>
        </div>
        <article id="item-6" class="image-gallery-item" aria-labelledby="item-title-6">
            <figure>
                <div class="figure-image-container" data-id="6">
                    <a href="#fancy-id-6" data-fancybox="some-guid">
                                <img src="https://picsum.photos/255/170" alt="En jättefin bild som föreställer något" class="figure-image">
                            </a>
                </div>
                <figcaption>
                    <h3 id="item-title-6" class="heading-level-4">En bild</h3>
                    <p class="image-description">En jättefin bild som föreställer något</p>
                    <p class="image-photographer">Fotograf: Nils Johnsson</p>
                </figcaption>
            </figure>
            <div class="action-container">
                <a href="https://picsum.photos/2160/1440" class="button-small" target="_blank" aria-label="Ladda ner En jättefin bild som föreställer något">Ladda ner</a>
            </div>
        </article>
        <div id="fancy-id-6" class="lightbox-html" style="display: none;">
            <figure>
                <span><img src="https://picsum.photos/950/632" alt="En jättefin bild som föreställer något"></span>
                <a href="javascript:;" title="previous" data-fancybox-prev class="button-rotate button-prev"><span class="material-icons">keyboard_arrow_left</span></a>
                <a href="javascript:;" title="next" data-fancybox-next class="button-rotate button-next"><span class="material-icons">keyboard_arrow_right</span></a>
            </figure>
            <div class="meta">
                <div class="basic">
                    <strong class="count">Bild <span class="current"></span> av <span class="total"></span></strong>
                    <p>
                        <strong>En bild</strong>
                        <br> En jättefin bild som föreställer något
                    </p>
                </div>
                <div class="extra">
                    <p>
                        <strong>Fotograf: </strong>Nils Johnsson<br>
                    </p>
                    <a href="https://picsum.photos/2160/1440" target="_blank" class="button-default" role="button"><span>Ladda ner</span></a>
                </div>
            </div>
        </div>
        <article id="item-7" class="image-gallery-item" aria-labelledby="item-title-7">
            <figure>
                <div class="figure-image-container" data-id="7">
                    <a href="#fancy-id-7" data-fancybox="some-guid">
                                <img src="https://picsum.photos/255/170" alt="En jättefin bild som föreställer något" class="figure-image">
                            </a>
                </div>
                <figcaption>
                    <h3 id="item-title-7" class="heading-level-4">En bild</h3>
                    <p class="image-description">En jättefin bild som föreställer något</p>
                    <p class="image-photographer">Fotograf: John Johnsson</p>
                </figcaption>
            </figure>
            <div class="action-container">
                <a href="https://picsum.photos/2160/1440" class="button-small" target="_blank" aria-label="Ladda ner En jättefin bild som föreställer något">Ladda ner</a>
            </div>
        </article>
        <div id="fancy-id-7" class="lightbox-html" style="display: none;">
            <figure>
                <span><img src="https://picsum.photos/950/632" alt="En jättefin bild som föreställer något"></span>
                <a href="javascript:;" title="previous" data-fancybox-prev class="button-rotate button-prev"><span class="material-icons">keyboard_arrow_left</span></a>
                <a href="javascript:;" title="next" data-fancybox-next class="button-rotate button-next"><span class="material-icons">keyboard_arrow_right</span></a>
            </figure>
            <div class="meta">
                <div class="basic">
                    <strong class="count">Bild <span class="current"></span> av <span class="total"></span></strong>
                    <p>
                        <strong>En bild</strong>
                        <br> En jättefin bild som föreställer något
                    </p>
                </div>
                <div class="extra">
                    <p>
                        <strong>Fotograf: </strong>John Johnsson<br>
                    </p>
                    <a href="https://picsum.photos/2160/1440" target="_blank" class="button-default" role="button"><span>Ladda ner</span></a>
                </div>
            </div>
        </div>
        <article id="item-8" class="image-gallery-item" aria-labelledby="item-title-8">
            <figure>
                <div class="figure-image-container" data-id="8">
                    <a href="#fancy-id-8" data-fancybox="some-guid">
                                <img src="https://picsum.photos/255/170" alt="En jättefin bild som föreställer något" class="figure-image">
                            </a>
                </div>
                <figcaption>
                    <h3 id="item-title-8" class="heading-level-4">En bild</h3>
                    <p class="image-description">En jättefin bild som föreställer något</p>
                    <p class="image-photographer">Fotograf: John Johnsson</p>
                </figcaption>
            </figure>
            <div class="action-container">
                <a href="https://picsum.photos/2160/1440" class="button-small" target="_blank" aria-label="Ladda ner En jättefin bild som föreställer något">Ladda ner</a>
            </div>
        </article>
        <div id="fancy-id-8" class="lightbox-html" style="display: none;">
            <figure>
                <span><img src="https://picsum.photos/950/632" alt="En jättefin bild som föreställer något"></span>
                <a href="javascript:;" title="previous" data-fancybox-prev class="button-rotate button-prev"><span class="material-icons">keyboard_arrow_left</span></a>
                <a href="javascript:;" title="next" data-fancybox-next class="button-rotate button-next"><span class="material-icons">keyboard_arrow_right</span></a>
            </figure>
            <div class="meta">
                <div class="basic">
                    <strong class="count">Bild <span class="current"></span> av <span class="total"></span></strong>
                    <p>
                        <strong>En bild</strong>
                        <br> En jättefin bild som föreställer något
                    </p>
                </div>
                <div class="extra">
                    <p>
                        <strong>Fotograf: </strong>John Johnsson<br>
                    </p>
                    <a href="https://picsum.photos/2160/1440" target="_blank" class="button-default" role="button"><span>Ladda ner</span></a>
                </div>
            </div>
        </div>
    </section>
</div>
 
{{#if isSlider}}
            <div class="block image-slider">
                {{#if heading}}
                <div class="block-header">
                    <h2 class="heading-level-2">{{ heading }}</h2>
                </div>
                {{/if}}

                <section class="block-content slick-slider">
                    {{#each images}}
                        <article id="{{imageId}}" aria-label="{{title}}">
                            <div class="slider-image-container" data-id="{{imageId}}">
                                <img src="{{ sliderPreviewImageUrl }}" alt="{{ description }}" class="slider-image">
                            </div>
                            {{#unless ../hideMetadata}}
                                <figcaption {{#unless photographer}} class="padding-none" {{/unless}}>
                                    <div class="row">
                                        {{#unless ../hideDescription}}
                                            <div class="col-12">
                                                {{#if description}}
                                                    <p class="image-description {{#if ../expandThumbnails}}show{{/if}}">{{ description }}</p>
                                                {{/if}}
                                            </div>
                                        {{/unless}}
                                        <div class="col-md-9">
                                            {{#if photographer}}
                                                <p class="image-photographer">Fotograf: {{ photographer }}</p>
                                            {{/if}}
                                        </div>
                                        <div class="col-3 hide-mobile"><p class="image-count">Bild <span class="slide-current"></span> av <span class="slide-count"></span><button class="show-more"><span class="material-icons">{{#if ../expandThumbnails}}keyboard_arrow_up{{else}}keyboard_arrow_down{{/if}}</span></button></p></div>
                                        
                                    </div>
                                </figcaption>
                            {{/unless}}
                        </article>
                    {{/each}}
                </section>
                {{#unless hideMetadata}}
                    {{#unless hideThumbnails}}
                        <div class="slider-nav {{#if expandThumbnails}}show{{/if}}">
                            {{#each images}}
                                <div class="thumbnail-container"><img src="{{ sliderThumbnailImageUrl }}" alt=""></div>
                            {{/each}}
                        </div>
                    {{/unless}}
                {{/unless}}
            </div>
{{else}}
    <div class="block image-gallery">
        {{#if heading}}
        <div class="block-header">
            <h2 class="heading-level-2">{{ heading }}</h2>
        </div>
        {{/if}}
        <section class="block-content row">
            {{#each images}}
                <article id="item-{{ imageId }}" class="image-gallery-item" aria-labelledby="item-title-{{ imageId }}">
                    <figure>
                        <div class="figure-image-container" data-id="{{imageId}}">
                            <a href="#fancy-id-{{ imageId }}" data-fancybox="{{ ../galleryId }}">
                                <img src="{{ thumbnailImageUrl }}" alt="{{ description }}" class="figure-image">
                            </a>
                        </div>
                        <figcaption>
                            <h3 id="item-title-{{ imageId }}" class="heading-level-4">{{ title }}</h3>
                            {{#unless ../hideDescription}}
                                {{#if description}}
                                    <p class="image-description">{{ description }}</p>
                                {{/if}}
                            {{/unless}}
                            {{#if photographer}}
                                <p class="image-photographer">Fotograf: {{ photographer }}</p>
                            {{/if}}
                        </figcaption>
                    </figure>
                    <div class="action-container">
                        {{#if ../allowDownload}}
                            <a href="{{ orginalImageUrl }}" class="button-small" target="_blank" aria-label="Ladda ner {{ description }}">Ladda ner</a>
                        {{/if}}
                    </div>
                </article>
                <div id="fancy-id-{{ imageId }}" class="lightbox-html" style="display: none;">
                    <figure>
                        <span><img src="{{ previewImageUrl }}" alt="{{ description }}"></span>
                        <a href="javascript:;" title="previous" data-fancybox-prev class="button-rotate button-prev"><span class="material-icons">keyboard_arrow_left</span></a>
                        <a href="javascript:;" title="next" data-fancybox-next class="button-rotate button-next"><span class="material-icons">keyboard_arrow_right</span></a>
                    </figure>
                    <div class="meta">
                        <div class="basic">
                            <strong class="count">Bild <span class="current"></span> av <span class="total"></span></strong>
                            <p>
                                <strong>{{ title }}</strong>
                                <br>
                                {{#unless ../hideDescription}}
                                    {{#if description}}
                                        {{ description }}
                                    {{/if}}
                                {{/unless}}
                            </p>
                        </div>
                        <div class="extra">
                            <p>
                                {{#if photographer}}
                                    <strong>Fotograf: </strong>{{ photographer }}<br>
                                {{/if}}
                            </p>
                            {{#if ../allowDownload}}
                                <a href="{{ orginalImageUrl }}" target="_blank" class="button-default" role="button"><span>Ladda ner</span></a>
                            {{/if}}
                        </div>
                    </div>
                </div>
            {{/each}}
        </section>
    </div>
{{/if}}
 
{
  "galleryId": "some-guid",
  "isSlider": false,
  "heading": "Ett bildspel",
  "allowDownload": true,
  "hideDescription": false,
  "hideMetadata": false,
  "hideThumbnails": false,
  "expandThumbnails": false,
  "epiDivClass": "col-12",
  "images": [
    {
      "imageId": 1,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild som har lite längre rubrik",
      "description": "En jättefin bild som föreställer något"
    },
    {
      "imageId": 2,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod fuga labore dolorum aliquam sunt, nisi illum eos ullam provident veniam ex ipsam perspiciatis nesciunt velit repellendus! Amet nulla blanditiis maiores?",
      "photographer": "Kent Johnsson"
    },
    {
      "imageId": 3,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "Leif Johnsson"
    },
    {
      "imageId": 4,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "John Johnsson"
    },
    {
      "imageId": 5,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "Kurt Johnsson"
    },
    {
      "imageId": 6,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "Nils Johnsson"
    },
    {
      "imageId": 7,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "John Johnsson"
    },
    {
      "imageId": 8,
      "orginalImageUrl": "https://picsum.photos/2160/1440",
      "thumbnailImageUrl": "https://picsum.photos/255/170",
      "previewImageUrl": "https://picsum.photos/950/632",
      "sliderThumbnailImageUrl": "https://picsum.photos/70/70",
      "sliderPreviewImageUrl": "https://picsum.photos/920/517",
      "title": "En bild",
      "description": "En jättefin bild som föreställer något",
      "photographer": "John Johnsson"
    }
  ]
}
  • Content: 
    $( document ).ready(function() {

	$('[data-fancybox]').fancybox({
		padding: 0,
		margin: 0,
		loop: true,
		arrows: false,
		beforeShow: function (instance) {
			var current = (this.index + 1);
			var total = instance.group.length;
			$('.meta .current').text(current);
			$('.meta .total').text(total);
		},
	});

	var $slickSlider = $('.slick-slider');
	var $slickNav = $('.slider-nav');
	var $slider_height;
	$slickSlider.on('init',function(event, slick, currentSlide, nextSlide) {
		$slider_height = $(this).height();
	});
	$slickSlider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
		var i = (currentSlide ? currentSlide : 0) + 1;
		$('.slide-current').text(i);
		$('.slide-count').text(slick.slideCount);
		$('img', $slickNav).removeClass('active');
		$('img:eq(' + (i - 1) + ')', $slickNav).addClass('active');
		adjustSlider();
		var img_hight = $('.slider-image-container').height();
		$('.slick-arrow').css('top',img_hight/2);
	});
	
	$slickSlider.slick();

	$('.show-more').on('click', function() {
		$('.image-description').toggleClass('show');
		$('.slider-nav').toggleClass('show');
		adjustSlider();
		if($('.material-icons', this).text() === 'keyboard_arrow_down') {
			$('.material-icons', this).text('keyboard_arrow_up');
		} else {
			$('.material-icons', this).text('keyboard_arrow_down');
		}
	});

	$('div', $slickNav).on('click', function() {
		$slickSlider.slick('slickGoTo', $(this).index());
	});

	function adjustSlider() {
		var $el = $('.image-description')
		if ($el.hasClass('show')) {
			var sl_height = $('.slick-active').find('.image-description').height()+10;
			$slickSlider.height($slider_height+sl_height);
		}
		else {
			$slickSlider.attr('style', null);
		}
	}
});
  • URL: /components/raw/imageviewerblock/ImageViewerBlock.js
  • Filesystem Path: src\components\02-block_components\ImageViewerBlock\ImageViewerBlock.js
  • Size: 1.8 KB
  • Content: 
    .imageviewerblock{
    margin-bottom: $md-space;
}
.image-gallery {
    .image-gallery-item {
        width: 285px;
        padding-right: 15px;
        padding-left: 15px; 

        .figure-image-container {
            position: relative;
            min-width: 255px;
            min-height: 170px;
            background-color: $light-grey;
            margin-bottom: $xs-space;

            .figure-image {
                max-height: 100%;
                max-width: 100%;
                width: auto;
                height: auto;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
        }

        .image-description {
            margin-bottom: 10px;
        }
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 1065px;
    }
}

.fancybox-content {
    padding: 0 !important;
    overflow: auto;
}

.lightbox-html figure {
    background-color: $light-grey;
    max-width: 950px;
    max-height: 650px;
    text-align: center;
    margin: 0 auto;
    position: relative;
}

@media (min-width: 38em) {
    .lightbox-html figure {
        min-width: 550px;
    }
}

@media (min-width: 48em) {
    .lightbox-html figure {
        min-height: 500px;
        min-width: 650px;
    }
}

@media (min-width: 63.5em) {
    .lightbox-html figure {
        min-height: 500px;
        min-width: 650px;
    }
}

@media (min-width: 82em) {
    .lightbox-html figure {
        float: left;
        display: table;
        min-height: 500px;
        min-width: 750px;
    }
}

@media (min-width: 104em) {
    .lightbox-html figure {
        min-height: 632px;
        min-width: 950px;
    }
}

@media (min-width: 70em) {
    .lightbox-html figure span {
        display: table-cell;
        vertical-align: middle;
    }
}

.lightbox-html figure img {
    display: block;
    margin: 0 auto;
    max-height: 200px;
}

@media (min-width: 38em) {
    .lightbox-html figure img {
        max-height: 400px;
    }
}

@media (min-width: 48em) {
    .lightbox-html figure img {
        max-width: 750px;
        max-height: 500px;
    }
}

@media (min-width: 104em) {
    .lightbox-html figure img {
        max-width: 950px;
        max-height: 632px;
    }
}

.lightbox-html .meta {
    width: 320px;
    padding: 1.2em;
    font-size: .9em;
    background: #fff;
}

@media (min-width: 48em) {
    .lightbox-html .meta {
        max-width: 320px;
        padding: 1.5em;
        font-size: 1em;
    }
}

@media (min-width: 70.5em) {
    .lightbox-html .meta {
        max-width: 320px;
        font-size: .9em;
        padding: 2.5em 2em 1em 2em;
        overflow: hidden;
    }
}

.lightbox-html .meta .basic {
    float: none;
    width: 100%;
}

@media (min-width: 63.5em) {
    .lightbox-html .meta .basic {
        float: none;
        width: 100%;
    }
}

.lightbox-html .meta .extra {
    float: none;
    width: 100%;
    border-top: 1px solid #e1e1e1;
    padding-top: 1.5em;
    margin-top: 1.5em;
}

@media (min-width: 63.5em) {
    .lightbox-html .meta .extra {
        float: none;
        width: 100%;
        border-top: 1px solid #e1e1e1;
        padding-top: 1.5em;
        margin-top: 1.5em;

        p {
            margin-bottom: 1.5rem;
        }
    }
}

.lightbox-html .meta .extra .button-default {
    display: block;
    text-align: center;
}

.lightbox-html .meta {
    .current, .total {
        font-family: "Lato Bold";
    }
    .count, .current, .total, p, p strong {
        font-size: .9em;
    }
}

// Image slider

.image-slider {
    .slider-image-container {
        position: relative;
        background-color: $light-grey;
        height: 517px;
        @include media-breakpoint-down(lg) {
            height: 430px;
        }
        @include media-breakpoint-down(md) {
            height: 320px;
        }
        @include media-breakpoint-down(sm) {
            height: 280px;
        }
        @media (max-width: 420px) { 
            height: 170px;
        }
        .slider-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            max-width: 100%;
            max-height: 99.9%;
        }
    }
}

.slick-slider {
    article {
       position: relative;
       margin-bottom: 0 !important;
    }

    .slick-track {
        height: 100% !important;
    }
    
    figcaption {
        position: static;
        width: 100%;
        overflow-y: auto;
        padding: 20px 30px;
        background-color: rgba($color: #404040, $alpha: .9);
        
        p, p span {
            color: #fff;
        }

        .image-count {
            text-align: right;
        }
    }
    .image-description {
        display: none;
        margin-right: 180px;
        margin-bottom: 10px;
        @include media-breakpoint-down(sm) {
            display: none !important;
        }
        &.show {
            display: block;
            
        }
    }
}

.slick-prev, .slick-next {
    top: calc(50% - 25px);
    height: 50px;
    width: 50px;
    color: #fff;
    border-radius: 50%;
    background: rgba($color: #404040, $alpha: .9);
    z-index: 100;
}

.slick-prev:before, .slick-next:before {
    opacity: 1;
}

.slick-prev:hover, .slick-next:hover, .slick-prev:focus, .slick-next:focus {
    background: rgba($color: #202020, $alpha: .9)
}

.slick-prev {
    left: 20px;
}

.slick-next {
    right: 20px;
}

.slick-prev:before {
    font-family: "Material Icons";
    content: "\e408";
    font-size: 32px;
}

.slick-next:before {
    font-family: "Material Icons";
    content: "\e409";
    font-size: 32px;
}

.slider-nav {
    display: none;
    padding: 20px 30px;
    background-color: #404040;
    @include media-breakpoint-down(sm) {
        display: none !important;
    }
    &.show {
        display: block;
    }

    .thumbnail-container {
        display: inline-block;

        &:hover {
            cursor: pointer;
        }

        img {
            width: 70px;
            height: 70px;
            margin: 3px;
            padding: 3px;
        }

        img.active {
            padding: 0;
            border: 3px solid #fff;
        }
    }
}

.slick-slider .slick-track, .slick-slider .slick-list {
    height: 100% !important;
}

.show-more {
    margin: 0;
    margin-left: 10px;
    padding: 0;
    border: 0;
    background-color: transparent;

    &:hover {
        cursor: pointer;
    }

    span {
        font-size: 32px;
        vertical-align: middle;
        line-height: 1px;
    }
}

@include media-breakpoint-down(md) {
    .hide-mobile {
        display: none;
    }

    .padding-none {
        padding: 0 !important;
    }
}
  • URL: /components/raw/imageviewerblock/ImageViewerBlock.scss
  • Filesystem Path: src\components\02-block_components\ImageViewerBlock\ImageViewerBlock.scss
  • Size: 7.1 KB

There are no notes for this item.