The two directives "eaImg" and "eaImgBox" together with the JSON file "imgBoxList.json" and the "imgBox.css" file form a unit for the simple representation of images. The mechanism contains the functions for displaying in full screen mode and a scrolling mechanism through the images of a defined group.
You start full-screen mode by clicking on the image.
To ensure full functionality, the eaImgBox directive must be added to the "index.html" file. <div ea-img-box></div> The above display can be generated as follows. The JSON file "imgBox.json" describes the images of the group "DE". This file is read with the "eaLoadJson" directive in the "index.html" file. Alternatively, you can create an object of the same structure yourself if you don't want to use this directive. {"entries": [ { "imgKey": "DE", "imgBodyList": ["A view across the Kreuzkanal to Schwerin Castle", "The landmarks of Warnemünde, the Teepott and the Lighthouse"], "imgList": ["content/pictures/Schwerin-2022-Schloss-mit-Kreuzkanal.jpg", "content/pictures/Warnemünde-2018-Teepott.jpg"] } ] } The html example uses the "eaImg" directive embedded in bootstrap elements <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12"> <div ea-img data-img-box-idx="1" data-img-box-key = "DE"></div> </div> <div class="col-lg-6 col-md-6 col-sm-12"> <div ea-img data-img-box-idx="2" data-img-box-key = "DE"></div> </div> </div> The following css file "imgBox.css" is used to display the images. /* https://www.w3schools.com/howto/howto_js_lightbox.asp */ .row > .column { padding: 0 8px; } .row:after { content: ""; display: table; clear: both; } /* Create four equal columns that floats next to eachother */ .columnImg { float: left; width: 25%; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1050; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* EA */ border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25); backdrop-filter: blur(5px); } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 98%; /* EA */ border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25); height: max-content; } /* EA */ .modal-inner { border: 1px solid #ddd; padding-top: 15px; padding-bottom: 5px; margin: 10px; width: 98%; height: auto; display: flex; flex-direction: column; justify-content: space-between; min-height: 160px; background-color: rgba(255, 255, 255, .45); border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25); backdrop-filter: blur(5px); } /* The Close Button */ .close { color: #c0c0c0; position: absolute; top: 5px; right: 15px; font-size: 35px; font-weight: bold; z-index: 1051; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } /* Hide the slides by default */ .mySlides { background-color: #ddd; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; text-decoration: none; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "back button" to the left */ .prev { left: 0; } /* Position the "next button" to the right */ .next { right: 0; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */ .numbertext { color: #21a828; font-size: 12px; padding: 8px 12px; position: absolute; top: -10px; } /* Caption text */ .caption-container { text-align: center; padding: 5px 16px; color: #ddd; } img.myImgControll { opacity: 0.6; } .eaImgBoxItem{ display: none; width: auto; height: auto; align-items: center;*/ max-width: 100%; max-height: 750px; } .active, .myImgControll:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }