comand-component-library 3.3.15 → 3.3.17

package/src/App.vue

@@ -69,6 +69,29 @@
             </CmdWidthLimitationWrapper>
             <!-- end width-limitation-wrapper (with table of contents) --------------------------------------------------------------------------------------------------------------------------------------------------->
 
+            <!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-advanced-form-elements"></a>
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage">Address Data</h2>
+                <div class="flex-container">
+                    <CmdAddressData :addressData="addressData"
+                                    :linkGoogleMaps="false"
+                                    :cmdHeadline="{headlineText: 'With label texts', headlineLevel: 3}"
+                    />
+                    <CmdAddressData :addressData="addressData"
+                                    :linkGoogleMaps="false"
+                                    :show-label-texts="false"
+                                    :cmdHeadline="{headlineText: 'Without label texts', headlineLevel: 3}"
+                    />
+                    <CmdAddressData :addressData="addressData"
+                                    :linkGoogleMaps="false"
+                                    :show-label-icons="false"
+                                    :cmdHeadline="{headlineText: 'Without label icons', headlineLevel: 3}"
+                    />
+                </div>
+            </CmdWidthLimitationWrapper>
+            <!-- end address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
+
             <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-advanced-form-elements"></a>
             <CmdWidthLimitationWrapper>
@@ -794,94 +817,94 @@
             <a id="section-boxes"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Boxes</h2>
-                <CmdBoxWrapper :useFlexbox="true" :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}" >
-                    <CmdBox v-for="index in 14" :key="index" textBody="Content" :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}" />
+                <CmdBoxWrapper :useFlexbox="true" :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}">
+                    <CmdBox v-for="index in 14" :key="index" textBody="Content" :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"/>
                 </CmdBoxWrapper>
                 <CmdBoxWrapper :useFlexbox="true" :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}">
-                        <CmdBox
-                            :stretch-vertically="false"
-                            :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
-                            textBody="This is a long text that is cutoff after a specific number of lines that can be defined by the property 'cutoffTextLines' and be toggled by a link below."
-                            :cutoff-text-lines="4"
-                        />
-                        <CmdBox :useSlots="['header', 'body', 'footer']">
-                            <template v-slot:header>
-                                <h4>
-                                    Texts given by slots
-                                </h4>
-                            </template>
-                            <template v-slot:body>
-                                <div class="padding">
-                                    <p>
-                                        This content with paragraphs inside is placed inside the box-body.
-                                    </p>
-                                    <p>
-                                        <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
-                                    </p>
-                                </div>
-                            </template>
-                            <template v-slot:footer>
+                    <CmdBox
+                        :stretch-vertically="false"
+                        :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
+                        textBody="This is a long text that is cutoff after a specific number of lines that can be defined by the property 'cutoffTextLines' and be toggled by a link below."
+                        :cutoff-text-lines="4"
+                    />
+                    <CmdBox :useSlots="['header', 'body', 'footer']">
+                        <template v-slot:header>
+                            <h4>
+                                Texts given by slots
+                            </h4>
+                        </template>
+                        <template v-slot:body>
+                            <div class="padding">
                                 <p>
-                                    Footer content
+                                    This content with paragraphs inside is placed inside the box-body.
                                 </p>
-                            </template>
-                        </CmdBox>
-                        <CmdBox :useSlots="['header', 'body']">
-                            <template v-slot:header>
-                                <h4>
-                                    Box with links
-                                </h4>
-                            </template>
-                            <template v-slot:body>
-                                <ul class="navigation">
-                                    <li><a href="#" @click.prevent="">Link name 1</a></li>
-                                    <li><a href="#" @click.prevent="">Link name 2</a></li>
-                                    <li><a href="#" @click.prevent="">Link name 3</a></li>
-                                    <li><a href="#" @click.prevent="">Link name 4</a></li>
-                                </ul>
-                            </template>
-                            <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
-                            <template v-slot:footer>
-                                <p>
-                                    footer content
-                                </p>
-                            </template>
-                        </CmdBox>
-                        <CmdBox
-                            :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
-                            :image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
-                            textBody="This is some text given by property."
-                            :collapsible="true"
-                        />
-                        <CmdBox :useSlots="['header', 'body']" :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true">
-                            <template v-slot:header>
-                                <h4>
-                                    Collapsible box with image
-                                </h4>
-                            </template>
-                            <template v-slot:body>
-                                <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
-                            </template>
-                        </CmdBox>
-                        <CmdBox :useSlots="['header', 'body', 'footer']">
-                            <template v-slot:header>
-                                <h4>
-                                    Box with image and content
-                                </h4>
-                            </template>
-                            <template v-slot:body>
-                                <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
-                                <div class="default-padding">
-                                    <h4>Headline</h4>
-                                    <p>This is some text information i.e a short-text for a news teaser.</p>
-                                </div>
-                            </template>
-                            <template v-slot:footer>
                                 <p>
-                                    <a href="#">Read more&hellip;</a>
+                                    <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
                                 </p>
-                            </template>
-                        </CmdBox>
+                            </div>
+                        </template>
+                        <template v-slot:footer>
+                            <p>
+                                Footer content
+                            </p>
+                        </template>
+                    </CmdBox>
+                    <CmdBox :useSlots="['header', 'body']">
+                        <template v-slot:header>
+                            <h4>
+                                Box with links
+                            </h4>
+                        </template>
+                        <template v-slot:body>
+                            <ul class="navigation">
+                                <li><a href="#" @click.prevent="">Link name 1</a></li>
+                                <li><a href="#" @click.prevent="">Link name 2</a></li>
+                                <li><a href="#" @click.prevent="">Link name 3</a></li>
+                                <li><a href="#" @click.prevent="">Link name 4</a></li>
+                            </ul>
+                        </template>
+                        <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
+                        <template v-slot:footer>
+                            <p>
+                                footer content
+                            </p>
+                        </template>
+                    </CmdBox>
+                    <CmdBox
+                        :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
+                        :image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
+                        textBody="This is some text given by property."
+                        :collapsible="true"
+                    />
+                    <CmdBox :useSlots="['header', 'body']" :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true">
+                        <template v-slot:header>
+                            <h4>
+                                Collapsible box with image
+                            </h4>
+                        </template>
+                        <template v-slot:body>
+                            <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
+                        </template>
+                    </CmdBox>
+                    <CmdBox :useSlots="['header', 'body', 'footer']">
+                        <template v-slot:header>
+                            <h4>
+                                Box with image and content
+                            </h4>
+                        </template>
+                        <template v-slot:body>
+                            <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
+                            <div class="default-padding">
+                                <h4>Headline</h4>
+                                <p>This is some text information i.e a short-text for a news teaser.</p>
+                            </div>
+                        </template>
+                        <template v-slot:footer>
+                            <p>
+                                <a href="#">Read more&hellip;</a>
+                            </p>
+                        </template>
+                    </CmdBox>
                 </CmdBoxWrapper>
                 <h3>Product boxes</h3>
                 <div class="grid-container-create-columns">
@@ -896,7 +919,7 @@
                     </div>
                 </div>
                 <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true">
-                    <CmdBox v-for="index in boxUserData.length" :key="index" boxType="user" :user="boxUserData[index - 1]" :cmdHeadline="{headlineLevel: 5}" />
+                    <CmdBox v-for="index in boxUserData.length" :key="index" boxType="user" :user="boxUserData[index - 1]" :cmdHeadline="{headlineLevel: 5}"/>
                 </CmdBoxWrapper>
             </CmdWidthLimitationWrapper>
             <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -938,18 +961,23 @@
             <a id="section-fancybox"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Fancybox</h2>
-                <a href="#" @click.prevent="showFancyBox('text','Some text')">Open FancyBox with text</a>
+                <h3>FancyBox with text</h3>
+                <a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox with text</a>
+                <h3>FancyBox with large image given by url</h3>
                 <a href="#"
-                   @click.prevent="showFancyBox('url', 'media/images/content-images/landscape-large.jpg')"
+                   @click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
                    title="Open FancyBox with large image given by url"
+                   style="display: inline-flex;"
                 >
-                   <img src="media/images/content-images/landscape-small.jpg" alt="Alternative text"/>
+                    <img src="media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
                 </a>
+                <h3>FancyBox with large image given by property</h3>
                 <a href="#"
-                   @click.prevent="showFancyBox('image', 'media/images/content-images/landscape-large.jpg')"
+                   @click.prevent="showFancyBox('image', 'media/images/demo-images/large/landscape-02.jpg', 'FancyBox with large image given by property')"
                    title="Open FancyBox with large image given by property"
+                   style="display: inline-flex;;"
                 >
-                    <img src="media/images/content-images/landscape-small.jpg" alt="Alternative text"/>
+                    <img src="media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
                 </a>
 
             </CmdWidthLimitationWrapper>
@@ -968,11 +996,21 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Icons</h2>
                 <ul>
-                    <li><span>Icon from local iconfont</span><CmdIcon iconClass="icon-home" /></li>
-                    <li><span>Icon from iconify-api (icomoon-font)</span><CmdIcon iconClass="icomoon-free:home" /></li>
-                    <li><span>Icon from iconify-api (bootstrap-font)</span><CmdIcon iconClass="bi:house-fill" /></li>
-                    <li><span>Icon from iconify-api (material-design-font)</span><CmdIcon iconClass="mdi:home" /></li>
-                    <li><span>Icon from iconify-api (font-awesome-solid-font)</span><CmdIcon iconClass="fa6-solid:house-chimney" /></li>
+                    <li><span>Icon from local iconfont</span>
+                        <CmdIcon iconClass="icon-home"/>
+                    </li>
+                    <li><span>Icon from iconify-api (icomoon-font)</span>
+                        <CmdIcon iconClass="icomoon-free:home"/>
+                    </li>
+                    <li><span>Icon from iconify-api (bootstrap-font)</span>
+                        <CmdIcon iconClass="bi:house-fill"/>
+                    </li>
+                    <li><span>Icon from iconify-api (material-design-font)</span>
+                        <CmdIcon iconClass="mdi:home"/>
+                    </li>
+                    <li><span>Icon from iconify-api (font-awesome-solid-font)</span>
+                        <CmdIcon iconClass="fa6-solid:house-chimney"/>
+                    </li>
                 </ul>
             </CmdWidthLimitationWrapper>
             <!-- end icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -982,8 +1020,8 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Image</h2>
                 <div class="flex-container">
-                    <CmdImage :image="imageData[0].image" :figcaption="imageData[0].figcaption" />
-                    <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption" />
+                    <CmdImage :image="imageData[0].image" :figcaption="imageData[0].figcaption"/>
+                    <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption"/>
                 </div>
             </CmdWidthLimitationWrapper>
             <!-- end images ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -992,7 +1030,7 @@
             <a id="section-image-gallery"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Image-Gallery</h2>
-                <CmdImageGallery :images="imageGalleryData" />
+                <CmdImageGallery :images="imageGalleryData"/>
             </CmdWidthLimitationWrapper>
             <!-- end image-gallery ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
@@ -1012,7 +1050,7 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Login Form</h2>
                 <CmdForm :use-validation="true" :use-fieldset="false">
-                    <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in" />
+                    <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in"/>
                 </CmdForm>
                 <p>LoginData: {{ loginData }}</p>
             </CmdWidthLimitationWrapper>
@@ -1024,7 +1062,7 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">List Of Links</h2>
                 <h3>Vertical</h3>
-                <CmdListOfLinks :links="listOfLinksData" />
+                <CmdListOfLinks :links="listOfLinksData"/>
                 <h3>Horizontal (aligned left, with headline)</h3>
                 <CmdListOfLinks
                     orientation="horizontal"
@@ -1357,7 +1395,13 @@
         <!-- end copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
         <!-- begin fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
-        <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false" :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}">
+        <CmdFancyBox
+            :show="fancyBoxCookieDisclaimer"
+            :fancyboxOptions="{}"
+            :allowEscapeKey="false"
+            :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
+            ariaLabelText="Cookie Disclaimer"
+        >
             <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <CmdCookieDisclaimer
                 :cookieOptions="cookieDisclaimerData"
@@ -1579,11 +1623,25 @@ export default {
         showError() {
             alert("Error")
         },
-        showFancyBox(type, content) {
+        showFancyBox(type, content, ariaLabelText) {
             if (type === "text") {
-                openFancyBox({content: content, cmdHeadline: {show: true, headlineText: "Fancybox with text", headlineLevel: 3}})
+                openFancyBox({
+                    content: content,
+                    cmdHeadline: {
+                        show: true,
+                        headlineText: "Fancybox with text", headlineLevel: 3
+                    },
+                    ariaLabelText: ariaLabelText
+                })
             } else if (type === "url") {
-                openFancyBox({url: content, cmdHeadline: {show: true, headlineText: "Fancybox with image given by url", headlineLevel: 3}})
+                openFancyBox({
+                    url: content,
+                    cmdHeadline: {
+                        show: true,
+                        headlineText: "Fancybox with image given by url", headlineLevel: 3
+                    },
+                    ariaLabelText: ariaLabelText
+                })
             } else if (type === "image") {
                 openFancyBox({
                     url: content,
@@ -1602,7 +1660,8 @@ export default {
                             show: true,
                             text: "figcaption"
                         }
-                    }
+                    },
+                    ariaLabelText: ariaLabelText
                 })
             }
         },

package/src/assets/data/address-data.json

@@ -1,43 +1,43 @@
 {
-      "company": {
-            "iconClass": "icon-company",
-            "value": "Your company name"
-      },
-      "address": {
-            "iconClass": "icon-home",
-            "streetNo": "Your Street/No",
-            "zip": "Your zip",
-            "city": "Your city",
-            "miscInfo": "",
-            "country": "Your country",
-            "longitude": "0.0",
-            "latitude": "0.0",
-            "location": ""
-      },
-      "telephone": {
-            "iconClass": "icon-phone",
-            "value": "Your phone number"
-      },
-      "mobilephone": {
-            "iconClass": "icon-device-smartphone",
-            "value": "Your mobile phone number"
-      },
-      "fax": {
-            "iconClass": "icon-fax",
-            "value": "Your fax number"
-      },
-      "email": {
-            "iconClass": "icon-mail",
-            "value": "Your email address"
-      },
-      "website": {
-            "iconClass": "icon-globe",
-            "value": "Your web site"
-      },
-      "custom": {
-            "iconClass": "icon-questionmark-circle",
-            "value": "Custom data"
-      }
+  "company": {
+    "iconClass": "icon-company",
+    "text": "Your company name"
+  },
+  "address": {
+    "iconClass": "icon-home",
+    "streetNo": "Your Street/No",
+    "zip": "Your zip",
+    "city": "Your city",
+    "miscInfo": "",
+    "country": "Your country",
+    "longitude": "0.0",
+    "latitude": "0.0",
+    "location": ""
+  },
+  "telephone": {
+    "iconClass": "icon-phone",
+    "text": "Your phone number"
+  },
+  "mobilephone": {
+    "iconClass": "icon-device-smartphone",
+    "text": "Your mobile phone number"
+  },
+  "fax": {
+    "iconClass": "icon-fax",
+    "text": "Your fax number"
+  },
+  "email": {
+    "iconClass": "icon-mail",
+    "text": "Your email address"
+  },
+  "website": {
+    "iconClass": "icon-globe",
+    "text": "Your web site"
+  },
+  "custom": {
+    "iconClass": "icon-questionmark-circle",
+    "text": "Custom data"
+  }
 }
 
 

package/src/assets/data/image-gallery.json

@@ -1,8 +1,8 @@
 [
   {
     "image": {
-      "src": "media/images/gallery-images/large/landscape-01.jpg",
-      "srcImageLarge": "media/images/gallery-images/large/landscape-01.jpg",
+      "src": "media/images/demo-images/medium/landscape-01.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-01.jpg",
       "alt": "Alternative text 1"
     },
     "figcaption": {
@@ -14,8 +14,8 @@
   },
   {
     "image": {
-      "src": "media/images/gallery-images/large/landscape-02.jpg",
-      "srcImageLarge": "media/images/gallery-images/large/landscape-02.jpg",
+      "src": "media/images/demo-images/medium/landscape-02.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-02.jpg",
       "alt": "Alternative text 2"
     },
     "figcaption": {
@@ -27,8 +27,8 @@
   },
   {
     "image": {
-      "src": "media/images/gallery-images/large/landscape-03.jpg",
-      "srcImageLarge": "media/images/gallery-images/large/landscape-03.jpg",
+      "src": "media/images/demo-images/medium/landscape-03.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-03.jpg",
       "alt": "Alternative text 3"
     },
     "figcaption": {
@@ -40,8 +40,8 @@
   },
   {
     "image": {
-      "src": "media/images/gallery-images/large/landscape-04.jpg",
-      "srcImageLarge": "media/images/gallery-images/large/landscape-04.jpg",
+      "src": "media/images/demo-images/medium/landscape-04.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-04.jpg",
       "alt": "Alternative text 4"
     },
     "figcaption": {

package/src/assets/data/thumbnail-scroller.json

@@ -2,8 +2,8 @@
   {
     "image": {
       "id": 1,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-01.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-01.jpg",
       "alt": "Alternative Text 1"
     },
     "figcaption": {
@@ -16,8 +16,8 @@
   {
     "image": {
       "id": 2,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-02.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-02.jpg",
       "alt": "Alternative Text 2"
     },
     "figcaption": {
@@ -30,8 +30,8 @@
   {
     "image": {
       "id": 3,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-03.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-03.jpg",
       "alt": "Alternative Text 3"
     },
     "figcaption": {
@@ -44,8 +44,8 @@
   {
     "image": {
       "id": 4,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-04.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-04.jpg",
       "alt": "Alternative Text 4"
     },
     "figcaption": {
@@ -58,8 +58,8 @@
   {
     "image": {
       "id": 5,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-05.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-05.jpg",
       "alt": "Alternative Text 5"
     },
     "figcaption": {
@@ -72,8 +72,8 @@
   {
     "image": {
       "id": 6,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-06.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-06.jpg",
       "alt": "Alternative Text 6"
     },
     "figcaption": {
@@ -86,8 +86,8 @@
   {
     "image": {
       "id": 7,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-07.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-07.jpg",
       "alt": "Alternative Text 7"
     },
     "figcaption": {
@@ -100,8 +100,8 @@
   {
     "image": {
       "id": 8,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-08.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-08.jpg",
       "alt": "Alternative Text 8"
     },
     "figcaption": {